Dart 如何在flifter中将非字符串数据传递给命名路由？

我有很多屏幕，我正在使用

导航器
。我想使用“命名路由”，但我还需要将非字符串（如图像）传递到下一个路由

我不能使用
pushNamed（）
，因为我不能向它传递非字符串数据

如何使用命名路由并发送非字符串数据？
编辑：

现在可以将复杂参数传递给
Navigator.pushNamed
：

String id;
Navigator.pushNamed(context, '/users', arguments: id);

然后可以在
onGenerateRoute
中使用它来使用以下参数自定义管线构建：

MaterialApp(
  title: 'Flutter Hooks Gallery',
  onGenerateRoute: (settings) {
    final arguments = settings.arguments;
    switch (settings.name) {
      case '/users':
        if (arguments is String) {
          // the details page for one specific user
          return UserDetails(arguments);
        }
        else {
          // a route showing the list of all users
          return UserList();
        }
      default:
        return null;
    }
  },
);

将路由声明为构造函数参数时，可以传递任何类型的参数，如下所示，
例如，要发送字符串列表，
列表标题=[]；
void main（）=>runApp(
新材料聚丙烯(
主页：新建第一页（），
路线：{
“/SecondPage”：（构建上下文）=>新建第二页（标题），
},
),
);
类FirstPage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
退回新货柜(
子项：新升起按钮（按下时：（）{
Navigator.of（context.pushNamed（'/SecondPage'）；
}),
);
}
}
类SecondPage扩展了无状态小部件{
最后名单标题；
第二页（本页标题）；
@凌驾
小部件构建（构建上下文）{
返回新的ListView.builder(
itemBuilder：（上下文，索引）{
返回新的ListTile(
标题：新文本（标题[索引]），
);
},
);
}
}
我正在用相机拍摄图像，然后将它们传递到确认页面，如下所示：

   ImagePicker.pickImage(source: source).then((File file) {
    Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => MediaCaptured(file: file),
        ));
  });

您可以轻松地对任何类型的文件或非字符串数据执行相同的操作

var foo = "non-string data";
Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => MediaCaptured(foo: foo),
        ));

按其类名调用路由中的下一页，如上所述

只要确保你的新页面在它的构造函数中接受这个

 // Stateful Widget
class MediaCaptured extends StatefulWidget {
    MediaCaptured({ Key key, @required this.foo,}) : super(key: key);
    final var foo;
}

// StatelessWidget
class MediaCaptured extends StatelessWidget {
    MediaCaptured(this.foo);
    var foo;
}

对于这个问题的结果，我开发了这个包

链接：

这提供了许多您期望的和易于使用的功能

Navigate.navigate(context,
                      "home",
                      transactionType:TransactionType.fromLeft , // optional
                      replaceRoute: ReplaceRoute.thisOne, //optional
                      arg: {"transactionType":TransactionType.fromLeft,"replaceRoute":ReplaceRoute.thisOne} //optional
                      );

Flatter Cookbook演示了如何导航到新页面并向其传递非字符串数据


我从Navigator.pushedNamed（）开始，因为它很简单，而且我没有任何数据要传递。当我的需求发生变化，想要传递数据时，我切换到
Navigator.push（）

例如：

var nextPageData = {foo:'bar'};

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => 
     MyNextPage(myData: nextPageData))
 );

更新：2021年4月3日

这个答案很古老，从那时起，颤振导航已经有了很大的发展。这可能不是处理当前版本导航的最佳方式，请考虑其他答案。出于历史目的，我将把这个留在这里


使用
onGenerateRoute
可以轻松地使用
Navigator.pushNamed
或
Navigator.pushReplacementNamed
传递路由转换的复杂参数

显示该概念的最小设置是

主飞镖
导入“包装：颤振/材料.省道”；
导入“package:navigator/routes.dart”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振导航演示”，
主题：主题数据(
primarySwatch:Colors.teal，
),
onGenerateRoute：（路由设置）{
返回物料路线(
生成器：（BuildContext上下文）=>makeRoute(
上下文：上下文，
routeName:settings.name，
参数：settings.arguments，
),
国家：是的，
fullscreenDialog:false，
);
},
);
}
}

飞镖
在
\u buildRoute
方法中，我们检查路由名称并将参数强制转换为所需类型

如果所需参数不是简单类型，则必须先定义类型

import 'package:flutter/material.dart';

import 'package:navigator/list.dart';
import 'package:navigator/details.dart';

Widget makeRoute(
    {@required BuildContext context,
    @required String routeName,
    Object arguments}) {
  final Widget child =
      _buildRoute(context: context, routeName: routeName, arguments: arguments);
  return child;
}

Widget _buildRoute({
  @required BuildContext context,
  @required String routeName,
  Object arguments,
}) {
  switch (routeName) {
    case '/':
      return ArticleList();
    case '/ArticleView':
      Article article = arguments as Article;
      return ArticleView(article: article);
    default:
      throw 'Route $routeName is not defined';
  }
}

观点

列表.省道
在本例中，使用定义的类型
Article
构造route参数

import 'package:flutter/material.dart';
import 'package:navigator/details.dart' show Article;

class ArticleList extends StatefulWidget {
  @override
  _ArticleListState createState() => _ArticleListState();
}

class _ArticleListState extends State<ArticleList> {
  List<Article> articles = [
    Article(
        id: 1,
        title: 'Article 1',
        author_name: 'Nilotpal',
        summary: 'Article 1 summary'),
    Article(
        id: 2,
        title: 'Article 2',
        author_name: 'Mike',
        summary: 'Article 2 summary'),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Articles'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            ListTile(
              title: Text('${articles[0].title}'),
              subtitle: Text('by ${articles[0].author_name}'),
              onTap: () {
                Navigator.of(context)
                    .pushNamed('/ArticleView', arguments: articles[0]);
              },
            ),
            ListTile(
              title: Text('${articles[1].title}'),
              subtitle: Text('by ${articles[1].author_name}'),
              onTap: () {
                Navigator.of(context)
                    .pushNamed('/ArticleView', arguments: articles[1]);
              },
            ),
          ],
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:navigator/details.dart”展示文章；
类ArticleList扩展了StatefulWidget{
@凌驾
_ArticleListState createState（）=>\u ArticleListState（）；
}
类_ArticleListState扩展状态{
列出文章=[
文章(
id:1，
标题：“第1条”，
作者姓名：“Nilotpal”，
摘要：“第1条摘要”），
文章(
id:2，
标题：“第2条”，
作者姓名：“迈克”，
摘要：“第2条摘要”），
];
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“条款”），
),
正文：中(
子：列(
儿童：[
列表砖(
标题：文本（“${articles[0].title}”），
字幕：文本（${articles[0]。作者姓名}），
onTap:（）{
导航器（上下文）
.pushNamed（'/ArticleView'，参数：articles[0]）；
},
),
列表砖(
标题：文本（“${articles[1].title}”），
字幕：文本（${articles[1]。作者姓名}），
onTap:（）{
导航器（上下文）
.pushNamed（'/ArticleView'，参数：articles[1]）；
},
),
],
),
),
);
}
}

细节，省道
为参数定义一个类型

import 'package:flutter/material.dart';

class Article {
  final int id;
  final String author_name;
  final String title;
  final String summary;

  Article(
      {@required this.id,
      @required this.author_name,
      @required this.title,
      @required this.summary});
}

class ArticleView extends StatelessWidget {
  final Article _article;

  ArticleView({@required Article article}) : _article = article;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${_article.title}'),
      ),
      body: SafeArea(
        top: true,
        child: Center(
          child: Column(
            children: <Widget>[
              Text('${_article.author_name}'),
              Text('${_article.summary}'),
            ],
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
班级文章{
最终int id；
最后一个字符串作者姓名；
最后的字符串标题；
最终字符串摘要；
文章(
{@required this.id，
@需要此。作者名称，
@需要这个标题，
@需要此项。摘要}）；
}
类ArticleView扩展了无状态小部件{
最终条款(u条款),；
ArticleView（{@required Article}）：_Article=Article；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“${u article.title}”），
),
正文：安全区(
托普：没错，
儿童：中心(
小孩
import 'package:flutter/material.dart';

class Article {
  final int id;
  final String author_name;
  final String title;
  final String summary;

  Article(
      {@required this.id,
      @required this.author_name,
      @required this.title,
      @required this.summary});
}

class ArticleView extends StatelessWidget {
  final Article _article;

  ArticleView({@required Article article}) : _article = article;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${_article.title}'),
      ),
      body: SafeArea(
        top: true,
        child: Center(
          child: Column(
            children: <Widget>[
              Text('${_article.author_name}'),
              Text('${_article.summary}'),
            ],
          ),
        ),
      ),
    );
  }
}

  routes: {
    HomePage.route: (_) => HomePage(),
    DetailsPage.route: (context) =>
        DetailsPage(ModalRoute.of(context).settings.arguments),
  },

import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          initialRoute: HomePage.route,
          routes: {
            HomePage.route: (_) => HomePage(),
            DetailsPage.route: (context) =>
                DetailsPage(ModalRoute.of(context).settings.arguments),
          },
        );
      }
    }

    class HomePage extends StatelessWidget {
      static const String route = '/';

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              Navigator.pushNamed(context, '/details',
                  arguments: ScreenArguments(
                    'My Details',
                    'Some Message',
                  ));
            },
          ),
        );
      }
    }

    class DetailsPage extends StatelessWidget {
      static const String route = '/details';

      final ScreenArguments arguments;

      DetailsPage(this.arguments);

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(arguments.title),
          ),
          body: Center(
            child: Text(arguments.message),
          ),
        );
      }
    }

    class ScreenArguments {
      final String title;
      final String message;

      ScreenArguments(this.title, this.message);
    }

List users = [2,4,6,3]
Get.toNamed('/second', arguments: users);

print(Get.arguments);
// out: [2,4,6,3]

Navigator.of(context).pushNamed('/pending_order',arguments: {"staff" : staffObj});

  class PendingOrders extends StatefulWidget {
  @override
  _PendingOrdersState createState() => _PendingOrdersState();
}

class _PendingOrdersState extends State<PendingOrders> {
  StaffModel staffModelObj;

  @override
  Widget build(BuildContext context) {
    final routes =
        ModalRoute.of(context).settings.arguments as Map<String, dynamic>;
    if (routes != null) {
      staffModelObj = routes["staff"];
    }
    return Scaffold(...);}}