Fluent status management provider

Time:2022-5-6

There are two types of Fletter # state management

1. Stateless: statelesswidget means that their properties are immutable

2. Stateful: statefulwidget’s state may change during the widget’s life cycle

When our project is simple, we may not need state management, but with the increase of functions, the application will have dozens or even hundreds of application states. When we want to share state (data) between multiple pages (components / widgets) or between multiple sub components in a page (components / widgets), the application state will become difficult to maintain, Flutter actually provided us with a state management method from the beginning, that is statefulwidget, but it was soon found that it was the root cause of the above problems, so we used provider to manage the state.

effect:

The top-level widget is used to store data and does not operate data. The stored data object must be extended changenotifier;

Final effect:

When you click add value in the second page, the value returned to the first page will also change

Provider is an open source library of state management in fluent. How to use it

1. In pubspec Add dependency of provider in yaml (configuration file)

2. Create data model

import ‘package:flutter/cupertino.dart’;

class Counter with ChangeNotifier {

///Store data

  int_count =0;

///Provide externally accessible data

  intget count =>_count;

///Provides methods for changing data

  void increment() {

_count++;

///Notify all listeners to refresh

    notifyListeners();

  }

}

3. Create top-level shared data. Here, multiprovider can be used to create multiple top-level shared data. It should be that there may be multiple data models in the actual project

In main Created in dart entry function

@override

Widget build(BuildContext context) {

///Using multiprovider, you can create multiple top-level shared data

  return MultiProvider(

   providers: [ChangeNotifierProvider(create: (_) =>Counter())],

    child:MaterialApp(

Title: ‘flight’,

      home:isSplash ?LoginPage() :SplashPage(),

    ),

  );

}

4、 To obtain the status in the sub page, we have written two classes, firstpage and {secondpage, respectively

The method to obtain top-level data is: provider of<Counter>(context). count

Call increment in the data model to refresh the data: provider of<Counter>(context,listen:false). increment();

Create first page firstpage

package:flutter/material.dart’;

import ‘package:flutter_app1/common/utils/NavigatorUtil.dart’;

import ‘package:flutter_app1/module/login/myprovider/Counter.dart’;

import ‘package:flutter_app1/module/login/myprovider/second_page.dart’;

import ‘package:provider/provider.dart’;

class FirstPage extends StatelessWidget {

const FirstPage({Key key}) :super(key: key);

  @override

  Widget build(BuildContext context) {

return Scaffold(

appBar:AppBar(

Title: text (“first page”),

      ),

      body:Column(

children: [

///Gets the count value in the counter

          Text(“${Provider.of(context).count}”),

          GestureDetector(

onTap: () {

NavigatorUtil.pushRightOrLeft(context, SecondPage());

            },

            child:Container(

width: MediaQuery.of(context).size.width,

              height:40,

              decoration:BoxDecoration(color: Colors.black26),

              child:Center(

Child: text (“click on the next page, style: TextStyle (color: colors. White)),

              ),

            ),

          )

],

      ),

    );

  }

}

Create a second interface {secondpage

import ‘package:flutter/material.dart’;

import ‘package:flutter_app1/module/login/myprovider/Counter.dart’;

import ‘package:provider/provider.dart’;

class SecondPage extends StatelessWidget {

const SecondPage({Key key}) :super(key: key);

  @override

  Widget build(BuildContext context) {

return Scaffold(

appBar:AppBar(

Title: text (“second page”),

      ),

      body:Center(

///Gets the count value in the counter

        child:Text(“${Provider.of(context).count}”),

      ),

        floatingActionButton:FloatingActionButton(

onPressed: (){

///Call increment in the data model to refresh the data

            Provider.of(context,listen:false).increment();

          },

          child:Icon(Icons.add),

        ),

    );

  }

}

Recommended Today

Modify user information changeinfo

When judging the persistence layer: Problem: there is such a problem when modifying user information. For example: the user’s email is not required. It was not empty originally. At this time, the user deletes the mailbox information and submits it. At this time, if it is not empty to judge whether it needs to be […]