想要在flutter中通过底部导航栏的总价
Posted
技术标签:
【中文标题】想要在flutter中通过底部导航栏的总价【英文标题】：Want to pass the total price in the bottom navigation bar in flutter 【发布时间】：2020-11-16 19:06:20 【问题描述】：如何在底部导航栏中显示总金额...该应用程序使用 Firebase 后端...我的数据库名称中有一个文件每件商品的总价...现在我想获取总价每个项目，然后添加并显示在底部导航栏中..
我附上了我的firebase后端屏幕截图..我需要将字段“总计”的所有值加起来并显示在总计下方的底部栏中，当前硬编码为999部分.. . 如果有人让我知道该怎么做会很有帮助。我是应用程序开发和颤振的新手
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/foundation.dart';
import 'dart:async';
import 'package:fluttertoast/fluttertoast.dart';
void main()
runApp(MyApp());
class MyApp extends StatefulWidget
@override
_MyAppState createState() => _MyAppState();
class _MyAppState extends State<MyApp>
final myController = TextEditingController(); ///Alert Dialog box input text myController will be use to store the number of qty
String id;
var qty;
var price;
var total;
@override
Widget build(BuildContext context)
return MaterialApp(
debugShowCheckedModeBanner: false,
home:Scaffold(
bottomNavigationBar: new Container( //// Bottom Naviagtion Bar for check out and Total price
color: Colors.white,
child: Row(
children: <Widget>[
Expanded(child: ListTile(
title: Text("Total"),
subtitle: Text("Rs 999"),
),),
Expanded(
child: MaterialButton(onPressed:() ,
child: Text("Check Out",style: TextStyle(color: Colors.white),),
color: Colors.red,) ,
)
],
),
),
appBar: AppBar(title: Text('MyKart'),
),
body: (
StreamBuilder(
stream: Firestore.instance.collection('KartDetails').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot)
if (snapshot.hasData)
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index)
DocumentSnapshot kartDetails = snapshot.data.documents[index];
return Container(
height: 150,
child: Card(
elevation: 10,
child: Container(
height: 100,
width: 100,
child: Row(
children: <Widget>[
Container(
width: 100,
height: 100,
child: Image.network(kartDetails['img']),
),
Container(
child: (Text(kartDetails['item'])),
),
Container(
width: 50,
child: (Text('Rs '+kartDetails['price'].toString(),textAlign: TextAlign.end,)),
),
Container(
margin: EdgeInsets.only(left: 20),
height: 120,
width: 50,
color: Colors.white10,
child: Column(
children: <Widget>[
RaisedButton(
color: Colors.grey,
onPressed: ()
showDialog(context: context,
builder: (BuildContext context)
return Dialog(
child: Container(
height: 250,
color: Colors.white10,
child: Container(
margin: EdgeInsets.all(40.0),
child: Column(
children: <Widget>[
TextField(
controller: myController,
keyboardType: TextInputType.number,
decoration: InputDecoration(hintText: 'Enter the Quantity'),
),
Container(
height: 50,
),
RaisedButton(
color: Colors.blue,
child: Text('Submit'),
onPressed: () async
qty = myController.text;
//==================================================================Total Number of QTY ENTERED==========================================//
if (int.parse(qty)>0 && int.parse(qty)>=5)
CollectionReference collectionRefernce = Firestore
.instance.collection(
'KartDetails');
QuerySnapshot querySnapshot = await collectionRefernce
.getDocuments();
querySnapshot
.documents[index]
.reference
.updateData(
"quantity": qty);
//==================================================================Calculate price for each product==========================================//
price = kartDetails['price'];
total=int.parse(qty)*price;
querySnapshot
.documents[index]
.reference
.updateData(
"total": total);
print(myController
.toString());
Navigator.of(context)
.pop();
myController.clear();
Fluttertoast.showToast(msg: "Quantity Updated",
toastLength: Toast.LENGTH_LONG,
gravity: ToastGravity.CENTER,
timeInSecForiosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 20.0
);
else if(int.parse(qty) < 5 || int.parse(qty)<0)
Fluttertoast.showToast(msg: "Minimum 5 quanity",
toastLength: Toast.LENGTH_LONG,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 20.0
);
myController.clear();
else
Fluttertoast.showToast(msg: "Please enter valid quantity",
toastLength: Toast.LENGTH_LONG,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 20.0
);
myController.clear();
//Firebase query
,
)
],
),
),
),
);
);
,
child: Icon(Icons.shopping_basket),
),
Container(
height: 20,
),
RaisedButton(
color: Colors.grey,
child: Icon(Icons.delete,color: Colors.black87,),
)
],
),
),
Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 3),
height: 50,
width: 70,
child: Center(child: Text('Quantity')),
),
Container(
width: 70,
child: Center(child: Text((kartDetails['quantity']).toString())),
),
Container(
margin: EdgeInsets.only(top: 25),
child: Center(child: Text('Total Price')),),
Container(
margin: EdgeInsets.only(left: 3),
width: 70,
child: Center(child: Text(("Rs " + (kartDetails['total']).toString()))),
),
],
),
],
),
),
),
);
,
);
else
return Center(
child: Container(),
);;
,
)
),
),
);
【问题讨论】：
请编辑此问题并提供更多信息。这个图像到底是什么？是你实际拥有的还是你想要拥有的？你的bottomNavigationBar 代码是什么样的？你已经尝试过什么？ 我编辑了问题，请您检查一下 我在下面发布了我的答案。如果您还需要什么，请告诉我 它工作得很好但是只有一个问题文本字段我的意思是UI部分保持不变它只有在应用程序重新启动后才会改变...... :(......有蚂蚁方式我可以在不重新启动应用程序的情况下执行此操作我的意思是在数量更新后立即 您可以使用 RefreshIndicator（将脚手架包裹在其中），或者这个答案可以帮助您。 ***.com/questions/60942014/… 好像和你想做的事有关。 【参考方案1】：你可以用这个方法轻松做到：
var totalCartValue = 0;
String getCartTotal() async
QuerySnapshot snapshot = await Firestore.instance
.collection('KartDetails')
.getDocuments();
snapshot.documents.forEach((doc)
setState(()
totalCartValue += doc.data['total'];
);
);
return totalCartValue.toString();
P.S：这个方法会给你 KartDetails 集合中所有值的总和，而不是当前用户的总和，对于当前用户，它应该是这样的：
var totalCartValue = 0;
String getCartTotal() async
QuerySnapshot snapshot = await Firestore.instance
.collection('KartDetails')
.where("UID", isEqualTo: FirebaseAuth.instance.currentUser().toString())
.getDocuments();
snapshot.documents.forEach((doc)
setState(()
totalCartValue += doc.data['total'];
);
);
return totalCartValue.toString();
并以这种方式在 UI 中使用它：
class YourClassName extends StatefulWidget
@override
_YourClassNameState createState() => _YourClassNameState();
class _YourClassNameState extends State<YourClassName>
@override
Widget build(BuildContext context)
return Scaffold(
body: //your body code,
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.cart_shopping),
title: new Text(totalCartValue),
),
]
)
);
您应该在您的 initState 中调用它，以便在应用启动时执行它：
@override
initState()
super.initState();
getCartTotal();
【讨论】：
先生，问题是在哪里调用函数......我也在购物车中调用了这个函数 按下功能上的数量增加图标..就在屏幕截图中删除图标的上方......问题添加后的总数量是否保持不变我的意思是它不会随着数量更新而改变只添加一次然后它保持不变我使用打印功能检查过。 我已经粘贴了代码，请让我知道如何使用它，以便每次我增加总价值当前存储在 firebase 中的数量，但如何获得总价值的总和存储在 firebase 中并显示在 UI 中 我编辑了我的答案，让您了解更多。如果有帮助，请告诉我。 如果你想让它在每次发生变化时更新，你也可以在 build 中调用它【参考方案2】：这是一个非常模糊的问题，因此我将介绍一种解决此问题的方法。为此，您将需要某种状态管理解决方案。我建议使用provider。 Flutter 有一个关于 provider here 的教程。本质上，您必须创建一个 ChangeNotifier，每次添加或删除项目时都会调用 onAddItem 和 onDeleteItem 并调用notifyListeners()。然后，您的底部栏将简单地使用 Consumer 从您的 ChangeNotifier 中获取值。正如我所说，这只是一种方法，但由于您没有给出可复制的示例，这是我能做的最好的。
【讨论】：
您好，我是 Flutter 的新手。我已经编辑了这个问题。你能帮帮我吗 @RetartedCoder 看看 DidierPeran 对此的回答。我想指出，将购物车存储在 Firebase 中并不是一个好主意，这最好在本地进行管理，但是如果您想在多个设备上使用同一个购物车，我认为它会起作用。 我如何在本地做到这一点，你可以让我知道主题，以便我可以学习它 开始研究提供商，我会谷歌填充堆栈，他有很多好的视频，这是一个很好的开始：filledstacks.com/post/… 说我使用 sqfite 来存储购物车的详细信息，但是如何获取图像路径？它存储在firebase中以上是关于想要在flutter中通过底部导航栏的总价的主要内容，如果未能解决你的问题，请参考以下文章