Flutter Provider状态管理---八种提供者使用分析

已于 2023-04-10 17:13:18 修改
阅读量617 收藏 2
点赞数
分类专栏： Flutter 文章标签： flutter
于 2023-04-10 17:09:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RreamigOfGirls/article/details/130063637
版权

Provider

Provider是最基本的Provider组件，可以使用它为组件树中的任何位置提供值，但是当该值更改的时候，它并不会更新UI

class UserModel {

  String name = "kwok";

  void changeName() {
    name = "hello";
  }
}

return Provider<UserModel>(
  create: (_) => UserModel(),
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    home: ProviderExample(),
  ),
);

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_example/user_model.dart';
import 'package:provider/provider.dart';

class ProviderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ProviderExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Consumer<UserModel>(
              builder: (_, userModel, child) {
                return Text(userModel.name,
                    style: TextStyle(
                        color: Colors.red,
                        fontSize: 30
                    )
                );
              },
            ),
            Consumer<UserModel>(
              builder: (_, userModel, child) {
                return Padding(
                  padding: EdgeInsets.all(20),
                  child: ElevatedButton(
                    onPressed: (){
                      userModel.changeName();
                    },
                    child: Text("改变值"),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

运行结果

我们点击按钮的会导致模型数据改变，但是模型数据改变之后UI并没有变化也没有重建，那是因为Provider提供者组件不会监听它提供的值的变化。

ChangeNotifierProvider

它跟Provider组件不同，ChangeNotifierProvider会监听模型对象的变化，而且当数据改变时，它也会重建Consumer（消费者），下面我们给出一个示例

import 'package:flutter/material.dart';

class UserModel1 with ChangeNotifier {

  String name = "Kwok";

  void changeName() {
    name = "hello";
    notifyListeners();
  }
}
return ChangeNotifierProvider<UserModel1>(
  create: (_) => UserModel1(),
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    home: ChangeNotifierProviderExample(),
  ),
);
import 'package:flutter/material.dart';
import 'package:flutter_provider_example/change_notifier_provider_example/user_model1.dart';
import 'package:provider/provider.dart';

class ChangeNotifierProviderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ChangeNotifierProvider"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Consumer<UserModel1>(
              builder: (_, userModel, child) {
                return Text(userModel.name,
                    style: TextStyle(
                        color: Colors.red,
                        fontSize: 30
                    )
                );
              },
            ),
            Consumer<UserModel1>(
              builder: (_, userModel, child) {
                return Padding(
                  padding: EdgeInsets.all(20),
                  child: ElevatedButton(
                    onPressed: (){
                      userModel.changeName();
                    },
                    child: Text("改变值"),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

FutureProvider

简单来说，FutureProvider用于提供在组件树中准备好使用其值时可能尚未准备好的值，主要是确保空值不会传递给任何子组件，而且FutureProvider有一个初始值，子组件可以使用该Future值并告诉子组件使用新的值来进行重建。

注意：

  • FutureProvider只会重建一次
  • 默认显示初始值
  • 然后显示Future值
  • 最后不会再次重建 
    第一步：创建模型
这里和Provider不同的是增加了构造函数，以及changeName变成了Future，我们模拟网络请求延迟两秒后改变其值。

class UserModel2{

  UserModel2({this.name});

  String? name = "Jimi";

  Future<void> changeName() async {
    await Future.delayed(Duration(milliseconds: 2000));
    name = "hello";
  }
}
第二步：提供Future
我们有一个方法，就是异步获取userModel2，模拟网络请求延迟两秒执行，最后修改了name并返回UserModel2

import 'package:flutter_provider_example/future_provider_example/user_model2.dart';

class UserFuture {

  Future<UserModel2> asyncGetUserModel2() async {
    await Future.delayed(Duration(milliseconds: 2000));
    return UserModel2(name: "获取新的数据");
  }

}
第三步：应用程序入口设置
initialData是默认值，create参数我们传了一个Future<UserModel2>，因为它接收的模型Create<Future<T>?>

return FutureProvider<UserModel2>(
  initialData: UserModel2(name: "hello"),
  create: (_) => UserFuture().asyncGetUserModel2(),
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    home: FutureProviderExample(),
  ),
);
第四步：使用共享数据
import 'package:flutter/material.dart';
import 'package:flutter_provider_example/future_provider_example/user_model2.dart';
import 'package:provider/provider.dart';

class FutureProviderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FutureProviderExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Consumer<UserModel2>(
              builder: (_, userModel, child) {
                return Text(userModel.name ?? "",
                    style: TextStyle(
                        color: Colors.red,
                        fontSize: 30
                    )
                );
              },
            ),
            Consumer<UserModel2>(
              builder: (_, userModel, child) {
                return Padding(
                  padding: EdgeInsets.all(20),
                  child: ElevatedButton(
                    onPressed: (){
                      userModel.changeName();
                    },
                    child: Text("改变值"),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

    StreamProvider

    StreamProvider提供流值，是围绕StreamBuilder，所提供的值会在传入的时候替换掉新值。和FutureProvider一样，主要的区别在于值会根据多次触发重新构建UI。

    第一步：创建模型

    class UserModel3{

  UserModel3({this.name});

  String? name = "kwok";

  void changeName() {
    name = "hello";
  }
}

        第二步：提供Stream

        下面这段代码类似计时器，每隔一秒钟生成一个数字

import 'package:flutter_provider_example/stream_provider_example/user_model3.dart';


class UserStream {

  Stream<UserModel3> getStreamUserModel() {
    return Stream<UserModel3>.periodic(Duration(milliseconds: 1000),
        (value) => UserModel3(name: "$value")
    ).take(10);
  }
}

  • 第三步：应用程序入口设置

    这里也有initialData初始值，和FutureProvider类似，只是create属性是获取一个Stream流。

      
    return StreamProvider<UserModel3>(
  initialData: UserModel3(name: "hello"),
  create: (_) => UserStream().getStreamUserModel(),
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    home: StreamProviderExample(),
  ),
);

    第四步：使用共享数据

    import 'package:flutter/material.dart';
import 'package:flutter_provider_example/stream_provider_example/user_model3.dart';
import 'package:provider/provider.dart';

class StreamProviderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("StreamProviderExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Consumer<UserModel3>(
              builder: (_, userModel, child) {
                return Text(userModel.name ?? "",
                    style: TextStyle(
                        color: Colors.red,
                        fontSize: 30
                    )
                );
              },
            ),
            Consumer<UserModel3>(
              builder: (_, userModel, child) {
                return Padding(
                  padding: EdgeInsets.all(20),
                  child: ElevatedButton(
                    onPressed: (){
                      userModel.changeName();
                    },
                    child: Text("改变值"),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

  • MultiProvider

    在上面的例子中我们都只是返回了一个提供者，在实际开发过程中肯定会有多个提供者，我们虽然可以采用嵌套的方式来解决，但是这样无疑是混乱的，可读性级差。这个时候强大的MultiProvder就产生了，我们来看下示例:

    第一步：创建两个模型

    import 'package:flutter/material.dart';

class UserModel1 with ChangeNotifier {

  String name = "kwok";

  void changeName() {
    name = "hello";
    notifyListeners();
  }
}

class UserModel4 with ChangeNotifier {

  String name = "kwok";
  int age = 18;

  void changeName() {
    name = "hello";
    age = 20;
    notifyListeners();
  }
}

  • 第二步：应用程序入口设置

    相对于方式一这种嵌套方式设置，方式二就显得尤为简单。

    方式一：嵌套设置

    return ChangeNotifierProvider<UserModel1>(
  create: (_) => UserModel1(),
  child: ChangeNotifierProvider<UserModel4>(
    create: (_) => UserModel4(),
    child: MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MultiProviderExample(),
    ),
  ),
);

  • 方式二：使用MultiProvider

    return MultiProvider(
  providers: [
    ChangeNotifierProvider<UserModel1>(create: (_) => UserModel1()),
    ChangeNotifierProvider<UserModel4>(create: (_) => UserModel4()),
    /// 添加更多
  ],
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MultiProviderExample(),
  ),
);

    第三步：使用共享数据

    import 'package:flutter/material.dart';
import 'package:flutter_provider_example/change_notifier_provider_example/user_model1.dart';
import 'package:flutter_provider_example/multi_provider_example/user_model4.dart';
import 'package:provider/provider.dart';

class MultiProviderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("MultiProviderExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Consumer<UserModel1>(
              builder: (_, userModel, child) {
                return Text(userModel.name,
                    style: TextStyle(
                        color: Colors.red,
                        fontSize: 30
                    )
                );
              },
            ),
            Consumer<UserModel4>(
              builder: (_, userModel, child) {
                return Text(userModel.age.toString(),
                    style: TextStyle(
                        color: Colors.green,
                        fontSize: 30
                    )
                );
              },
            ),
            Consumer2<UserModel1, UserModel4>(
              builder: (_, userModel1, userModel4, child) {
                return Padding(
                  padding: EdgeInsets.all(20),
                  child: ElevatedButton(
                    onPressed: (){
                      userModel1.changeName();
                      userModel4.changeName();
                    },
                    child: Text("改变值"),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

    ProxyProvider

    当我们有多个模型的时候，会有模型依赖另一个模型的情况，在这种情况下，我们可以使用ProxyProvider从另一个提供者获取值，然后将其注入到另一个提供者中。我们来看下代码演示

    第一步：创建两个模型

    下面我们创建了两个模型UserModel5和WalletModel，而WalletModel依赖与UserModel5，当调用WalletModel的changeName方法时会改变UserModel5里面的name，当然我们在实际开发的过程中并不是这么简单，这里只是演示模型依赖时如果使用ProxyProvider

    import 'package:flutter/material.dart';

class UserModel5 with ChangeNotifier {

  String name = "keo";

  void changeName({required String newName}) {
    name = newName;
    notifyListeners();
  }
}


class WalletModel {

  UserModel5? userModel5;

  WalletModel({this.userModel5});

  void changeName() {
    userModel5?.changeName(newName: "JIMI");
  }
}

    第二步：应用程序入口设置

    return MultiProvider(
  providers: [
    ChangeNotifierProvider<UserModel5>(create: (_) => UserModel5()),
    ProxyProvider<UserModel5, WalletModel>(
      update: (_, userModel5, walletModel) => WalletModel(userModel5: userModel5),
    )
  ],
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    home: ProxyProviderExample(),
  ),
);

    第三步：使用共享数据

    import 'package:flutter/material.dart';
import 'package:flutter_provider_example/proxy_provider_example/user_model5.dart';
import 'package:flutter_provider_example/proxy_provider_example/wallet_model.dart';
import 'package:provider/provider.dart';

class ProxyProviderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ProxyProviderExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Consumer<UserModel5>(
              builder: (_, userModel, child) {
                return Text(userModel.name,
                    style: TextStyle(
                        color: Colors.red,
                        fontSize: 30
                    )
                );
              },
            ),
            Consumer<UserModel5>(
              builder: (_, userModel, child) {
                return Padding(
                  padding: EdgeInsets.all(20),
                  child: ElevatedButton(
                    onPressed: (){
                      userModel.changeName(newName: "hello");
                    },
                    child: Text("改变值"),
                  ),
                );
              },
            ),
            Consumer<WalletModel>(
              builder: (_, walletModel, child) {
                return Padding(
                  padding: EdgeInsets.all(20),
                  child: ElevatedButton(
                    onPressed: (){
                      walletModel.changeName();
                    },
                    child: Text("通过代理改变值"),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

    ChangeNotifierProxyProvider

  • ChangeNotifierProxyProvider和ProxyProvider原理一样，唯一的区别在于它构建和同步ChangeNotifier的ChangeNotifierProvider，当提供者数据变化时，将会重构UI。

    下面我们给出一个例子：

  • 获取书籍列表
  • 获取收藏书籍列表
  • 点击书籍可加入或者取消收藏
  • 通过代理实时重构UI

  • 第一步：创建两个模型

    1、BookModel

    BookModel用户存储模型数据，将书籍转换成模型。

    class BookModel {
  
  static var _books = [
    Book(1, "夜的命名数"),
    Book(2, "大奉打更人"),
    Book(3, "星门"),
    Book(4, "大魏读书人"),
    Book(5, "我师兄实在太稳健了"),
    Book(6, "深空彼岸"),
  ];

  // 获取书籍长度
  int get length => _books.length;

  // 根据ID获取书籍
  Book getById(int id) => _books[id -1];

  // 根据索引获取数据
  Book getByPosition(int position) => _books[position];

  // 更多....
}

class Book {
  final int bookId;
  final String bookName;
  
  Book(this.bookId, this.bookName);
}

    2、BookManagerModel

    BookManagerModel主要用于管理书籍、收藏书籍、取消收藏等操作

    import 'package:flutter/material.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_model.dart';

class BookManagerModel with ChangeNotifier {

  // 依赖bookModel
  final BookModel _bookModel;

  // 获取数据所有的ID
  List<int>? _bookIds;

  // 构造函数
  BookManagerModel(this._bookModel, {BookManagerModel? bookManagerModel})
    : _bookIds = bookManagerModel?._bookIds ?? [];

  // 获取所有的书
  List<Book> get books => _bookIds!.map((id) => _bookModel.getById(id)).toList();

  // 根据索引获取数据
  Book getByPosition(int position) => books[position];

  // 获取书籍的长度
  int get length => _bookIds?.length ?? 0;

  // 添加书籍
  void addFaves(Book book) {
    _bookIds!.add(book.bookId);
    notifyListeners();
  }

  // 删除书籍
  void removeFaves(Book book) {
    _bookIds!.remove(book.bookId);
    notifyListeners();
  }
}

    第二步：应用程序入口设置

    return MultiProvider(
  providers: [
    Provider(create: (_) => BookModel()),
    ChangeNotifierProxyProvider<BookModel, BookManagerModel>(
      create: (_) => BookManagerModel(BookModel()),
      update: (_, bookModel, bookManagerModel) => BookManagerModel(bookModel),
    )
  ],
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    home: ChangeNotifierProxyProviderExample(),
  ),
);

    第三步：设置BottomNavigationBar

    import 'package:flutter/material.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/pages/page_a.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/pages/page_b.dart';

class ChangeNotifierProxyProviderExample extends StatefulWidget {
  @override
  _ChangeNotifierProxyProviderExampleState createState() => _ChangeNotifierProxyProviderExampleState();
}

class _ChangeNotifierProxyProviderExampleState extends State<ChangeNotifierProxyProviderExample> {


  var _selectedIndex = 0;
  var _pages = [PageA(), PageB()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.book),
            label: "书籍列表"
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            label: "收藏"
          )
        ],
      ),
    );
  }
}

    第四步：书籍列表UI构建

    import 'package:flutter/material.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_manager_model.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_model.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/widgets/book_item.dart';
import 'package:provider/provider.dart';

class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    var bookModel = Provider.of<BookModel>(context);
    
    return Scaffold(
      appBar: AppBar(
        title: Text("书籍列表"),
      ),
      body: ListView.builder(
        itemCount: bookModel.length,
        itemBuilder: (_, index) => BookItem(id: index + 1),
      ),
    );
  }
}

  • 第五步：收藏列表UI构建

    import 'package:flutter/material.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_manager_model.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/widgets/book_item.dart';
import 'package:provider/provider.dart';

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var bookManagerModel = Provider.of<BookManagerModel>(context);
    var bookCount = bookManagerModel.length;

    return Scaffold(
      appBar: AppBar(
        title: Text("收藏列表"),
      ),
      body: ListView.builder(
        itemCount: bookCount,
        itemBuilder: (_, index) => BookItem(id: bookManagerModel.getByPosition(index).bookId),
      ),
    );
  }
}

    其他辅助封装类

    import 'package:flutter/material.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_manager_model.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_model.dart';
import 'package:provider/provider.dart';

class BookButton extends StatelessWidget {
  
  final Book book;
  
  BookButton({
    Key? key,
    required this.book
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    
    var bookManagerModel = Provider.of<BookManagerModel>(context);
    
    return GestureDetector(
      onTap: bookManagerModel.books.contains(this.book)
          ?  () => bookManagerModel.removeFaves(this.book)
          :  () => bookManagerModel.addFaves(this.book),
      child: SizedBox(
        width: 100,
        height: 60,
        child: bookManagerModel.books.contains(this.book)
            ?  Icon(Icons.star, color: Colors.red,)
            :  Icon(Icons.star_border),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_model.dart';
import 'package:flutter_provider_example/change_notifier_proxy_provider_example/widgets/book_button.dart';
import 'package:provider/provider.dart';

class BookItem extends StatelessWidget {

  final int id;

  BookItem({
    Key? key,
    required this.id
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {

    var bookModel = Provider.of<BookModel>(context);
    var book = bookModel.getById(id);

    return ListTile(
      leading: CircleAvatar(
        child: Text("${book.bookId}"),
      ),
      title: Text("${book.bookName}",
        style: TextStyle(
            color: Colors.black87
        ),
      ),
      trailing: BookButton(book: book),
    );
  }
}

    总结

    Provider为我们提供了非常多的提供者，总共有八种。但我们比较常用的是ChangeNotifierProvider、MultiProvider、ChangeNotifierProxyProvider，关于其他的提供者可根据自己的实际应用场景来。

大圣归来~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter源码系列之《二》浅谈Flutter的状态管理库Provider
快乐de灰太狼的专栏
04-11 1348
Flutter开发过程中一个常见的问题就是状态管理，所谓状态管理就是管理Flutter的Widget状态，对于Flutter的状态管理，社区上已有多种成熟的方案：Provider、Redux、MobX、BLoC等。在这些方案里Google建议我们使用Provider，接下来我们就学习下Provider，看它是如何做到的状态管理，在了解其原理之前，我们先看下它的使用。
flutter状态管理---provider
处处掉坑
07-07 4229
状态管理的应用，在实际项目开发中应用场景也是不少的，截至目前，关于状态管理的插件也是有很多种了，这里就不罗列了，之前一直用的谷歌的provide，因为相对其他插件来说上手比较容易，but！万万没想到放弃维护了，和GitHub上某位大佬组队共同维护provider去了！没办法，只能再去看看provider，继续用provide的话怕以后出现问题，今天大概看了一下provider的简单用法。 看完之...
Flutter状态管理-Provider
Lebron_xia的博客
04-04 1209
在开发中经常会遇到状态管理的问题。一般原则是：如果状态跨组件共享，则该状态应该由各个组件共同的父元素来管理。目前已经有很多专门用于状态管理的包了，Provider、Redux、bloc和Scoped Model。现在我们就看一下google推荐使用的Provider。 我们要做的是针对项目中登录状态、主题、国际化进行状态管理。 1.添加依赖 像之前一样，在pubspec.yaml文件汇总引入 ...
Flutter之状态管理(一) Provider
weixin_43244083的博客
07-19 318
ChangeNotifier是用于存放数据的地方，ChangeNotifierProvider是用于将数据提供给需要的Widget的地方，而Consumer则是用于使用这些数据的地方。当数据发生变化时，ChangeNotifier会通知依赖它的Consumer重新构建，并使用新的数据来更新UI。这种方式可以实现局部重建，提高应用的性能。
Flutter Provider状态管理
Dream It Possible
11-20 2801
我们这里创建了一个类继承了，我们这里的案例是以计数器为案例，所有我们定义一个变量count，以及一个改变数值的increment方法，当我们调用increment后会对count进行+1，最后调用count++;}}以上是对Provider进行了介绍、优势、类结构和说明以及一个基本使用的例子，相对于使用来说，显然Provider使用起来更简单。但是从它的提供者、消费者这些类来看稍微复杂，后面的章节中我们来讲讲这些类。在我们上一篇文章中对Provider。
Flutter provider状态管理框架
10-24
在构建复杂的用户界面时，状态管理是必不可少的一部分，而Provider则是Flutter生态中广泛使用的一种状态管理解决方案。本文将深入探讨Provider框架，帮助你理解和掌握其核心概念和使用方法。 Provider是一种依赖...
flutter-provider:提供者的状态管理
03-18
在描述中提到的“扑朔迷离+提供者+火力基地”，这可能是指在实现`flutter-provider`时遇到的困难或混乱。状态管理的确是一个需要精心设计的领域，尤其是在大型项目中。开发者可能会遇到的问题包括但不限于状态传播的...
flutter-mvvm-provider-demo
02-03
总的来说，【flutter-mvvm-provider-demo】是一个综合性的Flutter开发示例，旨在教育开发者如何在实际项目中运用MVVM架构和Provider进行状态管理，同时提供了一个跨平台的移动应用开发实践。通过研究这个项目，...
flutter-chart-app：使用flutter＆dart和jpush的聊天应用程序
01-29
- 状态管理：可以使用Provider、Riverpod或Bloc等状态管理库来处理聊天数据的更新和界面刷新。 - 网络请求：通过http或dio库与后端API交互，发送和接收消息。 - WebSocket支持：实时通信可能需要用到WebSocket，...
电子商务完整Flutter-UI
01-31
Flutter是Google推出的一种开源跨平台移动应用开发框架，它允许开发者使用单一代码库构建高质量的iOS和Android应用。这个项目是专门为电子商务应用定制的，展示了如何用Flutter实现丰富的交互和美观的视觉效果。 ...
Flutter通过FutureBuilder实现异步请求网络数据并显示加载中Demo
04-11
Flutter通过FutureBuilder实现异步请求网络数据并显示加载中Demo，详情请看博客Flutter中的异步（Future、async、await、FutureBuilder）和 网络请求：https://yuzhiqiang.blog.csdn.net/article/details/89155870
Flutter状态管理Provider
大灰狼的小绵羊哥哥的博客
06-07 825
在之前的文章中介绍了 Google 官方仓库下的一个状态管理Provide。乍一看这俩玩意可能很容易就被认为是同一个东西，仔细一看，这不就差了一个字吗，有什么区别呢。 首先，你要知道的最大的一个区别就是，Provide 被 Provider干掉了...假如你就是用了 Provide 的，你的内心应该已经开始骂了，这不是坑爹吗 。不过幸运的是，你要从 Provide 迁移到 Provider 并不是太难。 Provider 从名字上就很容易理解，它就是用于提供数据，无论是在单个页面还是在整个app ...
Flutter 状态管理(Provider)
m0_73016265的博客
02-21 1095
Flutter 状态管理(Provider)
Flutter的状态管理之Provider
江上清风山间明月的博客
06-07 2447
Flutter Provider是Flutter中一个非常流行的状态管理库，它可以帮助开发者更加方便地管理应用程序中的状态。Provider提供了一种简单的方式来共享和管理应用程序中的数据，并且可以根据数据的变化来自动更新UI界面。Provider的核心思想是将数据作为一个全局的单例对象，然后通过InheritedWidget的上下文来共享这个对象。当数据发生变化时，Provider会通知依赖它的UI组件进行更新。
Flutter 使用 Provider 实现嵌套状态管理
Flutter 跨平台技术研究
01-12 502
使用嵌套的状态管理可以将同一模块不同业务的状态管理进一步抽离，从而避免了状态管理代码的臃肿，使得代码符合单一职责原则。
Flutter Provider状态管理的八种提供者、四种消费者（下）
Lastdoggod的博客
07-24 1353
Flutter Provider状态管理的八种提供者、四种消费者（下）
flutter 模式_如何在Flutter中使用提供者模式
cumian8165的博客
08-21 668
flutter 模式In this post we'll take a look at the provider pattern in Flutter. Some other patterns, such as BLoC Architecture, use the provider pattern internally. But the provider pattern is far easier...
Flutter:五分钟学会使用动态管理Provider
最新发布
yihanss的博客
08-15 1065
Flutter Provider是一种状态管理库，它允许通过一个中心组件来传递和共享数据。它使用了InheritedWidget，建立了一个数据传递的上下文树来实现数据共享。
flutter状态管理provider
06-28
Flutter状态管理Provider是一种用于管理Flutter应用程序状态的库。它提供了一种简单的方式来管理应用程序的状态，使得开发者可以更加轻松地构建复杂的应用程序。使用Provider，开发者可以轻松地将状态从一个小部件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值