Choosing the correct Flutter design pattern

Question

I have created a Flutter page which has a bunch of inputs in it. I thought this is a mess, let's refactor it and created a new stateful widget for each input.

This is great except the data needs to be in the parent widget and I am having a hard time understanding how to pass the data back from the new child widgets to the parent.

I've found some hacky way where you pass in a function and whenever there is a change you pass the data to the parent through that function.. Works but now there's multiple variables, one in the child and one in the parent.

I've read about the bloc pattern and I'm not sure whether this is what i need. I just want a singleton style object that the main widget and its children can both read and the children update when there is new input.

Would someone explain whether the bloc pattern would help me with this or if there is another design pattern that will help me with this.

** EDIT

Thanks for the great answers guys. My new problem is related to the provider pattern/library.

I have created some state classes as follows (ive replaced content to try and keep it simple)

class State1 with ChangeNotifier{

String _s;

  set s(String newS){
    _s = newS;
    notifyListeners();
  }

}

and then I use a multiprovider to pass it (create the objects in the init)

child: MultiProvider(
        providers: [
          ChangeNotifierProvider(builder: (context) => state1),
        ],
        child: Stack(
        alignment: Alignment.center,
        children: stackChildren,
      ),

Which is then accessed in the children widegets build method using

 state1Var = Provider.of<State1>(context);

And all of this works fine..

My issue is when I get to using a navigation push I can no longer access the state.

onPressed: (() {
          Navigator.push(
            contextField,
            MaterialPageRoute(builder: (context) => NewPage()),
          );
        }),

As i get this error

Could not find the correct Provider<State1> above this NewPage Widget...

I did manage to get it using this

  Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => Consumer(builder: (),child: NewPage(),)),
          );

But when I popped the widget using navigator.pop() the state couldnt be used as it said it had been disposed.

Sorry if i've made this complicated. I had to remove a lot of code.

Geomorphic

Welcome to the world of state management! If you're fairly new to this, BLoC might be too complicated unless you have a very good understanding of streams. Have a look at this: flutter.dev/docs/development/data-and-backend/state-mgmt/simple – Principalities

Hi, Thanks for your reply. I have managed to refactor a lot of the code into multiple files using the provider library... This was working great until I used navigator push and tried to use one of the states inside the widget that was pushed on. I get this error, Error: Could not find the correct Provider<[THE STATE TYPE]> above this [THE WIDGET I am PUSHING ON] Widget. Could you help me? – Geomorphic

Answer 1

You need to use stateManagement.

It exist BLoC but you can also use Provider with no problem and it will solve your problem.

this is something wrote by Diego Velasquez about Widget Communication and could solve your problems.

But if you need more info i will let you something from Karthik Ponnam about State Management with Provider.

This will help you to understand a little more what state management is from the Flutter Docs

Aldric

Hi, Thanks for your reply. I have managed to refactor a lot of the code into multiple files using the provider library... This was working great until I used navigator push and tried to use one of the states inside the widget that was pushed on. I get this error, Error: Could not find the correct Provider<[THE STATE TYPE]> above this [THE WIDGET I am PUSHING ON] Widget. Could you help me? – Geomorphic

i need to see how did you manage your provider, please update the question qith the newest error so me or someone else can help – Aldric

Thanks for replying. I've updated my question. Ive tried to make it simple. If any parts are confusing please ask me to edit and ill try to improve it. – Geomorphic

Sorry for asking but i've looked all over the internet and cant find a solution. Please could you help me some more. @Argel Bejarano – Geomorphic

Answer 2

As you know a StatefulWidget is used whenever we have data that is going to change over time and when it does we want the UI to update. A StatefulWidget can update data and what not and screen re-renders, but the problem with it is that it does not scale up to larger applications that have multiple different screens.

With a StatefulWidget, it's challenging to pass data from one screen to another inside an application. StatefulWidget is more of a beginner way to show how to pass state in a flutter application.

For production level applications, there is the BLOC pattern which is another way of managing state inside a flutter application. There are other ways, but the BLOC pattern is highly recommended by the Flutter team. They believe it's the best way of doing things. To be clear, no one has the expertise to tell you which way to do it, but again, the Flutter team has publicly endorsed the BLOC pattern and for me that would mean good support if you get into trouble because it is challenging to understand.

Ordinance

Please help to show me, Where I can see that the flutter team has publicly endorsed the BLOC? – Stoll

@AriefWijaya here flutter documentation about provider package for state management. flutter.dev/docs/development/data-and-backend/state-mgmt/simple – Godavari

Answer 3

I think you talk about state management first read flutter documentation to know more about state management concept in flutter then choose what you think is suitable for your project such bloc or riverpod. those packages are the best for state management

Doubler