一、配置路由

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return MaterialApp(
          initialRoute: '/',
          routes: {
        '/':(contxt)=>Tabs(),
        '/search':(contxt) =>SearchPage(),
        '/form': (context) => FormPage(),
          },
      );
  }
}

二、路由跳转

ElevatedButton(
    child: const Text("搜索一下"),
  onPressed: (){
      Navigator.pushNamed(context,'/search'); // 去配置的路由中寻找对应的组件，找到了就进行跳转
  }
)

三、命名路由跳转传值

官方文档： https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

routes.dart

import 'package:flutter/material.dart';
import 'package:untitled/pages/Search.dart';
import 'package:untitled/pages/Tabs.dart';
import 'package:untitled/pages/product.dart';
import 'package:untitled/pages/product_details.dart';
import 'package:untitled/pages/user/login.dart';
import 'package:untitled/pages/user/register1.dart';
import 'package:untitled/pages/user/register2.dart';
import '../pages/formPage.dart';
final routes = {
  '/':       (context) => Tabs(),
  '/form':   (context,{arguments}) => formPage(arguments: arguments),
  '/search': (context,{arguments}) => Search(arguments: arguments),
  '/product': (context,{arguments}) => productPage(arguments: arguments),
  '/product_detail': (context,{arguments}) => productDetailPage(arguments: arguments),
  '/user/login' : (context) => Login(),
  '/user/register/first': (context) => RegisterFirst(),
  '/user/register/second': (context) => RegisterSecond()
};
// 命令路由传参数的统一命名方式
var onGenerateRoute = (RouteSettings settings) {
  // 统一处理
  final String? name = settings.name;
  final Function? pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context,
        arguments: settings.arguments)
      );
      return route;
    }else{
      final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context)
      );
      return route;
    }
  }
};

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import './routes/routes.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      // routes: routes,
      onGenerateRoute: onGenerateRoute, // 将routes.dart中的onGenerateRoute赋值过来
    );
  }
}

跳转传值实例

cate.dart

import 'package:flutter/material.dart';
import '../formPage.dart';
class Cate extends StatefulWidget {
  const Cate({ Key? key }) : super(key: key);
  @override
  _CateState createState() => _CateState();
}
class _CateState extends State<Cate> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        onPressed: (){
          Navigator.pushNamed(context, '/form',arguments: {
            'name': 'yxr'
          });
        },
        child: Text("表单"),
      )
    );
  }
}

formPage.dart

import 'package:flutter/material.dart';
class formPage extends StatelessWidget {
  // const formPage({ Key? key }) : super(key: key);
  final arguments; // 定义arguments参数
  formPage({this.arguments}); // 在构造函数中来接收传入的参数
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("表单"),
      ),
      body: Container(
        child: Text("表单页面${arguments != null ? arguments['name'] : '0'}"),
      )
    );
  }
}