找不到正确的提供者 - Flutter ChangeNotificationProvider

Question

错误：无法在此 ProductScreen 小部件上方找到正确的提供程序

尝试在我的 flutter 应用程序中使用 MVVM 时遇到此错误。 ProductScreen 上方有一个提供程序，即 ProductListViewModel，我认为它应该可以工作。 如果您能给我反馈，我将不胜感激。

ChangeNotifierProvider 用法：

  class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Products",
        debugShowCheckedModeBanner: false,
        home:
        ChangeNotifierProvider(
          create: (context) => ProductListViewModel(),
          child: ProductScreen(),
        )
    );
}
}

产品列表视图模型

class ProductListViewModel extends ChangeNotifier {

  List<ProductViewModel> products = List<ProductViewModel>();

  Future<void> fetchProducts(String keyword) async {
    final results =  await Webservice().fetchProducts(keyword);
    this.products = results.map((item) => ProductViewModel.fromProduct(item)).toList();
    notifyListeners();
  }
}

产品画面

class ProductScreen extends StatefulWidget {
  @override
  _ProductScreenState createState() => _ProductScreenState();
}

class _ProductScreenState extends State<ProductScreen> {

  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    // Provider.of<ProductListViewModel>(context, listen: false).fetchProducts("");
  }

  @override
  Widget build(BuildContext context) {

    final vm = Provider.of<ProductListViewModel>(context);

    return Scaffold(
        appBar: AppBar(
            title: Text("Movies")
        ),
        body: Container(
            padding: EdgeInsets.all(10),
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Column(children: <Widget>[
              Container(
                padding: EdgeInsets.only(left: 10),
                decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.circular(10)
                ),
                child: TextField(
                  controller: _controller,
                  onSubmitted: (value) {
                    if(value.isNotEmpty) {
                      vm.fetchProducts(value);
                      _controller.clear();
                    }
                  },
                  style: TextStyle(color: Colors.white),
                  decoration: InputDecoration(
                      hintText: "Search",
                      hintStyle: TextStyle(color: Colors.white),
                      border: InputBorder.none
                  ),

                ),
              ),
              Expanded(
                  child: ProductList(products: vm.products))
            ])
        )

    );
  }
}

Answer 1

将 MaterialApp 小部件包装在 ChangeNotifierProvider 小部件内。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (ctx) => ProductListViewModel(),
        child: MaterialApp(
        title: "Products",
        debugShowCheckedModeBanner: false,
        home: ProductScreen(),
        )
    );
}
}

或者您可以按照docs 中提到的方式定义它。

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ProductListViewModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Products",
        debugShowCheckedModeBanner: false,
        home: ProductScreen(),
    );
}
}

另请查看此媒体博客，了解有关提供者、多提供者和消费者的更多信息。