Flutter 中的 Navigator 和 Provider 冲突答案

【问题标题】：Navigator and Provider conflict in flutterFlutter 中的 Navigator 和 Provider 冲突
【发布时间】：2020-02-24 17:21:27
【问题描述】：

使用 Provider 和 Navigator 概念在屏幕之间发送数据会产生冲突

运行后报错

在构建 SecondRoute(dirty) 时引发了以下 ProviderNotFoundError：错误：在此 SecondRoute 小部件上方找不到正确的提供程序

要修复，请：

确保 Provider 是此 SecondRoute 小部件的祖先
向 Provider 提供类型
向消费者提供类型
向 Provider.of() 提供类型
始终使用包导入。例如：`import 'package:my_app/my_code.dart';
确保使用了正确的context。

https://www.ideone.com/xHXK5m

【问题讨论】：

标签： flutter dart

【解决方案1】：

你可以像这样传递数据，把数据放在类中

RaisedButton(
child: Text(‘Send data to the second page’),
onPressed: () {
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(
       data: data,
    )),
 );
 }, 
 ),

并接收这样的数据

class SecondPage extends StatelessWidget {
final Data data;
SecondPage({this.data});
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(‘Constructor — second page’),
  ),
  body: Container(
    padding: EdgeInsets.all(12.0),
    alignment: Alignment.center,
    child: Column(
      children: <Widget>[
        Container(
          height: 54.0,
          padding: EdgeInsets.all(12.0),
          child: Text(‘Data passed to this page:’,
           style: TextStyle(fontWeight: FontWeight.w700))),
        Text(‘Text: ${data.text}’),
        Text(‘Counter: ${data.counter}’),
        Text(‘Date: ${data.dateTime}’),
      ],
    ),
  ),
  );
  }

【讨论】：

我可以使用构造函数，但我想使用提供者

【解决方案2】：

您可以尝试将您拥有的任何Provider 值放在MaterialApp 上方，从而导航，或者当您推送到第二页时，再次提供该值。提供程序的范围仅限于小部件树，因此这是预期的行为。

例如，要将值传递给另一个路由，您可以执行类似的操作

onPressed: () {
  Navigator.of(context).push(MaterialPageRoute(builder: (context) {
    final foo = 'foo';

    Provider<String>.value(
      value: foo,
      child: NewPage(),
    );
  }));
},

然后在 NewPage 路由中像常规一样使用它。

【讨论】：

【解决方案3】：

试试这个代码：

MaterialApp(
title: 'Navigation Basics',
home: ChangeNotifierProvider(
  builder: (context) => Data(),
  child: FirstRoute(),
))

在FirstRoute中删除ChangeNotifierProvider

【讨论】：