How to make dynamic listview in tabbar - flutter

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.

Related

How to make Container height dynamic to fit ListView but to certain max height Flutter

I am trying to show ListView in a custom dialog window. What I want to make dialog box height dynamic according to ListView content but to certain max height. If the ListView content reaches specific height it should me scrollable.
This is my code:
class PeekTableDialog extends StatefulWidget {
Order order;
PeekTableDialog({required this.order});
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return PeekTableDialogState();
}
}
class PeekTableDialogState extends State<PeekTableDialog> {
final ScrollController controller = ScrollController();
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
void initState() {
super.initState();
}
Widget getExtras(Food fooditem) {
List<String> extras = [];
for (var extra in fooditem.extras) {
if (fooditem.extras.last == extra) {
extras.add(extra.name);
} else {
extras.add(extra.name + ', ');
}
}
return Wrap(
runSpacing: 2,
spacing: 2,
children: List.generate(
extras.length,
(index) {
return Text(
extras[index].toString(),
style: TextStyle(
color: Colors.grey[700],
fontSize: 14,
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
),
);
},
),
);
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return SizedBox(
width: MediaQuery.of(context).size.width * 0.50,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
color: Colors.grey[400],
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
alignment: Alignment.center,
child: Row(
children: [
Expanded(
child: Container(
alignment: Alignment.center,
child: Text(
widget.order.table!.name,
style: AppTextStyles().style2,
),
),
),
IconButton(
onPressed: () {
Navigator.of(context).pop();
},
padding: EdgeInsets.zero,
icon: Icon(
Icons.close,
color: Colors.white,
size: 35,
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
alignment: Alignment.center,
child: Text(
'\$' + widget.order.total,
style: TextStyle(
color: Colors.grey[800],
fontSize: 35,
fontWeight: FontWeight.w400,
),
),
),
SizedBox(
height: 15,
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Expanded(
child: Text(
'Qty',
style: TextStyle(
color: Colors.grey[700],
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 2,
child: Text(
'Item',
style: TextStyle(
color: Colors.grey[700],
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Container(
child: Text(
'Price',
style: TextStyle(
color: Colors.grey[700],
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Container(
child: Text(
'Disc.',
style: TextStyle(
color: Colors.grey[700],
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
),
),
],
),
const Divider(
color: Colors.grey,
height: 1.5,
),
const SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.only(bottom: 30),
child: Scrollbar(
isAlwaysShown: true,
controller: controller,
thickness: 12,
showTrackOnHover: true,
child: ListView.separated(
itemCount: widget.order.cartItems.length,
controller: controller,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
child: Row(
children: [
Expanded(
child: Container(
alignment: Alignment.centerLeft,
child: Text(
widget.order.cartItems[index].cartCount
.toString(),
style: TextStyle(
color: Colors.grey[700],
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 2,
child: Container(
alignment: Alignment.centerLeft,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
widget.order.cartItems[index].name,
style: TextStyle(
color: Colors.grey[700],
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
const SizedBox(
height: 5,
),
getExtras(widget.order.cartItems[index]),
],
),
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Container(
alignment: Alignment.centerLeft,
child: Text(
'\$' +
widget.order.cartItems[index].totalPrice
.toStringAsFixed(2),
style: TextStyle(
color: Colors.grey[700],
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Container(
alignment: Alignment.centerLeft,
child: Text(
'\$' +
widget
.order.cartItems[index].newDiscPrice
.toStringAsFixed(2),
style: TextStyle(
color: Colors.grey[700],
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
),
),
],
),
);
},
separatorBuilder: (context, index) {
return const SizedBox(height: 3);
},
),
),
),
],
),
),
],
),
);
}
}
Anyone help me please with this small issue.
Thanks in advance.
Well, It's pretty easy. All you have to do is to create a class like this :
class ExpandableText extends StatefulWidget {
ExpandableText(this.text, this.isLongText, {Key? key}) : super(key: key);
final String text;
bool isExpanded = false;
final bool isLongText;
#override
_ExpandableTextState createState() => _ExpandableTextState();
}
class _ExpandableTextState extends State<ExpandableText>
with TickerProviderStateMixin<ExpandableText> {
#override
void initState() {
if (widget.isLongText) {
setState(() {
widget.isExpanded = false;
});
} else {
widget.isExpanded = true;
}
super.initState();
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
AnimatedSize(
vsync: this,
duration: const Duration(milliseconds: 500),
child: ConstrainedBox(
constraints: widget.isExpanded
? const BoxConstraints(maxHeight: 250.0)
: const BoxConstraints(
maxHeight: 60.0,
),
child: SingleChildScrollView(
child: Text(
widget.text,
overflow: TextOverflow.fade,
),
),
),
),
widget.isExpanded
? ConstrainedBox(constraints: const BoxConstraints())
: TextButton(
style: const ButtonStyle(alignment: Alignment.topRight),
child: const Text(
'Expand..'
),
onPressed: () => setState(() => widget.isExpanded = true),
),
],
);
}
}
Just play with the maxHeight according to your needs. Call this class like this (inside your dialog window) :
ExpandableText(
dataToBeShown,
dataToBeShown.length > 250 ? true : false,
),

TabBarView inside Sliver with StickyHeader

I have made this layout so far using CustomScrollView and Sticky Header
https://imgur.com/a/Xo4AfAM
What I want to achieve is that the content below the tabs should not scroll unless there is extra content available. Also, after scrolling, the content should not go behind the sticky header.
My Code so far.
Scaffold(
backgroundColor: Colors.white,
extendBodyBehindAppBar: true,
appBar: AppBar(
toolbarHeight: getHeight() * (1 / 11),
),
body: Padding(
padding: getPaddings(),
child: DefaultTabController(
length: 3,
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: getHeight() * (3 / 11),
color: Colors.blue,
),
),
SliverStickyHeader(
header: Column(
children: [
Container(
height: getHeight() * (1 / 11),
width: double.infinity,
color: kPrimaryColor,
child: Center(
child: Text(
"TEXT",
style: TextStyle(
fontSize: 32,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
Container(
height: getHeight() * (1 / 11),
color: kPrimaryColor,
child: TabBar(
tabs: [
Tab(
child: Text(
'TITLE1',
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
'TITLE2',
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
'TITLE3',
style: TextStyle(color: Colors.black),
),
),
],
),
),
],
),
sliver: SliverFillRemaining(
child: TabBarView(
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(50),
vertical: getProportionateScreenHeight(20)),
child: Column(
children: [
RoundedPicture(),
FittedBox(
child: Text("Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 40)),
),
SizedBox(
height: getProportionateScreenHeight(20),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info1: ',
children: [
TextSpan(
text: "123",
style: TextStyle(
color: kSecondaryColor,
),
),
]),
),
SizedBox(
height: getProportionateScreenHeight(20),
),
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info2: ',
children: [
TextSpan(
text: "abcd",
style: TextStyle(
color: kSecondaryColor,
),
),
]),
),
SizedBox(
height: getProportionateScreenHeight(20),
),
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info3: ',
children: [
TextSpan(
text: "xyz",
style: TextStyle(
color: kSecondaryColor,
),
),
]),
),
],
),
],
),
),
Center(
child: Text("TITLE2"),
),
Center(
child: Text("TITLE3"),
),
],
),
),
),
],
),
),
),
To achieve the required layout, I tried using TabBarView inside different slivers i.e SliverList and SliverToBoxAdapter but they all resulted in an error because TabBarView doesn't have a predefined height.
Here is my implementation.
Because there are no method related to size, I just set a value myself.
Stack
DefaultTabController
NestedScrollView
SliverAppBar
SliverPersistentHeader
SliverPersistentHeader
TabBarView
Container // For back button
import 'package:flutter/material.dart';
import 'dart:math' as math;
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: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(initialIndex: 0, length: 3, vsync: this);
}
double getHeight() {
return 800;
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
extendBodyBehindAppBar: true,
body: SafeArea(
child: Stack(
children: [
DefaultTabController(
length: 3,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 90,
maxHeight: 90,
child: Container(
height: getHeight() * (1 / 11),
width: double.infinity,
color: Colors.green[200],
child: Center(
child: Text(
"TEXT",
style: TextStyle(
fontSize: 32,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 90,
maxHeight: 90,
child: Container(
color: Colors.green[200],
child: TabBar(
controller: _tabController,
tabs: [
Tab(
child: Text(
'TITLE1',
style: TextStyle(
color: Colors.black,
),
),
),
Tab(
child: Text(
'TITLE2',
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
'TITLE3',
style: TextStyle(color: Colors.black),
),
),
],
),
),
),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(bottom: 600),
child: Column(
children: [
// RoundedPicture(),
Icon(
Icons.favorite,
color: Colors.pink,
size: 150.0,
semanticLabel:
'Text to announce in accessibility modes',
),
FittedBox(
child: Text("Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 40)),
),
SizedBox(
height: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info1: ',
children: [
TextSpan(
text: "123",
style: TextStyle(),
),
]),
),
SizedBox(
height: 20,
),
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info2: ',
children: [
TextSpan(
text: "abcd",
style: TextStyle(),
),
]),
),
SizedBox(
height: 20,
),
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info3: ',
children: [
TextSpan(
text: "xyz",
style: TextStyle(),
),
]),
),
],
),
],
),
),
),
SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(bottom: 600),
child: Column(
children: [
Container(
padding: EdgeInsets.only(bottom: 600),
child: Center(
child: Text("TITLE2"),
),
),
],
),
),
),
SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(bottom: 600),
child: Column(
children: [
Container(
padding: EdgeInsets.only(bottom: 600),
child: Center(
child: Text("TITLE3"),
),
),
],
),
),
),
],
),
),
),
Container(
height: 90,
padding: EdgeInsets.symmetric(horizontal: 15),
child: InkWell(
onTap: () {},
child: Icon(Icons.arrow_back),
),
),
],
),
),
);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate({
#required this.minHeight,
#required this.maxHeight,
#required this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
#override
double get minExtent => minHeight;
#override
double get maxExtent => math.max(maxHeight, minHeight);
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return SizedBox.expand(child: child);
}
#override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
After finding no possible solution, I decided to implement my own tab bar view instead of using the default one. The solution isn't as fancy since the transition of tabs is done by changing the current page number and rebuilding the widget but solves the issue. I used a gesture detector for allowing users to swipe the page.
GestureDetector(
onHorizontalDragEnd: (dragDetails) {
if (dragDetails.primaryVelocity != 0) {
final int val = dragDetails.primaryVelocity.sign.toInt();
if (currentPage - val >= 0 &&
currentPage - val < tabController.length)
tabController.animateTo(currentPage - val);
}
},
child: CustomScrollView(
shrinkWrap: true,
controller: scrollController,
slivers: [
SliverToBoxAdapter(
child: LogoContainer(),
),
SliverStickyHeader(
header: Column(
children: [
NameContainer(text: 'TEXT'),
Container(
height: 60,
color: kSecondaryColor,
child: TabBar(
controller: tabController,
tabs: [
Tab(
child: Text(
'TITLE1',
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
'TITLE2',
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
'TITLE3',
style: TextStyle(color: Colors.black),
),
),
],
),
),
],
),
sliver: SliverToBoxAdapter(
child: ConstrainedBox(
constraints:
BoxConstraints(minHeight: getHeight() * (6 / 11)),
child: [
Column(
children: [
RoundedPicture(),
FittedBox(
child: Text(
'HELLO WORLD',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 40),
),
),
SizedBox(
height: getProportionateScreenHeight(20),
),
Column(
children: [
ProfileInfoText(
title: 'INFO1',
text: 'abcd',
),
SizedBox(
height: getProportionateScreenHeight(20),
),
ProfileInfoText(
title: 'INFO2',
text: '123',
),
SizedBox(
height: getProportionateScreenHeight(20),
),
ProfileInfoText(
title: 'INFO3',
text: 'xyz',
),
],
),
],
),
Center(
child: Text("TITLE2"),
),
Center(
child: Text("TITLE3"),
),
].elementAt(currentPage),
),
),
),
],
),
),
I also used scroll controller to animate the list back to top when changing the tabs to give it a smooth look.
#override
void initState() {
super.initState();
tabController = TabController(length: 3, vsync: this)
..addListener(() async {
await scrollController.animateTo(
0,
duration: Duration(seconds: 1),
curve: Curves.ease,
);
setState(() {
currentPage = tabController.index;
});
});
}

Define Number of lists according with Number into Widget 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();
},
)

Flutter how give a gap between containers in SliverChildBuilderDelegate

I am using SliverAppBar in my app which is working fine but problem is in list of container its not increasing gap between list
[
My code
import 'package:flutter/material.dart';
class ClaimsScreen extends StatefulWidget {
#override
_ClaimsScreenState createState() => _ClaimsScreenState();
}
class _ClaimsScreenState extends State<ClaimsScreen> {
final List _claims = [
{
'av': '27,000',
'cv': '25,000',
'cqno': '3442121',
'status': 'CLAIM PAYMENT PRCESSED',
'cno': '00651211',
},
{
'av': '29,000',
'cv': '25,000',
'cqno': '3442121',
'status': 'CLAIM PAYMENT PRCESSED',
'cno': '00651211',
},
];
#override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Expanded(
child: Container(
child: new CustomScrollView(
scrollDirection: Axis.vertical,
slivers: <Widget>[
new SliverAppBar(
backgroundColor: Colors.white,
expandedHeight: statusBarHeight * 5,
flexibleSpace: new FlexibleSpaceBar(
title: const Text(
'Claims',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20,
color: Color(0xff00AEF0),
fontWeight: FontWeight.bold),
),
),
),
new SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 20.0),
sliver: new SliverFixedExtentList(
itemExtent: 150.0,
delegate: new SliverChildBuilderDelegate(
(builder, index) => BenefitList(index),
childCount: _claims.length),
)),
],
),
),
);
}
Widget BenefitList(int index) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Container(
child: Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 30,
child: Container(
child: Padding(
padding: const EdgeInsets.only(right: 10, left: 10, top: 10),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Approved Value : ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
Text(
_claims[index]['av'],
style: TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
),
],
),
SizedBox(height: height* 0.005,),
Row(
children: <Widget>[
Text(
'Claim Value : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cv'],
style: TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
),
],
),
SizedBox(height: height* 0.005,),
Row(
children: <Widget>[
Text(
'Claim No : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cno'],
style: TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
),
],
),
Row(
children: <Widget>[
Text(
'Cheque Number : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cqno'],
style: TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
),
],
),
SizedBox(height: height* 0.005,),
Row(
children: <Widget>[
Text(
'Status : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['status'],
style: TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
)
],
)
],
),
),
),
),
);
}
}
I try to increase the number if itemExtent but it's just increasing the height of card not increasing the gap. I just need to add some gap between each card so when they increase it will automatically show some gap between them. Also, I try to add margin in Container but its also not working
By default SliverFixedExtentList has no gaps between its items. Consider using SliverList instead. Also FYI the new keyword is optional and does not need to be used.
You can copy paste run full code below
You can use Padding and EdgeInsets.only(top: 30)
return Padding(
padding: EdgeInsets.only(top: 30),
child: Container(
child: Card(
working demo
full code
import 'package:flutter/material.dart';
class ClaimsScreen extends StatefulWidget {
#override
_ClaimsScreenState createState() => _ClaimsScreenState();
}
class _ClaimsScreenState extends State<ClaimsScreen> {
final List _claims = [
{
'av': '27,000',
'cv': '25,000',
'cqno': '3442121',
'status': 'CLAIM PAYMENT PRCESSED',
'cno': '00651211',
},
{
'av': '29,000',
'cv': '25,000',
'cqno': '3442121',
'status': 'CLAIM PAYMENT PRCESSED',
'cno': '00651211',
},
];
#override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Expanded(
child: Container(
child: new CustomScrollView(
scrollDirection: Axis.vertical,
slivers: <Widget>[
new SliverAppBar(
backgroundColor: Colors.white,
expandedHeight: statusBarHeight * 5,
flexibleSpace: new FlexibleSpaceBar(
title: const Text(
'Claims',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20,
color: Color(0xff00AEF0),
fontWeight: FontWeight.bold),
),
),
),
new SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 20.0),
sliver: new SliverFixedExtentList(
itemExtent: 150.0,
delegate: new SliverChildBuilderDelegate(
(builder, index) => BenefitList(index),
childCount: _claims.length),
)),
],
),
),
);
}
Widget BenefitList(int index) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Padding(
padding: EdgeInsets.only(top: 30),
child: Container(
child: Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 30,
child: Container(
child: Padding(
padding: const EdgeInsets.only(right: 10, left: 10, top: 10),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Approved Value : ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
Text(
_claims[index]['av'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff00AEF0)),
),
],
),
SizedBox(
height: height * 0.005,
),
Row(
children: <Widget>[
Text(
'Claim Value : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cv'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff00AEF0)),
),
],
),
SizedBox(
height: height * 0.005,
),
Row(
children: <Widget>[
Text(
'Claim No : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cno'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff00AEF0)),
),
],
),
Row(
children: <Widget>[
Text(
'Cheque Number : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cqno'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff00AEF0)),
),
],
),
SizedBox(
height: height * 0.005,
),
Row(
children: <Widget>[
Text(
'Status : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['status'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff00AEF0)),
)
],
)
],
),
),
),
),
),
);
}
}
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: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ClaimsScreen(),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

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;
} );