Flutter GetX中Get.to无法跳转至AddTaskPage问题求助

问题描述 #

我开发的待办任务应用中，点击「Add Task」按钮时，调用GetX框架的Get.to(()=>AddTaskPage())方法无法完成页面跳转，相关代码如下：

HomePage代码 #

import 'package:app15/controllers/task_controller.dart';
import 'package:app15/notification_service.dart';
import 'package:app15/ui/add_task_bar.dart';
import 'package:app15/ui/theme.dart';
import 'package:app15/widgets/buttons.dart';
import 'package:date_picker_timeline/date_picker_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:intl/intl.dart';
import 'package:get/get.dart';

import '../models/task.dart';
import '../widgets/task_tile.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key : key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _taskController = Get.put(TaskController());
  DateTime _selectedDate = DateTime.now();
  var notifyHelper;

  @override
  void initState() {
    super.initState();
    notifyHelper=NotifyHelper();
    notifyHelper.initializeNotification();
    notifyHelper.requestIOSPermissions();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      body: Column(
        children: [
          Container(
            margin: const EdgeInsets.only(left: 20, right: 20, top: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(DateFormat.yMMMMd().format(DateTime.now()),
                        style: subHeadingStyle,
                      ),
                      Text("Today",
                        style: headingStyle,
                      ),
                    ],
                )
                ),

                //====== 跳转按钮 ======
                MyButton(label: "+ Add Task", onTap: ()async{
                  await Get.to(()=>AddTaskPage());
                  _taskController.getTasks();
                }
                )

              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 20, left: 20),
            child: DatePicker(
              DateTime.now(),
              height: 100,
              width: 80,
              initialSelectedDate: DateTime.now(),
              selectionColor: primaryClr,
              selectedTextColor: Colors.white,
              dateTextStyle: GoogleFonts.lato(
                textStyle: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w600,
                  color: Colors.grey,
                ),
              ),
              dayTextStyle: GoogleFonts.lato(
                textStyle: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                  color: Colors.grey,
                ),
              ),
              monthTextStyle: GoogleFonts.lato(
                textStyle: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  color: Colors.grey,
                ),
              ),
              onDateChange: (date) {
                setState(() {
                  _selectedDate = date;
                });
              },
            )
          ),
          SizedBox(height: 10,),
          _showTasks()
        ],
      )
    );
  }

  _showTasks() {
    return Expanded(
      child: Obx((){
        return ListView.builder(
            itemCount: _taskController.taskList.length,

            itemBuilder: (_, index) {
              Task task = _taskController.taskList[index];
              if(task.repeat=='Daily')
                {
                  DateTime date = DateFormat.jm().parse(task.startTime.toString());
                  var myTime = DateFormat("HH:mm").format(date);
                  notifyHelper.scheduledNotification(
                    int.parse(myTime.toString().split(":")[0]),
                    int.parse(myTime.toString().split(":")[1]),
                    task
                  );
                  return AnimationConfiguration.staggeredList(
                      position: index,
                      child: SlideAnimation(
                        child: FadeInAnimation(
                          child: Row(
                            children: [
                              GestureDetector(
                                onTap: () {
                                  _showBottomSheet(context, task);
                                },
                                child: TaskTile(task),
                              )
                            ],
                          ),
                        ),
                      )
                  );
                }
              if(task.date==DateFormat.yMd().format(_selectedDate)) {
                return AnimationConfiguration.staggeredList(
                    position: index,
                    child: SlideAnimation(
                      child: FadeInAnimation(
                        child: Row(
                          children: [
                            GestureDetector(
                              onTap: () {
                                _showBottomSheet(context, task);
                              },
                              child: TaskTile(task),
                            )
                          ],
                        ),
                      ),
                    )
                );
              }else {
                return Container();
              }
        });
      }),
    );
  }

  _showBottomSheet(BuildContext context, Task task) {
    Get.bottomSheet(
      Container(
        padding: const EdgeInsets.only(top: 4),
        height: task.isCompleted==1?
        MediaQuery.of(context).size.height*0.24:
        MediaQuery.of(context).size.height*0.32,
        color: Colors.white,
        child: Column(
          children: [
            Container(
              height: 6,
              width: 120,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.grey[300],
              ),
            ),
            Spacer(),
            task.isCompleted==1
            ?Container()
                : _bottomSheetButton(
                label: "Task Completed",
                onTap: () {
                  _taskController.markTaskCompleted(task.id!);
                  Get.back();
                },
                clr: primaryClr,
                context:context
            ),
            _bottomSheetButton(
                label: "Delete Task",
                onTap: () {
                  _taskController.delete(task);
                  Get.back();
                },
                clr: Colors.red[300]!,
                context:context
            ),
            SizedBox(
              height: 20,
            ),
            _bottomSheetButton(
                label: "Close",
                onTap: () {
                  Get.back();
                },
                clr: Colors.red[300]!,
                isClose: true,
                context:context
            ),
            SizedBox(
              height: 10,
            )
          ],
        ),
      )
    );
  }

  _bottomSheetButton({
    required String label,
    required Function()? onTap,
    required Color clr,
    bool isClose=false,
    required BuildContext context
}) {
      return GestureDetector(
        onTap: onTap,
        child: Container(
          margin: const EdgeInsets.symmetric(vertical: 4),
          height: 55,
          width: MediaQuery.of(context).size.width*0.9,
          decoration: BoxDecoration(
            border: Border.all(
              width: 2,
              color: isClose==true?Colors.grey[300]!:clr
            ),
            borderRadius: BorderRadius.circular(20),
            color: isClose==true?Colors.transparent:clr,
          ),
          child: Center(
            child: Text(
              label,
              style: isClose?titleStyle:titleStyle.copyWith(color: Colors.white),
            ),
          ),
        ),
      );
   }
}

buttons.dart代码 #

import 'package:flutter/material.dart';
import '../ui/theme.dart';

class MyButton extends StatelessWidget {
  final String label;
  final Function()? onTap;
  const MyButton({Key? key, required this.label, required this.onTap}) : super(key : key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: onTap,
        child: Container(
          width: 120,
          height: 60,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: primaryClr,
          ),
          child: Text(
            label,
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
    );
  }
}

排查及解决步骤 #

1. 确认AddTaskPage的有效性 #

确保AddTaskPage是完整的Widget实现，示例如下：

class AddTaskPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("添加任务")),
      body: const Center(child: Text("添加任务页面")),
    );
  }
}

若页面未正确实现，GetX无法完成跳转。

2. 检查GetX基础配置 #

• 确保pubspec.yaml中引入了GetX依赖：

  dependencies:
    get: ^4.6.5 # 使用最新版本
  

• 应用入口必须使用GetMaterialApp替代MaterialApp，这是GetX路由生效的核心前提：

  void main() {
    runApp(const GetMaterialApp(
      home: HomePage(),
    ));
  }
  

3. 修复按钮点击区域问题 #

当前MyButton中的Text未居中，导致只有文字区域可响应点击，修改buttons.dart，给Text添加Center包裹：

child: Center(
  child: Text(
    label,
    style: const TextStyle(
      color: Colors.white,
    ),
  ),
),

修改后整个按钮区域都能触发点击事件。

4. 调试验证跳转逻辑 #

在按钮点击事件中添加日志，确认代码是否执行：

MyButton(label: "+ Add Task", onTap: ()async{
  print("添加任务按钮已点击");
  final result = await Get.to(()=>AddTaskPage());
  print("从添加页面返回，结果：$result");
  _taskController.getTasks();
})

查看控制台输出，判断是点击未触发还是跳转逻辑异常。

5. 排查路由上下文冲突 #

若HomePage嵌套在其他路由组件中，可尝试使用Get.toNamed命名路由方式，或确保GetX上下文正常，不过Get.to无需依赖BuildContext，此步骤优先级较低。

内容的提问来源于stack exchange，提问作者Jay Khatri