Define Number of lists according with Number into Widget flutter - flutter

What I Have are number of orders received that has be shown into a tab into a widget in flutter according with this code:
class ShipmentTab extends StatefulWidget {
#override
_ShipmentTabState createState() => _ShipmentTabState();
}
class _ShipmentTabState extends State<ShipmentTab> {
**final shipmentNumber = "16";**
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
color: Color(0xfffeaf0d),
child: Container(
width: 40,
height: 40,
child: Icon(
Icons.local_shipping,
color: Colors.white,
),
),
),
),
Padding(
padding: const EdgeInsets.all(13),
child: Text(
shipmentNumber,
style: TextStyle(
color: Colors.white, fontSize: 35, fontWeight: FontWeight.bold),
),
),
],
);
}
}
as you can see variable is " shipmentNumber " that show "16"
below I have listview.builder and I need to add itemCount and this count has to be refered to the tab above "16"
this is the code of the list:
Container(
height: 400,
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (ctx, int) {
return Card(
color: Color(0xFF1f2032),
elevation: 15,
child: Container(
width: 60,
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Card(
color: Color(0xfffeaf0d),
child: Container(
height: 40,
width: 40,
child: Icon(
Icons.local_shipping,
color: Colors.white,
size: 25,
)),
),
Text(
'Ref № $int',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
Text(
'Mario Rossi',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xfffeaf0d),
),
),
Text(
'Consegnato',
style: TextStyle(color: Colors.lightGreenAccent),
),
Icon(
Icons.share,
color: Colors.white,
)
],
),
),
);
},
),
),
],
);
}
}

ListView.builder has itemCount parameter. I notice shipmentNumber is in String so you can parse it to int. Also you need to remove the Container height wrapping your ListView
ListView.builder(
shrinkWrap: true,
itemCount: int.parse(shipmentNumber),
itemBuilder: (BuildContext context, int index) {
/** build your Item here **/
return BuiltItem();
},
)

Related

Flutter - How to make Container grow with a dynamic ListView?

I have a Container that contains a ListView, I want the Container to grow as big as the ListView. When I remove the height on the Container, I get an error saying (Vertical viewport was given unbounded height). How can I achieve this with flutter?
The ListView can contain multiple card items.
order_stack.dart file:
import 'package:flutter/material.dart';
class OrderStack extends StatelessWidget {
const OrderStack({Key? key, required this.id, required this.tableNumber}) : super(key: key);
final int id;
final int tableNumber;
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: Color.fromRGBO(33, 49, 55, 1),
),
clipBehavior: Clip.antiAlias,
child: Column(
children: [
Container(
height: 80,
width: 400,
color: const Color.fromRGBO(93, 194, 188, 1),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.only(left: 30),
child: Text(
'Table $tableNumber',
style: const TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.w900,
),
),
),
Container(
padding: const EdgeInsets.only(right: 30),
child: Text(
'#$id',
style: const TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Container(
height: 70,
width: 400,
child: ListView(
physics: const NeverScrollableScrollPhysics(),
children: <Widget>[
Card(
elevation: 0,
margin: EdgeInsets.zero,
child: ListTile(
tileColor: Colors.yellow[200],
leading: const Text(
'3X',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w800
),
),
title: const Text(
'Good Burger',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w800
),
),
subtitle: const Text('Here is a second line'),
trailing: IconButton(
iconSize: 30,
icon: const Icon(Icons.expand_more_outlined),
color: Colors.black,
onPressed: () {},
),
onTap: () => print('Good Burger'),
),
),
],
),
),
],
),
);
}
}
The easiest way would be to wrap your ListView() widget with a Column() and this column given a height of the user's screen with media query remember you should also use shrink wrap to true in the list and wrap your body with SingleChildScrollView()like so:
...
body: SingleChildScrollView(
...
Container(
height: MediaQuery.of(context).size.height,
child: Column(
children: [
///Your listview
ListView(
shrinkWrap: true,
)
]
)
)
...
)
Replace the Container with the Expanded widget. It will expand the ListView to fit the available space in the Column.
Expanded(
child: ListView(
...
)

Bottom Overflowed by 81 Pixels

I'm pretty much self-tutoring flutter and I'm working on a personal project. I wrapped it to singlechildscrollview but it still produces the problem. The code below:
class ScheduleDetail extends StatefulWidget {
var data;
ScheduleDetail(this.data);
#override
// ScheduleDetail({Key key, this.todos}) : super(key: key);
_ScheduleDetailState createState() => _ScheduleDetailState();
}
class _ScheduleDetailState extends State<ScheduleDetail>{
String foos = 'One';
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
ScreenUtil.instance =
ScreenUtil(width: 750, height: 1425, allowFontScaling: true)
..init(context);
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
// title: Text("String Master"),
title: SvgPicture.asset('assets/images/Logo_small.svg'),
centerTitle: true,
backgroundColor: Colors.transparent,
),
body: BackgroundImageWidget(
child: Center(
child: Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: ScreenUtil.getInstance().setHeight(150),
),
Container(
padding: EdgeInsets.symmetric(
horizontal: ScreenUtil.getInstance().setWidth(40),
),
child: Text(
AppStrings.scheduleTitle,
style: TextStyles.appName,
textAlign: TextAlign.center,
),
),
Container(
height: ScreenUtil.getInstance().setHeight(50),
),
SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.82),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: ScreenUtil.getInstance().setWidth(40),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildTopCard(),
SizedBox(height: 10),
_buildTimeCard(),
SizedBox(height: 10),
ListTile(
title: Text(
"Calendar",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 16
),
),
),
Container(color: Colors.grey, height: 1),
_buildNoticeExpansionTile(),
Container(color: Colors.grey, height: 1),
_buildMemoExpansionTile(),
],
)),
),
],
)
)
),
],
)),
)));
}
Widget _buildTopCard() {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7.0),
),
elevation: 15,
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7.0))),
child: Stack(
children: <Widget>[
Container(
height: 150,
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.green, width: 30)),
color: Colors.white,
),
alignment: Alignment.centerLeft,
child: Column(
children: <Widget>[
ListTile(
title: Text(widget.data['eventTitle'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
),
),
subtitle: Text(
widget.data['location'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey.shade600
),
),
),
Container(
padding: EdgeInsets.only(left: 10, right: 10),
child:
Divider(color: Colors.grey),
),
Container(
padding: EdgeInsets.only(left: 10, right: 10),
child: Row (
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
widget.data['startDate'] + " " + widget.data['timeStart'],
style: TextStyle(
color: Colors.grey.shade600,
fontStyle: FontStyle.italic,
fontSize: 14
),
),
Spacer(flex: 2),
Text(
widget.data['startDate'] + " " + widget.data['timeEnd'],
style: TextStyle(
color: Colors.grey.shade600,
fontSize: 14,
fontStyle: FontStyle.italic,
),
),
]
)
),
],
)
),
Positioned(
left: 10,
top: 7,
width: 325,
child: Container(
padding: EdgeInsets.only(bottom: 10, left: 5, right: 5),
color: Colors.transparent,
child: Row (
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
widget.data['startDate'],
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 14),
),
Spacer(flex: 2),
Text(
widget.data['timeStart'],
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 14),
),
],
)
),
),
],
)
),
);
}
Widget _buildTimeCard() {
return Container(
height: 125,
width: 400,
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(
color: Colors.green,
width: 0.5,
),
borderRadius: BorderRadius.circular(7.0),
),
child: Center(
child: Text(
'TIME OF EVENT',
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 14),
),
),
);
}
Widget _buildNoticeExpansionTile() {
return Theme(
data: Theme.of(context).copyWith(unselectedWidgetColor: Colors.white, accentColor: Colors.white),
child: ExpansionTile(
title: new Text(
"Notice",
style: TextStyle(
color: Colors.green,
fontSize: 16
),
),
backgroundColor: Colors.transparent,
children: <Widget>[
Container(
child: ListView.builder(
padding: EdgeInsets.all(0.0),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: widget.data['notice'] != null ? widget.data['notice'].length : 0,
itemBuilder: (BuildContext context, int index){
return
Padding(
padding: EdgeInsets.only(left: 15, bottom: 10),
child: Text(
"\u2022 " + widget.data['notice'][index],
style: TextStyle(
color: Colors.white,
fontSize: 14
),
)
);
}
)
),
]
)
);
}
Widget _buildMemoExpansionTile() {
return
Theme(
data: Theme.of(context).copyWith(unselectedWidgetColor: Colors.white, accentColor: Colors.white),
child: ExpansionTile(
title: new Text(
"Memo",
style: TextStyle(
color: Colors.green,
fontSize: 16
),
),
backgroundColor: Colors.transparent,
children: <Widget>[
ListView.builder(
padding: EdgeInsets.all(0.0),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: widget.data['memo'] != null ? widget.data['memo'].length : 0,
itemBuilder: (BuildContext context, int index){
return
Padding(
padding: EdgeInsets.only(left: 15, bottom: 10),
child: Text(
(index + 1).toString() + ". " + widget.data['memo'][index],
style: TextStyle(
color: Colors.white,
fontSize: 14
),
)
);
}
)
]
)
);
}
}
Perhaps my mistake could be from one of those objects that I have used. However, I can't figure it out even though I searched around the internet. My intention is when the expandable tiles have 'overlapped' the screen size, you would be able to scroll it all the way down.
Wrap the SingleChildScrollView in Expanded Widget.
You can make use of the flutter dev tools for identifying overlapping issues.
I simplified the scaffold then wrapped SingleChildScrollView within Flexible.

how to add fixed container above x number of scrollable card

I am trying to add a fixed buildHelpCard(context, alldata) above the scrollable list but whenever I try to add the buildHelpCard the list got disappeared and only the buildHelpCard is showing ... can you guys please suggest me how to fix this issues
**here is my code**
```
import 'package:flutter/material.dart';
import '../colors/constants.dart';
import 'package:get/get.dart';
import 'package:flutter_svg/flutter_svg.dart';
class duesDetails extends StatefulWidget {
var data;
var count;
duesDetails(this.data, this.count);
#override
_duesDetailsState createState() => _duesDetailsState();
}
class _duesDetailsState extends State<duesDetails> {
#override
Widget build(BuildContext context) {
var alldata = widget.data; // added all value to data for easy access
int count = widget.count;
return Scaffold(
appBar: buildAppBar(alldata),
body: Container(
decoration: BoxDecoration(
color: kPrimaryColor.withOpacity(0.03),
),
child: Center(
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Card(
child: Padding(
padding: const EdgeInsets.only(
top: 22, bottom: 22, left: 16, right: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
InkWell(
onTap: () {},
child: Text(
'${alldata[count]['pay list'][index]['discription']}',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 22),
),
),
Text(
'Capital',
style: TextStyle(color: Colors.grey.shade500),
),
],
),
Container(
height: 30,
width: 50,
child: Image.asset('assets/facebook.png'),
)
],
),
),
);
},
itemCount: alldata[count]['pay count'] == null ? 0 : alldata[count]['pay count'],
),
),
),
);
}
AppBar buildAppBar(var data) {
return AppBar(
backgroundColor: kPrimaryColor.withOpacity(.05),
elevation: 0,
//title: Obx(() => Text('Randas ', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),),),
title: Text("${data[0]['name']} Pay Details", style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),),
iconTheme: IconThemeData(
color: kPrimaryColor,
size: 28.0,
),
);
}
Container buildHelpCard(BuildContext context, var data) {
return Container(
height: 150,
width: double.infinity,
child: Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[
Container(
padding: EdgeInsets.only(
// left side padding is 40% of total width
left: MediaQuery.of(context).size.width * .4,
top: 20,
right: 20,
),
height: 130,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF60BE93),
Color(0xFF1B8D59),
],
),
borderRadius: BorderRadius.circular(20),
),
child: RichText(
text: TextSpan(
children: [
TextSpan(
text: "${data[5]["title"]}\n",
style: Theme.of(context)
.textTheme
.headline6
.copyWith(color: Colors.white),
),
TextSpan(
text: "${data[5]["dis"]}",
style: TextStyle(
color: Colors.white.withOpacity(0.7),
),
),
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 210.0, 20.0),
child: SvgPicture.asset("assets/svg/friends.svg"),
),
],
),
);
}
}
```
NOTE - I want to add buildHelpCard(context, alldata) function above the start of the card list... but when I try to do this the list got disappeared
Try this
child: Column(
children: [
buildHelpCard()
Expanded(child:
ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Card(
child: Padding(
padding: const EdgeInsets.only(
top: 22, bottom: 22, left: 16, right: 16),
child:........

How to make dynamic listview in tabbar

I want to make here Listing of cicrleavater, and in that cicleavter size issue width not getting more than 20 ! i want to make listing like instagram stories...and each tap i want show same pages but data differnt and current circle avater border need to show yello color....! how to do that i show you my screen size issue top whre cicleavter size issue i want make dyanamic listview and show on border when i tapped on it it
class FolderPageTabBAr extends StatefulWidget {
#override
_FolderPageTabBArState createState() => _FolderPageTabBArState();
}
class _FolderPageTabBArState extends State<FolderPageTabBAr> {
List<Widget> pages = [
CampaignFolder(),
ShelfScreen(),
CampaignFolder(),
ShelfScreen(),
];
double Redius = 40.0;
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: pages.length,
initialIndex: 0,
child: Scaffold(
body: Stack(
children: <Widget>[
TabBarView(
children: pages,
),
Container(
margin: EdgeInsets.only(top: 110,left: 1),
child: SizedBox(
height: 80,
width: 500,
child: TabBar(
tabs: [
Column(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(Globals.PhotographerProf),
radius: 22,
),
Padding(
padding: const EdgeInsets.all(8.0),
child:Text(
'ALL',
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 12.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
radius: 22,
backgroundImage: NetworkImage(Globals.PhotographerProf),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
Globals.Buisnessname,
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 11.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(Globals.PhotographerProf),
radius: 22,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Family",
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 10.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(Globals.PhotographerProf),
radius: 22,
),
Padding(
padding: const EdgeInsets.all(8.0),
child:Text(
"Album",
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 9.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
)
],
),
],
unselectedLabelColor: Colors.orange,
labelColor: Colors.deepOrange,
indicatorColor: Colors.transparent,
),
)
),
],
),
),
);
}
}
To create multiple (dynamic) views that look similar use List View Builder
FULL Example:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyClass {
final String url;
final int id;
MyClass(this.url, this.id);
}
class Foo extends StatefulWidget {
#override
State<StatefulWidget> createState() => FooState();
}
class FooState extends State<Foo> {
int selectedIndex = 0;
List<MyClass> items = [
MyClass('https://picsum.photos/250?image=9', 1),
MyClass('https://picsum.photos/250?image=10', 5),
MyClass('https://picsum.photos/250?image=11', 33)
];
#override
Widget build(BuildContext context) {
print("build");
return Scaffold(
appBar: AppBar(),
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 90,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: items.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
setState(() {
selectedIndex = index;
});
},
child: getAvatarView(items[index], index == selectedIndex),
);
},
),
),
Text(
"here is my page for id ${items[selectedIndex].id}",
style: TextStyle(backgroundColor: Colors.black, color: Colors.red),
),
],
),
);
}
Widget getAvatarView(MyClass item, bool isSelected) {
return Container(
margin: isSelected ? const EdgeInsets.all(5.0) : null,
decoration: BoxDecoration(
border: isSelected ? Border.all(color: Colors.yellow) : null),
child: Column(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(item.url),
radius: 22,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'ALL',
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 12.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
)
],
),
);
}
}
To pass multiple attributes in an item (callback function, url for img,...) use a List of Custom classes.

Flutter: Updating UI from outside of a StatefulWidget

I am new to flutter, and working on a shopping cart project. i don't know how exatly i am suppose to ask this question but, here is what i wanted.
I am trying to update my UI when the cart item and prices changes, which means to display sum amount of products from ListView (Stateful widget) to main OrderPage Stateful widget. I know about setState() method, but i think i should use some callback methods here, dont know exactly.
I have explained in short in Image - see below img
What i have done: when user modify cart products, I have saved the value (price/product/count) in to constant value , i calculate the value and save in constant value, and later use that const var in Main widget (Main Ui), which does update when i close and reopen the page, but could not able to update when button pressed (product +/-buttons)
What i want to do is,
Update my total value when +/- buttons are pressed.
Here is my full code:
class cartConstant{
static int packageCount;
static List<int> list;
}
class OrderPage extends StatefulWidget {
#override
_OrderPageState createState() => _OrderPageState();
}
class _OrderPageState extends State<OrderPage> {
int data = 3;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
automaticallyImplyLeading: true,
iconTheme: IconThemeData(
color: Colors.black54, //change your color here
),
backgroundColor: Colors.white,
elevation: 1,
title: Text("Your order Summery",style: TextStyle(color: Colors.black54),),
centerTitle: true,
),
body: Container(
child:
FutureBuilder(
builder: (context, snapshot){
// var datas = snapshot.data;
return
ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: data,
itemBuilder: (BuildContext context, int index){
// Cart cart = datas[index];
return CartListView();
},
padding: EdgeInsets.symmetric(horizontal: 10.0),
scrollDirection: Axis.vertical,
);
},
),
),
bottomNavigationBar: _buildTotalContainer(),
);
}
Widget _buildTotalContainer() {
return Container(
height: 220.0,
padding: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
child: Column(
children: <Widget>[
SizedBox(
height: 10.0,
),
Padding(
padding: const EdgeInsets.only(top: 10),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Subtotal",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
cartConstant.packageCount.toString(),
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
),
SizedBox(
height: 15,
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Discount",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
"0.0",
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 10.0,
),
Divider(
height: 2.0,
),
SizedBox(
height: 20.0,
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Cart Total",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
cartConstant.packageCount.toString(),
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 20.0,
),
GestureDetector(
onTap: () {
// Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => SignInPage()));
},
child: Container(
height: 50.0,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(35.0),
),
child: Center(
child: Text(
"Proceed To Checkout",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
SizedBox(
height: 20.0,
),
],
),
);
}
}
class CartListView extends StatefulWidget {
#override
_CartListViewState createState() => _CartListViewState();
}
class _CartListViewState extends State<CartListView> {
int _counter = 1;
int getPrice(int i,int priceC){
cartConstant.packageCount = i*priceC;
return cartConstant.packageCount;
}
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xFFD3D3D3), width: 2.0),
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 10.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: (){
setState(() {
_counter++;
if (_counter > 20) {
_counter = 20;
}
});
},
child: Icon(Icons.add, color: Color(0xFFD3D3D3))),
Text(
"$_counter",
style: TextStyle(fontSize: 18.0, color: Colors.grey),
),
InkWell(
onTap:(){
setState(() {
_counter--;
if (_counter < 2) {
_counter = 1;
}
});
},
child: Icon(Icons.remove, color: Color(0xFFD3D3D3))),
],
),
),
),
SizedBox(
width: 20.0,
),
Container(
height: 70.0,
width: 70.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/food.jpg"),
fit: BoxFit.cover),
borderRadius: BorderRadius.circular(35.0),
boxShadow: [
BoxShadow(
color: Colors.black54,
blurRadius: 5.0,
offset: Offset(0.0, 2.0))
]),
),
SizedBox(
width: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Employee Package",
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
SizedBox(height: 5.0),
Container(
height: 25.0,
width: 120.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Row(
children: <Widget>[
Text("Price",
style: TextStyle(
color: Color(0xFFD3D3D3),
fontWeight: FontWeight.bold)),
SizedBox(
width: 5.0,
),
InkWell(
onTap: () {},
child: Text(
getPrice(_counter, 2000).toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
),
SizedBox(
width: 10.0,
),
],
),
],
),
),
],
),
Spacer(),
GestureDetector(
onTap: () {
},
child: Icon(
Icons.cancel,
color: Colors.grey,
),
),
],
),
),
);
}
}
you can also check from my cart screen shot below:
You can copy paste run full code below
You can use callback refresh() and pass callback to CartListView
code snippet
class _OrderPageState extends State<OrderPage> {
int data = 3;
void refresh() {
setState(() {});
}
...
itemBuilder: (BuildContext context, int index) {
// Cart cart = datas[index];
return CartListView(refresh);
},
...
class CartListView extends StatefulWidget {
VoidCallback callback;
CartListView(this.callback);
...
InkWell(
onTap: () {
setState(() {
_counter++;
if (_counter > 20) {
_counter = 20;
}
});
widget.callback();
},
working demo
full code
import 'package:flutter/material.dart';
class cartConstant {
static int packageCount;
static List<int> list;
}
class OrderPage extends StatefulWidget {
#override
_OrderPageState createState() => _OrderPageState();
}
class _OrderPageState extends State<OrderPage> {
int data = 3;
void refresh() {
setState(() {});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
automaticallyImplyLeading: true,
iconTheme: IconThemeData(
color: Colors.black54, //change your color here
),
backgroundColor: Colors.white,
elevation: 1,
title: Text(
"Your order Summery",
style: TextStyle(color: Colors.black54),
),
centerTitle: true,
),
body: Container(
child: FutureBuilder(
builder: (context, snapshot) {
// var datas = snapshot.data;
return ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: data,
itemBuilder: (BuildContext context, int index) {
// Cart cart = datas[index];
return CartListView(refresh);
},
padding: EdgeInsets.symmetric(horizontal: 10.0),
scrollDirection: Axis.vertical,
);
},
),
),
bottomNavigationBar: _buildTotalContainer(),
);
}
Widget _buildTotalContainer() {
return Container(
height: 220.0,
padding: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
child: Column(
children: <Widget>[
SizedBox(
height: 10.0,
),
Padding(
padding: const EdgeInsets.only(top: 10),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Subtotal",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
cartConstant.packageCount.toString(),
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
),
SizedBox(
height: 15,
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Discount",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
"0.0",
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 10.0,
),
Divider(
height: 2.0,
),
SizedBox(
height: 20.0,
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Cart Total",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
"8000",
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 20.0,
),
GestureDetector(
onTap: () {
// Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => SignInPage()));
},
child: Container(
height: 50.0,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(35.0),
),
child: Center(
child: Text(
"Proceed To Checkout",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
SizedBox(
height: 20.0,
),
],
),
);
}
}
class CartListView extends StatefulWidget {
VoidCallback callback;
CartListView(this.callback);
#override
_CartListViewState createState() => _CartListViewState();
}
class _CartListViewState extends State<CartListView> {
int _counter = 1;
int getPrice(int i, int priceC) {
cartConstant.packageCount = i * priceC;
return cartConstant.packageCount;
}
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xFFD3D3D3), width: 2.0),
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 10.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: () {
setState(() {
_counter++;
if (_counter > 20) {
_counter = 20;
}
});
widget.callback();
},
child: Icon(Icons.add, color: Color(0xFFD3D3D3))),
Text(
"$_counter",
style: TextStyle(fontSize: 18.0, color: Colors.grey),
),
InkWell(
onTap: () {
setState(() {
_counter--;
if (_counter < 2) {
_counter = 1;
}
});
widget.callback();
},
child: Icon(Icons.remove, color: Color(0xFFD3D3D3))),
],
),
),
),
SizedBox(
width: 20.0,
),
Container(
height: 70.0,
width: 70.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/food.jpg"),
fit: BoxFit.cover),
borderRadius: BorderRadius.circular(35.0),
boxShadow: [
BoxShadow(
color: Colors.black54,
blurRadius: 5.0,
offset: Offset(0.0, 2.0))
]),
),
SizedBox(
width: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Employee Package",
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
SizedBox(height: 5.0),
Container(
height: 25.0,
width: 120.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Row(
children: <Widget>[
Text("Price",
style: TextStyle(
color: Color(0xFFD3D3D3),
fontWeight: FontWeight.bold)),
SizedBox(
width: 5.0,
),
InkWell(
onTap: () {},
child: Text(
getPrice(_counter, 2000).toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
),
SizedBox(
width: 10.0,
),
],
),
],
),
),
],
),
Spacer(),
GestureDetector(
onTap: () {},
child: Icon(
Icons.cancel,
color: Colors.grey,
),
),
],
),
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: OrderPage(),
);
}
}
When the button is tapped, you just need to update the Subtotal amount and cart total.
Step 1 : Replace the harcoded value by a variable. So, something like :
Row(
children: <Widget>[
Text(
"Subtotal",
style: ...
),
Text(
"$subTotal",
style: ....
),
],
),
Step 2 : Now, add a code to calcualte subTotal and cartTotal. You already have code which increments and decrements the variable _counter. You just need to tweak that part like :
setState( (){
_counter++;
// So, the quantity is increased. Just get the price of current item and add in the sub total.
subTotal += priceC;
cartTotal = subTotal - discount;
} );