首页 > 其他分享 >flutter provider create: (_) => xxxx(),

flutter provider create: (_) => xxxx(),

时间:2023-07-14 12:14:10浏览次数:62  
标签:count Widget xxxx read create watch class context flutter

Provider通常使用ChangeNotifierProvider配合ChangeNotifier一起来实现状态的管理与Widget的更新。

ChangeNotifierProvider本质上其实就是Widget,它作为父节点Widget,可将数据共享给其所有子节点Widget使用或更新;

    • 创建model,继承ChangeNotifier,用来实现数据更新的通知并监听数据的变化

       
    •   调用notifyListeners()通知给监听方

       

    • 创建ChangeNotifierProvider,用来声明Provider,实现跨组建的数据共享;

    • 用ChangeNotifierProvider将父布局包裹,在父或子节点ChildA通过Provider.of<T>(BuildContext context, {bool listen = true})进行数据操作,
      可同步更新父与子的数据与UI。其中listen默认为true可监听数据的变化,为false的情况只可读取数据的值

       


  • 接收共享数据;context.watch<>()和context.read<>()

  • 不管是在父节点还是在子节点,都可以对ProviderViewModel的数据进行操作和监听。
    例1在操作与读取时使用的是Provider.of<T>(BuildContext context, {bool listen = true})的方式,
    为了可以更明确对于Provider的操作,我们可将它替换为context.watch<>()和context.read<>()方式。
    我们可以通过源码看到,context.watch<>()和context.read<>()方法其实都是调用Provider.of<T>(BuildContext context, {bool listen = true})来实现

     

 pubspec.yaml 中引用

provider: ^6.0.3

 

在Flutter中,context.watch<T>()context.read<T>()都是用于在Widget树中获取和监听状态的方法,它们都是来自于Flutter的状态管理库provider

  1. context.watch<T>():该方法用于订阅状态变化,并在状态发生变化时重新构建相关的Widget。当使用context.watch<T>()订阅某个类型为T的状态时,如果该状态发生变化,与该状态相关的Widget会被重新构建。

final count = context.watch<Counter>().count;

  在上面的示例中,我们使用context.watch<Counter>()订阅了类型为Counter的状态,当Counter状态发生变化时,相关的Widget会重新构建,并获取最新的count值。context.read<T>():该方法用于获取指定类型为T的状态的当前值,而不会订阅状态的变化。如果在context.read<T>()之前没有调用过相关状态的notifyListeners()方法,那么获取到的将是状态的初始值。

  

final count = context.read<Counter>().count;

  在上面的示例中,我们使用context.read<Counter>()获取了类型为Counter的状态的当前值。

总结:

  • 如果您需要在状态发生变化时自动重新构建相关的Widget,请使用context.watch<T>()来订阅状态。
  • 如果您只需要获取状态的当前值而不关心状态的变化,请使用context.read<T>()来获取状态。

  请注意,context.watch<T>()context.read<T>()都需要在Widget树中的BuildContext上下文中使用。通常,您可以在构建方法中使用这些方法。

 

    

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// Define a counter class as a ChangeNotifier
class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final count = context.watch<Counter>().count;

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Count: $count',
              style: TextStyle(fontSize: 24),
            ),
            ElevatedButton(
              onPressed: () {
                context.read<Counter>().increment();
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

 

In this example, we define a Counter class that extends ChangeNotifier. It has a count property and an increment method that increases the count and notifies the listeners.

The MyApp widget wraps the Counter class with ChangeNotifierProvider to make it available to the rest of the app.

In the HomePage widget, we use context.watch<Counter>().count to subscribe to changes in the Counter state. Whenever the count changes, the widget will be rebuilt to reflect the updated value. We also use context.read<Counter>().increment() to call the increment method of the Counter class when the button is pressed.

This example demonstrates how to use context.watch<T>() and context.read<T>() to interact with state in Flutter using the provider package.

 

 

The line ChangeNotifierProvider(create: (_) => userProvider) is creating a provider for the userProvider object.

Here's an example to illustrate its usage:

 

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class User {
  final String name;
  final int age;

  User(this.name, this.age);
}

class UserProvider with ChangeNotifier {
  User _user;

  User get user => _user;

  void setUser(User user) {
    _user = user;
    notifyListeners();
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => UserProvider(),
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userProvider = Provider.of<UserProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('User Info'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Name: ${userProvider.user?.name ?? ''}',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              'Age: ${userProvider.user?.age ?? ''}',
              style: TextStyle(fontSize: 24),
            ),
            ElevatedButton(
              onPressed: () {
                final newUser = User('John Doe', 30);
                userProvider.setUser(newUser);
              },
              child: Text('Set User'),
            ),
          ],
        ),
      ),
    );
  }
}

 

In this example, we have a User class representing user information. The UserProvider class is a ChangeNotifier that manages the state of the current user.

The ChangeNotifierProvider is created with create: (_) => UserProvider(). It instantiates a new UserProvider object and makes it available to the widget tree.

In the HomePage widget, we use Provider.of<UserProvider>(context) to access the UserProvider instance. We can then use userProvider.user to get the current user information and update it by calling userProvider.setUser(newUser).

By wrapping the HomePage widget with ChangeNotifierProvider, the UserProvider state will be available to all the descendant widgets that depend on it. When the state changes, the corresponding widgets will be rebuilt to reflect the updated values.

 

In the context of the create parameter in ChangeNotifierProvider, the _ represents the build context argument that is not being used.

The _ is a convention used in Dart to indicate that a variable is intentionally unused. It's a way to communicate to other developers that the value of the variable is not relevant or necessary in the given context.

In the case of ChangeNotifierProvider, the create parameter expects a callback function that takes a build context argument. However, if the callback function does not require the build context, it is common to use _ as the variable name to indicate that it is intentionally unused.

    

标签:count,Widget,xxxx,read,create,watch,class,context,flutter
From: https://www.cnblogs.com/hztech/p/17553348.html

相关文章

  • Flutter系列文章-Flutter环境搭建和Dart基础
    Flutter是Google推出的一个开源的、高性能的移动应用开发框架,可以用一套代码库开发Android和iOS应用。Dart则是Flutter所使用的编程语言。让我们来看看如何搭建Flutter开发环境,并了解Dart语言的基础知识。一、Flutter环境搭建1.安装FlutterSDK首先,访问Flutter官网下载Flutte......
  • 直播软件源码,Flutter中导航栏和状态栏设置成透明
    直播软件源码,Flutter中导航栏和状态栏设置成透明一、Flutter透明状态栏设置 import'package:flutter/material.dart';//导入对应的文件import'package:flutter/services.dart';   voidmain(){ //配置透明的状态栏 SystemUiOverlayStylesystemUiOverlayStyle=co......
  • IIS部署createWebHistory路由模式的Vue项目
    接口使用NetCore,前端使用Vue3.+网站部署目录如下api(虚拟应用程序)webindex.html需要在服务器上按照URLRewrite下载地址:https://www.iis.net/downloads/microsoft/url-rewrite安装后在网站根目录下创建“web.config”文件,内容如下<?xmlversion="1.0"encoding="UTF-8"?......
  • [Vue] 使用pdf-lib和@pdf-lib/fontkit 报错 fontkit.create is not a function
    描述:pdf-lib注册了@pdf-lib/fontkit后(pdfDoc.registerFontkit(fontkit)),内部调用了fontkit的create方法,但是这个方法不存在。我在控制台打印了下fontkit对象,发现fontkit包了一层default,即 fontkit.default.create(),所以找不到这个方法, pdf-lib使用的是 fo......
  • document.createComment All In One
    document.createCommentAllInOnedocument.createCommentdocument.createComment("auth")<!--auth-->MDNXML/HTMLconstdocu=newDOMParser().parseFromString("<xml></xml>","application/xml");const......
  • Flutter/Dart import 的方式 大全
      导入文件import后面的路径有哪几种?各代表什么意思?关键字有那些?文件导入的顺序是什么?​import'dart:xxx'; 引入Dart标准库import'xxx/xxx.dart';引入绝对路径的Dart文件import'package:xxx/xxx.dart'; 引入Pub仓库pub.dev(或者pub.flutter-io.cn)中的第三方库impor......
  • flutter icon
      可以直接使用Icon(Icons.NAME)                               ......
  • 【问题解决】docker login报错 org.freedesktop.Secret.Error.IsLocked: Cannot creat
    问题场景环境docker24.0.2社区版UbuntuServer18.04LTS刚刚执行dockerlogin登录仓库报错:hellxz@bigdata:~/dockerTest$dockerloginharbor.xxx.com.cnUsername:hellxzPassword:**Message:17:26:21.611:Remoteerrorfromsecretservice:org.freedesktop.Se......
  • ChatGPT + Flutter快速开发多端聊天机器人App
    介绍:当前ChatGPT应用如雨后春笋般应运而生,给移动端开发者也带来了极大的机会。本课程将整合ChatGPT与Flutter高级技术,手把手带你从0到1开发一款可运行在多端的聊天机器人App,帮助你抓住机遇,快速具备AI运用能力,成为移动端领域的AI高手。目录:第1章课程介绍与学习指南第2章走进Cha......
  • python: create animated GIF
    #-*-coding:UTF-8-*-#encoding:utf-8#-*-coding:UTF-8-*-#版权所有2023©涂聚文有限公司#许可信息查看:#描述:#Author:geovindu,GeovinDu涂聚文.#IDE:PyCharm2023.1python11#Datetime:2023/7/511:08#User:geovindu#Prod......