[英]How to not lose a data from the list when going from one screen to another screen in flutter?
I have a class ViewTotalItemProvider
which extends the ChangeNotifier.我有一个扩展 ChangeNotifier 的 class
ViewTotalItemProvider
。 Inside the class, there is a list like this.在 class 里面,有一个这样的列表。
class ViewTotalItemProvider extends ChangeNotifier{
List<CartPlantLists> cartPlantList3 = [];
}
Additionally, there are 3 screens including class like, PlantFeatureScreen1
, ParticularPlant2
, CartDetais3
.此外,还有 3 个屏幕,包括 class like,
PlantFeatureScreen1
, ParticularPlant2
, CartDetais3
。 All are stateful widget and I am adding some items in second screen ie ParticularPlant2
class.所有都是有状态的小部件,我在第二个屏幕中添加了一些项目,即
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 ie PlantFeatureScreen1
.但是该值在 firstScreen 即
PlantFeatureScreen1
中没有更新。 However, when I reload the app, it shows the updated value.但是,当我重新加载应用程序时,它会显示更新后的值。
why is this happening?为什么会这样? How can I solve it?
我该如何解决?
Code代码
ViewTotalItemProvider 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) firstScreen
PlantFeatureScreen1
(这里我想更新最后一个小部件中的值)
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
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")),
)
],
)
],
),
)
],
),
),
),
);
}
}
It seems like you are using Provider the wrong way.似乎您以错误的方式使用 Provider 。 The best way to do this in your scenario is to wrap MaterialApp inside MyApp() in your main.dart file with MultiProvider.
在您的场景中执行此操作的最佳方法是使用 MultiProvider 将 MaterialApp 包装在您的 main.dart 文件中的 MyApp() 中。 Try something like this: https://pub.dev/packages/provider#multiprovider You can place a ChangeNotifierProvider inside it.
尝试这样的事情: https://pub.dev/packages/provider#multiprovider您可以在其中放置一个 ChangeNotifierProvider。
return MultiProvider(
providers: [
ChangeNotifierProvider<ViewTotalItemProvider>(
create: (context) => ViewTotalItemProvider()),
],
child: MaterialApp(...)
);
Also, you have to place a getter and setter in your Model.此外,您必须在 Model 中放置一个 getter 和 setter。 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:我还建议使用 Selector 而不是 Consumer(理想情况下,您应该使用 Selector 而不是 Consumer,以便小部件仅在其侦听的值发生变化时重建)以下是基于上述 model 的示例:
@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:以下是使用 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!
祝你好运!
Step 1: add the dependency for the provider pattern in the pubspec.yaml file第 1 步:在pubspec.yaml文件中添加提供程序模式的依赖项
dependencies:
flutter:
sdk: flutter
provider: ^4.1.2
Step 2: create provider in seperate file:第 2 步:在单独的文件中创建提供程序:
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 .第 3 步:使用 MultiProvider 将 MaterialApp 小部件包装在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:第 4 步:在您的屏幕 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.第 5 步:获取 cartPlantList1。
List<CartPlantLists> list = viewTotalItemProvider.cartPlantList1;
step 6: set cartPlantList1.第 6 步:设置 cartPlantList1。
List<CartPlantLists> list = [];
...
viewTotalItemProvider.cartPlantList1 = list;
similarly u can use for other two classes.同样,您可以用于其他两个类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.