Technology Sharing

Several ways to implement partial refresh in Flutter

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Table of contents

Preface

1. The importance of partial refresh

1. Concept

2. Importance

2. Several ways to implement partial refresh

1. Use the setState method for partial refresh

2. Use StatefulWidget and InheritedWidget to partially refresh the UI

3.ValueNotifier和ValueListenableBuilder

4.StreamBuilder

5.Provider

6.GetX

7. Use GlobalKey

Preface

In Flutter, state management refers to how to manage and update the data status in the application, and update the UI according to the changes in the status. Effective state management can help developers create more efficient and maintainable applications.

SetState is the most basic state management method in Flutter. When the state changes, it notifies the framework to rebuild the UI. Of course, we know that when we call the setState method, the page will be redrawn. When the page layout is more complex, sometimes we only need to update a single UI. At this time, if the setState method is used, it will consume a lot of performance to redraw the current page UI.

So what methods are there in Flutter to partially refresh the UI? This blog lists several ways to implement partial refresh in Flutter.

1. The importance of partial refresh

1. Concept

Partial refresh means refreshing only a portion of the interface instead of the entire page. This can improve performance and user experience.

2. Importance

  1. Avoid unnecessary redrawing and improve performance
  2. Provide a smoother user experience
  3. Reduce resource consumption

2. Several ways to implement partial refresh

1. Use the setState method for partial refresh

setState is the most commonly used state management method in Flutter, which is used to notify the framework of state changes, resulting in interface reconstruction.

When we create a Flutter project, the example of the timer generated by the system by default is an example of setState partial refresh.

  1. import 'package:flutter/material.dart';
  2.  
  3. class SetStateMainPage extends StatefulWidget {
  4.   final String title;
  5.   const SetStateMainPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<SetStateMainPage> createState() => _SetStateMainPageMainPageState();
  9. }
  10.  
  11. class _SetStateMainPageMainPageState extends State<SetStateMainPage> {
  12.   int _count = 0;
  13.  
  14.   @override
  15.   Widget build(BuildContext context) {
  16.     return Scaffold(
  17.       appBar: AppBar(
  18.         title: Text(widget.title),
  19.       ),
  20.       body: Center(
  21.         child: Text(
  22.           '您点击了$_count次',
  23.           style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  24.         ),
  25.       ),
  26.       floatingActionButton: FloatingActionButton(
  27.           child: const Icon(Icons.add),
  28.           onPressed: () {
  29.             setState(() {
  30.               _count++;
  31.             });
  32.           },
  33.       )
  34.     );
  35.   }
  36. }

Figure 1. setState partial refresh

When the page is relatively simple, you can directly use the setState method to partially refresh the UI.

Usage scenarios: simple state changes, such as button click counts, switch states, etc.

Precautions:

  1. Frequent calls to setState may cause performance issues
  2. Avoid calling setState in the build method

2. Use StatefulWidget and InheritedWidget to partially refresh the UI

        StatefulWidget is a component with state,InheritedWidget Used to share data across a component tree.

When we need to share data, we can consider StatefulWidget and InheritedWidget to partially refresh the UI.

The complete code is as follows:

Figure 2. Refreshing the UI by sharing data

  1. import 'package:flutter/material.dart';
  2.  
  3. class MyInheritedWidget extends InheritedWidget {
  4.   final int counter;
  5.   const MyInheritedWidget({
  6.     super.key,
  7.     required this.counter,
  8.     required super.child,
  9.   });
  10.   @override
  11.   bool updateShouldNotify(covariant InheritedWidget oldWidget) {
  12.     return true;
  13.   }
  14.   static MyInheritedWidget? of(BuildContext context) {
  15.     return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  16.   }
  17. }
  18.  
  19. class InheritedWidgetPage extends StatefulWidget {
  20.   final String title;
  21.   const InheritedWidgetPage({super.key, required this.title});
  22.  
  23.   @override
  24.   State<InheritedWidgetPage> createState() => _InheritedWidgetPageState();
  25. }
  26.  
  27. class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
  28.   int counter = 0;
  29.   void _incrementCounter() {
  30.     setState(() {
  31.       counter++;
  32.     });
  33.   }
  34.  
  35.   @override
  36.   Widget build(BuildContext context) {
  37.     return MyInheritedWidget(
  38.       counter: counter,
  39.       child: Scaffold(
  40.         appBar: AppBar(
  41.           title: Text(widget.title),
  42.         ),
  43.         body: Center(child: Column(
  44.           children: [
  45.             const Divider(),
  46.             const CounterDisplay(),
  47.             const SizedBox(height: 20),
  48.             ElevatedButton(
  49.               onPressed: _incrementCounter,
  50.               child: const Text('add'),
  51.             ),
  52.           ],
  53.         ),),
  54.       ),
  55.     );
  56.   }
  57. }
  58.  
  59. class CounterDisplay extends StatelessWidget {
  60.   const CounterDisplay({super.key});
  61.   @override
  62.   Widget build(BuildContext context) {
  63.     final inheritedWidget = MyInheritedWidget.of(context);
  64.     return Text('点击次数: ${inheritedWidget?.counter}');
  65.   }
  66. }

This method is mainly used in the following scenarios: when sharing states in the component tree, such as themes, language settings, etc.

The advantage is that data sharing is convenient, code introduction

The disadvantage is that it is complicated to use and performance may be affected

3.ValueNotifier和ValueListenableBuilder

        ValueNotifier Is a simple state management tool.ValueListenableBuilder For monitoringValueNotifier The change.

The usage is also very simple:

1. Instantiate ValueNotifier

2. The Widget object to be monitored is wrapped with ValueListenableBuilder

3. Methods for changing event-triggered data

This method is very simple and easy compared with the previous methods, and the performance is also very high

Disadvantages: Can only handle simple state changes

The complete code is as follows:

  1. import 'package:flutter/material.dart';
  2.  
  3. class ValueNotifierPage extends StatefulWidget {
  4.   final String title;
  5.   const ValueNotifierPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<ValueNotifierPage> createState() => _ValueNotifierPageState();
  9. }
  10.  
  11. class _ValueNotifierPageState extends State<ValueNotifierPage> {
  12.  
  13.   final ValueNotifier<int> _counter = ValueNotifier<int>(0);
  14.  
  15.   @override
  16.   Widget build(BuildContext context) {
  17.     return Scaffold(
  18.         appBar: AppBar(
  19.           title: Text(widget.title),
  20.         ),
  21.         body: Center(
  22.           child: ValueListenableBuilder<int>(
  23.             valueListenable: _counter,
  24.             builder: (context, value, child) {
  25.               return Text(
  26.                 '您点击了$value次',
  27.                 style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  28.               );
  29.             },
  30.           )
  31.         ),
  32.         floatingActionButton: FloatingActionButton(
  33.           child: const Icon(Icons.add),
  34.           onPressed: () {
  35.             _counter.value ++;
  36.           },
  37.         )
  38.     );
  39.   }
  40. }

4.StreamBuilder

Stream is an object used to transmit asynchronous events. Events can be sent through StreamController. Where the UI needs to be refreshed, an event can be sent to the Stream, and then the StreamBuilder can be used to listen to the Stream. When a new event is received, the StreamBuilder will automatically rebuild the UI. This method is suitable for situations where multiple asynchronous events need to be listened.

When we need to process asynchronous data streams, such as network requests, real-time data, etc., we can consider using StreamBuilder. For example, in the following example, we wrote an asynchronous method that simulates a network request. When the network request does not return the correct result, we can load the progress bar.

The advantage of this method is that it can control asynchronous requests more accurately, such as the status of network requests, etc. However, it is more complex and may require more code.

The complete code is as follows:

  1. import 'dart:async';
  2. import 'package:flutter/material.dart';
  3.  
  4. class StreamBuilderRefreshUIPage extends StatefulWidget {
  5.   final String title;
  6.   const StreamBuilderRefreshUIPage({super.key, required this.title});
  7.  
  8.   @override
  9.   State<StreamBuilderRefreshUIPage> createState() =>
  10.       _StreamBuilderRefreshUIPageState();
  11. }
  12.  
  13. class _StreamBuilderRefreshUIPageState extends State<StreamBuilderRefreshUIPage> {
  14.   late Future<String> _data;
  15.  
  16.   Future<String> fetchData() async {
  17.     // 模拟网络请求延迟
  18.     await Future.delayed(const Duration(seconds: 2));
  19.     // 返回模拟数据
  20.     return 'Hello, Flutter!';
  21.   }
  22.  
  23.   @override
  24.   void initState() {
  25.     // TODO: implement initState
  26.     super.initState();
  27.     _data = fetchData();
  28.   }
  29.  
  30.   @override
  31.   Widget build(BuildContext context) {
  32.     return Scaffold(
  33.       appBar: AppBar(
  34.         title: Text(widget.title),
  35.       ),
  36.       body: Center(
  37.         child: FutureBuilder<String>(
  38.           future: _data,
  39.           builder: (context, snapshot) {
  40.             if (snapshot.connectionState == ConnectionState.waiting) {
  41.               return const CircularProgressIndicator();
  42.             } else if (snapshot.hasError) {
  43.               return Text('Error: ${snapshot.error}');
  44.             } else {
  45.               return Text('Data: ${snapshot.data}');
  46.             }
  47.           },
  48.         ),
  49.       ),
  50.       floatingActionButton: FloatingActionButton(
  51.         onPressed: fetchData,
  52.         tooltip: 'Increment',
  53.         child: const Icon(Icons.add),
  54.       ),
  55.     );
  56.   }
  57. }

5.Provider

       Provider It is the state management solution recommended by Flutter.Consumer Used to read and monitor status.

Let's take the timer as an example.

1. First we import Provider.

provider: ^6.1.2

2. Customize the ChangeNotifier class.

ChangeNotifier is a simple class in the Flutter SDK. It is used to send notifications to listeners. In other words, if it is defined as a ChangeNotifier, you can subscribe to its state changes. (This is similar to the observer pattern that everyone is familiar with).

In the code we want to implement, there are two variables _counter1 and _counter2. The code is defined as follows:

  1. class CounterModel extends ChangeNotifier {
  2.   int _counter1 = 0;
  3.   int _counter2 = 0;
  4.   void addCounter1(){
  5.     debugPrint('counter:$_counter1');
  6.     _counter1 += 1;
  7.     notifyListeners();
  8.   }
  9.   void addCounter2(){
  10.     debugPrint('counter:$_counter2');
  11.     _counter2 += 1;
  12.     notifyListeners();
  13.   }
  14. }

3. Use Customer to wrap the Widget we want to refresh

  1.             Consumer<CounterModel>(
  2.               builder: (context, counterModel, child) {
  3.                 return Row(
  4.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  5.                   children: [
  6.                     Text('计数器1个数: ${counterModel._counter1}'),
  7.                     ElevatedButton(onPressed: (){
  8.                       counterModel.addCounter1();
  9.                     }, child: const Icon(Icons.add),),
  10.                   ],
  11.                 );
  12.               },
  13.             ),

4. The complete code is as follows:

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  3.  
  4. class ProviderRefreshPage extends StatefulWidget {
  5.   final String title;
  6.   const ProviderRefreshPage({super.key, required this.title});
  7.  
  8.   @override
  9.   State<ProviderRefreshPage> createState() => _ProviderRefreshPageState();
  10. }
  11.  
  12. class CounterModel extends ChangeNotifier {
  13.   int _counter1 = 0;
  14.   int _counter2 = 0;
  15.   void addCounter1(){
  16.     debugPrint('counter:$_counter1');
  17.     _counter1 += 1;
  18.     notifyListeners();
  19.   }
  20.   void addCounter2(){
  21.     debugPrint('counter:$_counter2');
  22.     _counter2 += 1;
  23.     notifyListeners();
  24.   }
  25. }
  26.  
  27. class _ProviderRefreshPageState extends State<ProviderRefreshPage> {
  28.  
  29.   @override
  30.   Widget build(BuildContext context) {
  31.     return Scaffold(
  32.       appBar: AppBar(
  33.         title: Text(widget.title),
  34.       ),
  35.       body: Center(
  36.         child: Column(
  37.           mainAxisAlignment: MainAxisAlignment.start,
  38.           children: <Widget>[
  39.             const SizedBox(height: 10,), // 添加一些间距
  40.             const Divider(),
  41.             const Text('计数器实例',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
  42.             Consumer<CounterModel>(
  43.               builder: (context, counterModel, child) {
  44.                 return Row(
  45.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  46.                   children: [
  47.                     Text('计数器1个数: ${counterModel._counter1}'),
  48.                     ElevatedButton(onPressed: (){
  49.                       counterModel.addCounter1();
  50.                     }, child: const Icon(Icons.add),),
  51.                   ],
  52.                 );
  53.               },
  54.             ),
  55.  
  56.             Consumer<CounterModel>(
  57.               builder: (context, counterModel, child) {
  58.                 return Row(
  59.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  60.                   children: [
  61.                     Text('计数器1个数: ${counterModel._counter2}'),
  62.                     ElevatedButton(onPressed: (){
  63.                       counterModel.addCounter2();
  64.                     }, child: const Icon(Icons.add),),
  65.                   ],
  66.                 );
  67.               },
  68.             ),
  69.             const Divider(height: 20,),
  70.           ],
  71.         ),
  72.       ),
  73.     );
  74.   }
  75. }

6.GetX

We can also use GetX to implement partial refresh of the UI.

First install GetX:

get: ^4.6.6

Then we encapsulate the variables in GetxController.

  1. class CounterManagerController extends GetxController {
  2.   final counter1 = 0.obs;
  3.   final counter2 = 0.obs;
  4.   void incrementCount1() {
  5.     counter1.value++;
  6.   }
  7.   void incrementCount2() {
  8.     counter2.value++;
  9.   }
  10. }

Then use Obx to wrap the Widget that needs to display logic.

Obx(()=&gt; Text('Counter 1: ${controller.counter2.value}'))

The complete code is as follows:

  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  3.  
  4.  
  5. class CounterManagerController extends GetxController {
  6.   final counter1 = 0.obs;
  7.   final counter2 = 0.obs;
  8.   void incrementCount1() {
  9.     counter1.value++;
  10.   }
  11.   void incrementCount2() {
  12.     counter2.value++;
  13.   }
  14. }
  15.  
  16. class GetXRefreshUIPage extends StatelessWidget {
  17.   final String title;
  18.   const GetXRefreshUIPage({super.key, required this.title});
  19.  
  20.   @override
  21.   Widget build(BuildContext context) {
  22.     final CounterManagerController controller = Get.put(CounterManagerController());
  23.     return Scaffold(
  24.       appBar: AppBar(
  25.         title: Text(title),
  26.       ),
  27.       body: Center(
  28.         child: Column(
  29.           mainAxisAlignment: MainAxisAlignment.start,
  30.           children: <Widget>[
  31.             const SizedBox(
  32.               height: 10,
  33.             ), // 添加一些间距
  34.             const Divider(),
  35.             const Text(
  36.               '计数器实例',
  37.               style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  38.             ),
  39.             Row(
  40.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  41.               children: [
  42.                 Obx(()=> Text('计数器1个数: ${controller.counter1.value}')),
  43.                 ElevatedButton(
  44.                   onPressed: () {
  45.                     controller.incrementCount1();
  46.                   },
  47.                   child: const Icon(Icons.add),
  48.                 ),
  49.               ],
  50.             ),
  51.             Row(
  52.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  53.               children: [
  54.                 Obx(()=> Text('计数器1个数: ${controller.counter2.value}')),
  55.                 ElevatedButton(
  56.                   onPressed: () {
  57.                     controller.incrementCount2();
  58.                   },
  59.                   child: const Icon(Icons.add),
  60.                 ),
  61.               ],
  62.             ),
  63.             const Divider(
  64.               height: 20,
  65.             ),
  66.           ],
  67.         ),
  68.       ),
  69.     );
  70.   }
  71. }

Of course, there are several other ways to implement partial refresh in GetX, you can take a look at its documentation. Here is just one of the implementation ideas.

7. Use GlobalKey

The above three implementation methods are all implemented through the framework. If you don’t want to import this framework, we can use GlobalKey to implement the partial refresh function of the UI.

A GlobalKey is a key that is unique throughout the application. It can uniquely identify an element and provide access to the elements associated with it. For example,BuildContext.forStatefulWidgets, GlobalKey also providesStateAccess.

In our timer demo, if we partially refresh the UI through GlobalKey, we first take out the Widget to be partially refreshed and encapsulate it into a separate component.

The complete code is as follows. We encapsulate the Widget to be partially refreshed and provide an interface for refreshing internal data, onPressed.

  1. class CounterText extends StatefulWidget {
  2.   const CounterText(Key key) : super(key: key);
  3.   @override
  4.   State<StatefulWidget> createState() {
  5.     return CounterTextState();
  6.   }
  7. }
  8.  
  9. class CounterTextState extends State<CounterText> {
  10.   String _text="0";
  11.  
  12.   @override
  13.   Widget build(BuildContext context) {
  14.     return Center(
  15.       child: Text(_text,style: const TextStyle(fontSize: 20),),
  16.     );
  17.   }
  18.   void onPressed(int count) {
  19.     setState(() {
  20.       _text = count.toString();
  21.     });
  22.   }
  23. }

Then instantiate GlobaKey in our main interface:

  1.   int _count   = 0;
  2.   int _count2  = 0;
  3.   GlobalKey<CounterTextState> textKey = GlobalKey();
  4.   GlobalKey<CounterTextState> textKey2 = GlobalKey();

In the event that the UI needs to be refreshed, call the interface provided in the previous step through GlobalKey to refresh it.

The complete code is as follows:

  1. import 'package:flutter/material.dart';
  2.  
  3. class GlobalKeyRefreshPage extends StatefulWidget {
  4.   final String title;
  5.   const GlobalKeyRefreshPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<GlobalKeyRefreshPage> createState() => _GlobalKeyRefreshPageState();
  9. }
  10.  
  11. class _GlobalKeyRefreshPageState extends State<GlobalKeyRefreshPage> {
  12.   int _count   = 0;
  13.   int _count2  = 0;
  14. //包裹你定义的需要更新的weight
  15.   GlobalKey<CounterTextState> textKey = GlobalKey();
  16.   GlobalKey<CounterTextState> textKey2 = GlobalKey();
  17.  
  18.   @override
  19.   Widget build(BuildContext context) {
  20.     return Scaffold(
  21.       appBar: AppBar(
  22.         title:  Text(widget.title),
  23.       ),
  24.       body: Center(
  25.         child: Column(
  26.           mainAxisAlignment: MainAxisAlignment.start,
  27.           children: <Widget>[
  28.             const SizedBox(
  29.               height: 10,
  30.             ), // 添加一些间距
  31.             const Divider(),
  32.             const Text(
  33.               '计数器实例',
  34.               style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  35.             ),
  36.             Row(
  37.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  38.               children: [
  39.                 CounterText(textKey),
  40.                 ElevatedButton(
  41.                   onPressed: () {
  42.                     _count++;
  43.                     textKey.currentState?.onPressed(_count);
  44.                   },
  45.                   child: const Icon(Icons.add),
  46.                 ),
  47.               ],
  48.             ),
  49.             Row(
  50.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  51.               children: [
  52.                 CounterText(textKey2),
  53.                 ElevatedButton(
  54.                   onPressed: () {
  55.                     _count2++;
  56.                     textKey2.currentState?.onPressed(_count2);
  57.                   },
  58.                   child: const Icon(Icons.add),
  59.                 ),
  60.               ],
  61.             ),
  62.             const Divider(
  63.               height: 20,
  64.             ),
  65.           ],
  66.         ),
  67.       ),
  68.     );
  69.   }
  70. }
  71.  
  72.  
  73. class CounterText extends StatefulWidget {
  74.   const CounterText(Key key) : super(key: key);
  75.   @override
  76.   State<StatefulWidget> createState() {
  77.     return CounterTextState();
  78.   }
  79. }
  80.  
  81. class CounterTextState extends State<CounterText> {
  82.   String _text="0";
  83.  
  84.   @override
  85.   Widget build(BuildContext context) {
  86.     return Center(
  87.       child: Text(_text,style: const TextStyle(fontSize: 20),),
  88.     );
  89.   }
  90.   void onPressed(int count) {
  91.     setState(() {
  92.       _text = count.toString();
  93.     });
  94.   }
  95. }

Personal profile

I have devoted myself to the research of technology for more than 30 years. I am proficient in various languages ​​such as Java, Linux, JavaScript, PHP, CSS, etc. I have made many contributions in the field of open source. I have established a developer documentation site to share some problems in technology development for everyone to read.

my contact information

Mail