How to not lose a data from the list when going from one screen to another screen in flutter?

user_11418520 0
Viewed 642

I have a class ViewTotalItemProvider which extends the ChangeNotifier. Inside the class, there is a list like this.

class ViewTotalItemProvider extends ChangeNotifier{
List<CartPlantLists> cartPlantList3 = [];
}

Additionally, there are 3 screens including class like, PlantFeatureScreen1, ParticularPlant2, CartDetais3. All are stateful widget and I am adding some items in second screen i.e. ParticularPlant2 class.

When I try to show the items from list in the second screen and the third screen it works.
But the value is not updated in the firstScreen i.e. PlantFeatureScreen1. However, when I reload the app, it shows the updated value.
why is this happening? How can I solve it?

Code
ViewTotalItemProvider

List<CartPlantLists> cartPlantList3 = [];

class ViewTotalItemProvider extends ChangeNotifier{

  addQuantity(index){
     cartPlantList3[index].qu++;
    notifyListeners();
  }

  subtrachQuantity(index){
    cartPlantList3[index].qu--;
    notifyListeners();

  }
}

firstScreen PlantFeatureScreen1 (Here I want to update the value in the very last widget)

class PlantFeatureScreen1 extends StatefulWidget {
  @override
  _PlantFeatureScreen1State createState() => _PlantFeatureScreen1State();
}

class _PlantFeatureScreen1State extends State<PlantFeatureScreen1> {


  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ViewTotalItemProvider>(
      create: (context) => ViewTotalItemProvider(),
      child:Builder(builder: (context) {
        return           Column(
        children: <Widget>[
          TopAppBar(),
          Expanded(
            flex: 1,
            child: Align(
              alignment: Alignment(-1, 0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                child: Text(
                  "Plants",
                  style: TextStyle(fontSize: 30, fontWeight: FontWeight.w700),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: Container(
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: DefaultTabController(
                length: 5,
                child: Column(
                  children: [
                    Container(
                      height: 50,
                      width: double.infinity,
                      child: TabBar(
                        isScrollable: true,
                        tabs: ourAllLists.tabMaker(),
                      ),
                    ),
                    Container(
                      height: 317,
                      width: double.infinity,
                      decoration: BoxDecoration(color: Colors.white),
                      child: TabBarView(
                        children: ourAllLists.tabViewerMaker(context),),),
                  ],
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
            child: Container(
              alignment: Alignment.bottomRight,
              height: 120,
              width: double.infinity,
              child: Stack(
                overflow: Overflow.visible,
                children: [
                  Container(
                    height: 70,
                    width: 105,
                    decoration: BoxDecoration(
                        color: Color(0xFF96CA2D),
                        borderRadius: BorderRadiusDirectional.horizontal(
                            end: Radius.circular(32),
                            start: Radius.circular(32))),
                            child: Icon(FontAwesomeIcons.shoppingBag,color:Colors.white,size:30),
                  ),
                  Positioned(
                    // top: 0,
                    bottom: 50,
                    right: 0,
                    child: Consumer<ViewTotalItemProvider>(
                      builder: (context, value, child){
                        return Container(
                        height: 35,
                        width: 35,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(50),
                          border: Border.all(color: Color(0xFF96CA2D),width: 4)
                        ),
                        child: Center(child: Text(ourAllLists.totalquantity().toString(),style:TextStyle(fontSize: 20,color: Color(0xFF96CA2D)))),
                      );
                      }),                
                    ),
                ],
              ),
            ),
          )
        ],
      );   
      })
 );
  }
}

secondScreen ParticularPlant2

class ParticularPlant2 extends StatefulWidget {
  final indexNumber;
  ParticularPlant2({@required this.indexNumber});

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

class _ParticularPlant2State extends State<ParticularPlant2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TopAppBar(),
              Container(
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadiusDirectional.only(
                    bottomStart: Radius.circular(50),
                  ),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      ourAllLists
                          .mainListAllPlantDetailsList1[widget.indexNumber].pN,
                      style: kPlantNameStyle,
                    ),
                    Text(
                      ourAllLists
                          .mainListAllPlantDetailsList1[widget.indexNumber].ca
                          .toUpperCase(),
                      style: TextStyle(
                        fontSize: 15,
                      ),
                    ),
                    Text(
                      "\$" +
                          ourAllLists
                              .mainListAllPlantDetailsList1[widget.indexNumber]
                              .pr
                              .toString(),
                      style: kItemPrice,
                    ),
                    SizedBox(height: 100),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            Container(
                              height: 80,
                              width: 80,
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(50)),
                              child: Icon(
                                FontAwesomeIcons.flag,
                                color: Color(0xFF9DCD3C),
                              ),
                            ),
                            SizedBox(
                              height: 50,
                            ),
                            FlatButton(
                              onPressed: () {
                                final tile = cartPlantList3.firstWhere(
                                    (item) =>
                                        item.pN ==
                                        ourAllLists
                                            .mainListAllPlantDetailsList1[
                                                widget.indexNumber]
                                            .pN,
                                    orElse: () => null);
                                if (tile != null) {
                                } else {
                                  cartPlantList3.add(
                                    CartPlantLists(
                                      quantity: 1,
                                      plantName: ourAllLists
                                          .mainListAllPlantDetailsList1[
                                              widget.indexNumber]
                                          .pN,
                                      category: ourAllLists
                                          .mainListAllPlantDetailsList1[
                                              widget.indexNumber]
                                          .ca,
                                      price: ourAllLists
                                          .mainListAllPlantDetailsList1[
                                              widget.indexNumber]
                                          .pr,
                                    ),
                                  );
                                }
                                print(cartPlantList3.length);
                              },
                              child: Container(
                                height: 80,
                                width: 80,
                                decoration: BoxDecoration(
                                    color: Color(0xFF9DCD3C),
                                    borderRadius: BorderRadius.circular(50)),
                                child: Icon(FontAwesomeIcons.shoppingBag,
                                    color: Colors.white),
                              ),
                            )
                          ],
                        ),
                        Container(
                          height: 250,
                          child: Image(image: AssetImage("assets/tulip.png")),
                        )
                      ],
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
flutter state-management list
2 Answers

It seems like you are using Provider the wrong way. The best way to do this in your scenario is to wrap MaterialApp inside MyApp() in your main.dart file with MultiProvider. Try something like this: https://pub.dev/packages/provider#multiprovider You can place a ChangeNotifierProvider inside it.

return MultiProvider(
  providers: [
    ChangeNotifierProvider<ViewTotalItemProvider>(
        create: (context) => ViewTotalItemProvider()),
  ],
  child: MaterialApp(...)
);

Also, you have to place a getter and setter in your Model. Here is an example:

class ImageModel extends ChangeNotifier {
  String _base64Image;
  get base64Image => _base64Image;
  set base64Image(String base64Image) {
    _base64Image = base64Image;
    notifyListeners();
  }
}

I would also recommend using Selector instead of Consumer (Ideally, you should use Selector instead of Consumer so that the widget only rebuilds if the value its listening to changes) Here is an example based on the model above:

@override
Widget build(BuildContext context) {
 //other widgets
 Selector<ImageModel, String>(
  selector: (_, model) => model.base64Image,
  builder: (_, image, __) {
   return Text(image);
     },
   );
  }
 )
}

Here is how you can get and set it using a RaisedButton:

class _PlantFeatureScreen1State extends State<PlantFeatureScreen1> {
  final itemModel;
  List<CartPlantLists> myList=[];
  @override
  Widget build(BuildContext context) {
    itemModel = Provider.of<ViewTotalItemProvider>(context,listen:false);
    print(itemModel.yourVariable); //getting the value
    return Container(
             child: RaisedButton(
               child:Text("Set Item");
               onPressed:(){
               itemModel.yourVariable=myList; //setting the value
               },
             ),
    );
  }
 }

Hope this helps! Good Luck!

user_95227320

Step 1: add the dependency for the provider pattern in the pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.1.2

Step 2: create provider in seperate file :

class ViewTotalItemProvider with ChangeNotifier{
List<CartPlantLists> _cartPlantList1 = [];
get cartPlantList1 => _cartPlantList1 ;

  set cartPlantList1 (List<CartPlantLists> selected){
   _cartPlantList1 = selected;
     notifyListeners();
  }
}

step 3: Use MultiProvider to wrap the MaterialApp widget in main.dart.


void main() => runApp(
   MultiProvider (providers: [
      ChangeNotifierProvider<ViewTotalItemProvider>.value(value: 
          ViewTotalItemProvider()),
                          ], 
                child: MyApp()
                )
            );
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
        home: HomePage(),  
    );
  }
}

Step 4: use provider in your screen PlantFeatureScreen1 :

class PlantFeatureScreen1 extends StatefulWidget {
  @override
  _PlantFeatureScreen1State createState() => _PlantFeatureScreen1State();
}

class _PlantFeatureScreen1State extends State<PlantFeatureScreen1> {
  var viewTotalItemProvider;
  @override
  Widget build(BuildContext context) {
    viewTotalItemProvider = Provider.of<ViewTotalItemProvider>(context);
    return Scaffold(
      .......
    );
  }
  }

step 5: get cartPlantList1.

     List<CartPlantLists> list = viewTotalItemProvider.cartPlantList1;

step 6 : set cartPlantList1.

    List<CartPlantLists> list = [];
    ...
    viewTotalItemProvider.cartPlantList1 = list;

similarly u can use for other two classes.

user_141170230
Related