在Flutter中，表单验证通过后如何导航至下一页面？

在Flutter开发场景中，表单验证通过后跳转页面的核心逻辑是：先通过表单的全局Key获取状态并完成验证，验证通过后利用Flutter的路由导航机制跳转页面。

实现步骤 #

• 提前为Form组件绑定GlobalKey<FormState>（示例中为_formkey），用于获取表单的当前状态
• 在按钮的点击回调里，通过_formkey.currentState拿到表单实例
• 调用form.validate()触发所有表单字段的验证逻辑，返回true则代表验证全部通过
• 验证通过后，使用Navigator.push()方法跳转到目标页面

完整代码示例 #

SizedBox(
  height: 50,
  width: 160,
  child: Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: const Color(0xFF0890F2)),
      child: TextButton(
          style: TextButton.styleFrom(
            backgroundColor: const Color(0xFF223843),
          ),
          onPressed: () {
            final form = _formkey.currentState;
            if (form != null && form.validate()) {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => MyLoginPage()));
            }
          },
          child: const Text(
            'Sign Up',
            style: TextStyle(color: Colors.white),
          ))),
),

额外说明 #

• form.validate()会遍历表单内所有带有validator回调的字段（比如TextFormField），只有所有字段验证都通过才会返回true
• 如果需要在跳转前保存表单数据，可以在验证通过后调用form.save()方法，再执行跳转逻辑
• 除了MaterialPageRoute，也可以使用命名路由Navigator.pushNamed()来实现页面跳转，适配更复杂的路由管理场景

内容的提问来源于stack exchange，提问作者ashish sapkota