Valuenotifier and valuelistenablebuilder in fluent

Without using  setState  or  StatefulWidget  Update the status of the widget

Usually , stay Flutter in , To dynamically update the screen  UI, You can use  setState.setState  Called in the state class , So you need a  StatefulWidget  To call  setState, because  StatelessWidgets  No state classes . however , Use  ValueNotifier  and  ValueListenableBuilder, You can even go to  StatelessWidgets  To dynamically update the screen  UI.

About  setState

StatefulWidget  It is immutable in itself （ Can't modify ）, So we use

State Object

To modify the  UI.

We tell the state object to use a named  

setState() To update our screen  UI

.

You can be here

Read more about it .

Whenever you want to change State

The internal state of the object , Please pass to  setState  Function of the .

setState(() { _myState = newValue; });


Its function is to call for its state  build()  Method , But only

stay

It implements what you did in  {}  After telling it what to do . Will take effect .

however , call  setState  Will rebuild the whole  UI, No matter how small the change is . For example, take a look at this application ：

setState  demonstration

import 'dart:developer';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return const MaterialApp(
 title: 'Demo',
 home: TestScreen(),
 );
 }
}

class TestScreen extends StatefulWidget {
 const TestScreen({Key? key}) : super(key: key);

 @override
 _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
 int counter = 0;
 int buildCount = 0;

 @override
 Widget build(BuildContext context) {
 log('-----build called------');
 buildCount++;
 return Scaffold(
 appBar: AppBar(
 title: Text('$buildCount'),
 centerTitle: true,
 ),
 body: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 const Text(
 'Build method called ...',
 style: TextStyle(fontSize: 24.0, color: Colors.grey),
 ),
 const SizedBox(
 height: 5.0,
 ),
 Text(
 '$buildCount times',
 style: const TextStyle(fontSize: 20.0, color: Colors.black),
 ),
 const SizedBox(
 height: 20.0,
 ),
 const Text(
 'Counter',
 style: TextStyle(fontSize: 24.0, color: Colors.grey),
 ),
 const SizedBox(
 height: 5.0,
 ),
 Text(
 '$counter times',
 style: const TextStyle(fontSize: 20.0, color: Colors.black),
 ),
 const SizedBox(
 height: 50.0,
 ),
 ElevatedButton(
 onPressed: () => setState(() {
 buildCount = 0;
 counter = 0;
 }),
 child: const Text('Reset'),
 ),
 ],
 ),
 ),
 floatingActionButton: FloatingActionButton(
 onPressed: () => setState(() {
 counter++;
 }),
 child: const Icon(Icons.add),
 ),
 );
 }
}


After executing the above code , You will see when you press  FAB  when , Every time I call  build  Method . Although only one text widget needs to be updated , But the whole  UI  Are rebuilding unnecessarily . This is what I personally prefer in these situations  ValueNotifier  Why . Use  ValueNotifier, Unnecessary reconstruction can be avoided , Only the status of the widget that needs to be updated is updated .

Value notifier

ValueNotifier  It's a special type of class , It expands  ChangeNotifer.

ValueNotifier  You can save a single value .  The value itself can be of any type .  It can be  int、String、bool  Or your own data type .

Use  

ValueNotifier

Can improve  Flutter  Application performance , Because it can help reduce the number of reconstructions of widgets . And

setState

The reconstruction   The entire widget tree approach is compared to

StatefulWidget

, 

ValueNotitier

The performance is much better .

Only subscription  ValueNotifier  The widget will be replaced with a value that is not equal to by the equality operator  ==  Receive notification when evaluating the old value of , This class notifies its listeners , And only rebuild the state of the widget ..

ValueNotifier  The statement is as follows

ValueNotifier< Your data type > variable_name = ValueNotifier(initial_value);


for example ：

ValueNotifier<int> counter = ValueNotifier(0);


This  ValueNotifier  Issue an initial setting of  0  The integer value .

But that's not enough , up to now , We just declared a variable , To actually update when this particular value changes  UI, We need to use

ValueListenableBuilder

 

ValueListenableBuilder

ValueListenableBuilder  And  ValueNotifier  Very well coordinated . You can also use it with other values that change over time . It listens  ValueNotifier  The value of the emission , And rebuild when the new value is issued .

ValueListenableBuilder  The constructor for is shown below

const ValueListenableBuilder({
 required this.valueListenable,
 required this.builder,
 this.child,
})


valueListenable  You pass  ValueNotifier  The place of ,

builder  Is responsible for building on  ValueNotifier  The function passed to its widget when the value in changes .  This is where you pass the widget you want to change when the value changes .

child  Parameters are where you pass any widget tree that doesn't change according to the value .  No matter what the value changes , Will not rebuild this widget tree .  Using this pre built child is completely optional , But in some cases it can significantly improve performance , So it's a good practice .

Now? , Take us  ValueNotifier  And  ValueListenableBuilder  Combine .  Look at this code snippet .

import 'dart:developer';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return const MaterialApp(
 title: 'Demo',
 home: TestScreen(),
 );
 }
}

class TestScreen extends StatefulWidget {
 const TestScreen({Key? key}) : super(key: key);

 @override
 _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
 ValueNotifier<int> counter = ValueNotifier(0);
 int buildCount = 0;

 @override
 void dispose() {
 counter.dispose();
 super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 log('-----build called------');
 buildCount++;
 return Scaffold(
 appBar: AppBar(
 title: Text('$buildCount'),
 centerTitle: true,
 ),
 body: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 const Text(
 'Build method called ...',
 style: TextStyle(fontSize: 24.0, color: Colors.grey),
 ),
 const SizedBox(
 height: 5.0,
 ),
 Text(
 '$buildCount times',
 style: const TextStyle(fontSize: 20.0, color: Colors.black),
 ),
 const SizedBox(
 height: 20.0,
 ),
 const Text(
 'Counter',
 style: TextStyle(fontSize: 24.0, color: Colors.grey),
 ),
 const SizedBox(
 height: 5.0,
 ),
 Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 ValueListenableBuilder<int>(
 valueListenable: counter,
 builder: (context, value, child) => Text(
 '${counter.value} times',
 style: const TextStyle(fontSize: 20.0, color: Colors.black),
 ),
 ),
 const SizedBox(
 width: 10.0,
 ),
 const Icon(
 Icons.animation_rounded,
 color: Colors.black,
 ),
 ],
 ),
 const SizedBox(
 height: 50.0,
 ),
 ElevatedButton(
 onPressed: () {
 buildCount = 0;
 counter.value = 0;
 },
 child: const Text('Reset'),
 ),
 ],
 ),
 ),
 floatingActionButton: FloatingActionButton(
 onPressed: () {
 counter.value++;
 },
 child: const Icon(Icons.add),
 ),
 );
 }
}


This code snippet is just a refactoring of the previous code snippet .  ad locum , You can see that there are no calls anywhere  setState.  It only needs  StatefulWidget  Because we need to deal with counters  ValueNotifer.

In the code snippet above ：

ValueNotifier<int> counter = ValueNotifier(0);


This is our statement  ValueNotifier  Object and use default values  0  Where it is initialized .

@override 
void dispose() { 
 super.dispose(); 
 counter.dispose(); 
}


Please remember in  statefulwidget  Of  dispose  Method  ValueNotifier  To avoid any memory leaks .

ValueListenableBuilder<int>( 
 valueListenable : counter, 
 builder : ( context , value , child ) => Text( 
 '${ counter . value } times', 
 style : const TextStyle( fontSize : 20.0, color : Colors.black), 
 ), 
),


ad locum , You can go to  ValueListenableBuilder  Of  builder  Method provides widgets to update when the state changes , And provide the counter variable as  valueListenable: .  This tells  ValueListenableBuilder  Listens to a counter variable and updates it whenever the value of that counter variable changes  Text  The widget .

Use  ValueNotifier  and  ValueListenableBuilder  after , You can see  build  Method is called only once , That is, initially build  UI  when .

You can now use these widgets and explore different ways to use them to improve application performance , because  ValueListenableBuilder  It can be applied to almost any widget . （ Even use  PrefferedSize  Widget to build  AppBars）.

（ Even use

PrefferedSize

Widget to build  AppBars）.