Here is my code
class _VariantsState extends State<Variants> {
List<VariantDetails> variantsList = [];
#override
void initState() {
super.initState();
variantsList.clear();
}
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
color: Colors.white,
elevation: 5,
margin:
EdgeInsets.only(top: 40.0, bottom: 40.0, left: 20.0, right: 20.0),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: 10, bottom: 5.0, left: 20.0, right: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Variants',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
IconButton(
onPressed: () {
setUpData();
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return SingleChildScrollView(
child: Container(
color: Colors.white,
margin: EdgeInsets.all(10.0),
child: Flexible(
child: Padding(
padding: EdgeInsets.only(
left: 10.0, right: 10.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Image.asset(
'assets/svg/barcode_reader.png',
height: 20.0,
width: 20.0,
),
Padding(
padding: EdgeInsets.only(
left: 20.0)),
Text(
'Add Goods',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 17.0),
)
],
),
Form(
key: _formKey,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
bottom: 20.0,
top: 40.0,
),
child: TextFormField(
// initialValue:
// variantDetails.name,
validator: (value) {
if (value
.trim()
.isEmpty) {
return 'Enter Name';
}
return null;
},
onChanged: (value) =>
variantDetails.name =
value,
decoration:
InputDecoration(
border:
OutlineInputBorder(),
hintText: 'Name',
hintStyle: TextStyle(
fontSize: 13.0),
hintMaxLines: 1,
contentPadding:
EdgeInsets.fromLTRB(
20.0,
8.0,
20.0,
8.0),
),
),
),
Padding(
padding: EdgeInsets.only(
bottom: 10.0,
),
child: TextFormField(
// initialValue:
// variantDetails
// .description,
onChanged: (value) =>
variantDetails
.description =
value,
validator: (value) {
if (value
.trim()
.isEmpty) {
return 'Enter Description';
}
return null;
},
decoration:
InputDecoration(
border:
OutlineInputBorder(),
hintText: 'Description',
hintStyle: TextStyle(
fontSize: 13.0),
hintMaxLines: 1,
contentPadding:
EdgeInsets.fromLTRB(
20.0,
15.0,
20.0,
15.0),
),
),
),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceAround,
children: <Widget>[
Expanded(
child: TextFormField(
// initialValue:
// variantDetails
// .price,
onChanged: (value) =>
variantDetails
.price =
value,
validator: (value) {
if (value
.trim()
.isEmpty) {
return 'Enter Price';
}
return null;
},
keyboardType:
TextInputType
.phone,
decoration:
InputDecoration(
border:
OutlineInputBorder(),
hintText: 'Price',
hintStyle:
TextStyle(
fontSize:
13.0),
hintMaxLines: 1,
contentPadding:
EdgeInsets
.fromLTRB(
20.0,
15.0,
20.0,
15.0),
),
),
),
Padding(
padding:
EdgeInsets.only(
left: 10.0)),
Expanded(
child: TextFormField(
// initialValue:
// variantDetails
// .nonTax,
decoration:
InputDecoration(
border:
OutlineInputBorder(),
hintText:
'Inclusive of GST',
hintStyle:
TextStyle(
fontSize:
13.0),
hintMaxLines: 1,
suffixIcon: Icon(Icons
.arrow_drop_down),
contentPadding:
EdgeInsets
.fromLTRB(
20.0,
15.0,
20.0,
15.0),
),
),
)
],
),
],
)),
Padding(
padding:
EdgeInsets.only(top: 10.0)),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Net Price',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 17.0),
),
Text(
'0',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 17.0),
)
],
),
Padding(
padding:
EdgeInsets.only(top: 10.0)),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Total',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 17.0),
),
Text(
'0',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 17.0),
)
],
),
Padding(
padding:
EdgeInsets.only(top: 10.0)),
ElevatedButton(
onPressed: () {
trySubmit(context);
},
child: Text('UPDATE'))
],
),
),
),
));
});
},
icon: Icon(Icons.add_circle_outline)),
],
),
),
Visibility(
visible: isVisible,
child: new ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return new ExpandableListView('Variant $index', ItemList);
},
itemCount: variantsList.length,
),
)
],
),
));
//Here is the expandable list where i am showing my listview
class ExpandableListView extends StatefulWidget {
final String title;
final List<VariantDetails> variantList;
ExpandableListView(this.title, this.variantList);
#override
_ExpandableListViewState createState() =>
new _ExpandableListViewState(this.title, this.variantList);
}
class _ExpandableListViewState extends State<ExpandableListView> {
bool expandFlag = false;
final String title;
final List<VariantDetails> variantList;
_ExpandableListViewState(this.title, this.variantList);
#override
Widget build(BuildContext context) {
return new Container(
margin: new EdgeInsets.symmetric(vertical: 1.0),
child: new Column(
children: <Widget>[
new Container(
color: Colors.white,
padding: new EdgeInsets.symmetric(horizontal: 20.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
widget.title,
style: new TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
new IconButton(
icon: new Container(
height: 20.0,
width: 20.0,
child: new Center(
child: new Icon(
expandFlag
? Icons.keyboard_arrow_up
: Icons.keyboard_arrow_down,
color: Colors.black,
size: 30.0,
),
),
),
onPressed: () {
setState(() {
expandFlag = !expandFlag;
});
}),
],
),
),
new ExpandableContainer(
expanded: expandFlag,
child: new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new Container(
child: Padding(
padding:
EdgeInsets.only(left: 20.0, right: 20.0, top: 10.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
'Edit Variants',
style: TextStyle(
fontSize: ScreenUtil().setSp(14),
fontFamily: 'poppins',
color: Colors.black),
),
Row(
children: <Widget>[
IconButton(
onPressed: () {
// Dismissible(key: Key(variantList[index]), child: child)
},
icon: Icon(Icons.delete)),
Icon(Icons.edit),
],
)
],
),
Padding(padding: EdgeInsets.only(top: 20)),
Row(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Name',
style: new TextStyle(
fontFamily: 'poppins',
fontSize: ScreenUtil().setSp(12),
color: Colors.black)),
Text('Price',
style: new TextStyle(
fontFamily: 'poppins',
fontSize: ScreenUtil().setSp(12),
color: Colors.black)),
Text('Description',
style: new TextStyle(
fontFamily: 'poppins',
fontSize: ScreenUtil().setSp(12),
color: Colors.black)),
Text('Price Type',
style: new TextStyle(
fontFamily: 'poppins',
fontSize: ScreenUtil().setSp(12),
color: Colors.black)),
Text('Non-taxable',
style: new TextStyle(
fontFamily: 'poppins',
fontSize: ScreenUtil().setSp(12),
color: Colors.black)),
Text('Code Type',
style: new TextStyle(
fontFamily: 'poppins',
fontSize: ScreenUtil().setSp(12),
color: Colors.black)),
Text('Stock Keeping Unit',
style: new TextStyle(
fontFamily: 'poppins',
fontSize: ScreenUtil().setSp(12),
color: Colors.black)),
Text('Net Price',
style: new TextStyle(
fontFamily: 'poppins',
fontSize: ScreenUtil().setSp(12),
color: Colors.black)),
Text('Tax',
style: new TextStyle(
fontFamily: 'poppins',
fontSize: ScreenUtil().setSp(12),
color: Colors.black)),
],
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(variantList[index].description),
Text(variantList[index].description),
Text(variantList[index].description),
Text(variantList[index].description),
Text(variantList[index].description),
Text(variantList[index].description),
Text(variantList[index].description),
Text(variantList[index].description),
Text(variantList[index].description),
],
))
],
),
],
),
));
},
itemCount: variantList.length,
))
],
),
);
}
}
I am implementing listview in my flutter application and whenever i add items in variantsList the new added item is reflecting in all the index of a list.
for example i am adding A
variantsList[0]='A'
Now i am adding another value B
The result which i am getting is
variantsList[0]='B',
variantsList[1]='B',
Expecting result
variantsList[0]='A',
variantsList[1]='B',
Thanks in advance
According to my understanding, you mean deleting similar list data?
you have two way:-
check data befor add to list if found use :-
if(!variantsList.contains('B'))
{//not found add data to list
variantsList.add('B');
}
2.Use end result toSet and then toList
variantsList = variantsList.toSet().toList();
Hope hlep you.
Related
This is my code
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// backgroundColor: Colors.white,
// automaticallyImplyLeading: false,
// ),
body: SingleChildScrollView(
child: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(top: 20, bottom: 20),
child: Padding(
padding: EdgeInsets.all(20),
child: Text(
"Dashboard",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
)),
decoration: BoxDecoration(color: const Color(0xff09325E)),
),
Positioned(
top: 85,
child: Container(
width: 470,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15.0)),
child: Container(
// height: 500,
// height: MediaQuery.of(context).size.height - 90,
child: Column(
children: [
SizedBox(
width: 400,
height: 100,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"Kasus Tertinggi",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
)),
Divider(color: Color(0xffD3D3D3)),
Column(children: [
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
])
],
),
),
))
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
// Navigator.of(context).pushNamed('/create');
}),
tooltip: 'Add Product',
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(
height: 60.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
iconSize: 30.0,
// padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
// Navigator.of(context).pushNamed('/home');
},
),
IconButton(
iconSize: 30.0,
// padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.person),
onPressed: () {
Navigator.of(context).pushNamed('/profile');
},
)
],
),
),
),
);
}
}
I have try using singlechild SingleChildScrollView but it's not working, how to make scrollable whole screen include appbar scaffold?
Use CustomScrollView, I did some refactoring to your code
import sliver_tools package for sliverStack
import 'package:sliver_tools/sliver_tools.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
// ignore: library_private_types_in_public_api
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
const SliverAppBar(
title: Text(
'AppBAR',
style: TextStyle(color: Colors.indigo),
),
),
SliverPadding(
padding: const EdgeInsets.only(bottom: 20),
sliver: SliverStack(
insetOnOverlap: false,
children: [
SliverToBoxAdapter(
child: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(top: 20, bottom: 20),
decoration: const BoxDecoration(color: Color(0xff09325E)),
child: const Padding(
padding: EdgeInsets.all(20),
child: Text(
"Dashboard",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
)),
),
),
SliverPositioned.fill(
top: 80,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(
offset: Offset(0, 4),
blurRadius: 8,
color: Color.fromRGBO(0, 0, 0, 0.1),
),
]),
),
),
SliverPositioned.fill(
top: 100,
child: SliverPadding(
padding: const EdgeInsets.fromLTRB(15, 8, 15, 0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) {
return Column(
children: [
Container(
margin: const EdgeInsets.only(top: 100),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: const [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: const [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
const Padding(
padding: EdgeInsets.only(left: 20, right: 20),
child: Divider(color: Color(0xffD3D3D3)),
),
],
);
},
childCount: 6,
),
),
),
),
],
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
Navigator.of(context).pushNamed('/create');
}),
backgroundColor: Colors.indigo,
tooltip: 'Add Product',
child: const Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(
height: 60.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
//Navigator.of(context).pushNamed('/home');
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.person),
onPressed: () {
// Navigator.of(context).pushNamed('/profile');
},
)
],
),
),
),
);
}
}
I have a Row that contains a Text that shows a name based on RadioListTile in a btnSheetShow that I clicked.
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () => btnSheetShow(memberController!.memberList),
child: Text(
merchantName,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Color(0xff31708F)),
),
),
SizedBox(
width: 5,
),
valMember == -1
? Text('')
: transactionLimit(limit: '0/2'),
Icon(
Icons.expand_more,
color: Color(0xff31708F),
),
],
),
here's the btnSheetShow that contains RadioListTile(s)
Future btnSheetShow(List<SalesMemberList> memberList) {
selectMerchant({required int index}) {
setState(() =>
merchantName = "${memberList[index].firstName} ${memberList[index].lastName}");
}
return showModalBottomSheet(
isScrollControlled: false,
barrierColor: Color(0xff000000).withOpacity(0.15),
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
// isDismissible: false,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, StateSetter setState) {
return Container(
height: 310,
padding: EdgeInsets.fromLTRB(18, 17, 18, 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Pilih Pedagang",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xff1D6382)),
),
Text(
"Lihat Semua",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
],
),
Container(
padding: EdgeInsets.only(top: 14),
height: 200,
child: ListView.builder(
itemCount: memberList.length,
itemBuilder: (context, index) => Padding(
padding: EdgeInsets.fromLTRB(0, 0, 15, 0),
child: RadioListTile<int>(
contentPadding: EdgeInsets.only(left: -25),
activeColor: Color(0xff799FB2),
dense: true,
value: memberList[index].memberId ?? 0,
title: Text(
"${memberList[index].firstName} ${memberList[index].lastName}",
style: TextStyle(
fontSize: 14,
color: Color(0xff000000),
fontWeight: FontWeight.w500),
),
subtitle: Text(
// Ini adalah limit nilai transaksi yang bisa dilakukan oleh pedagang
"Limit: ${GlobalFunctions().rupiah(1000000)}/ ${GlobalFunctions().rupiah(3000000)}",
style: TextStyle(
fontSize: 10,
color: Color(0xff7F8A8E),
fontWeight: FontWeight.w500),
),
secondary: transactionLimit(limit: '0/2'),
groupValue: valMember,
onChanged: (value) {
Provider.of<CartController>(context, listen: false).userId =
value ?? 0;
setState(() => valMember = value as int);
selectMerchant(index: index);
},
// selected: true,
),
),
),
),
Spacer(),
Center(
child: Container(
margin: EdgeInsets.only(top: 10),
width: MediaQuery.of(context).size.width / 1.4,
decoration: BoxDecoration(
color: Color(0xff007051),
borderRadius: BorderRadius.circular(4)),
height: 40,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Color(0xff31708F),
textStyle: TextStyle(color: Colors.white)),
onPressed: () {
Navigator.pop(context);
},
child: Text(
"Pilih",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.w500),
)),
),
),
],
),
);
});
});
}
the code works just fine, it works according to my will. Here's some documentations.
here's the video that shows that I can't save the state
The question is "How do I save the state? Because when I leave to another page, the state turns back to "Pilih Pedagang", not the name that I picked earlier"
I have a cart page in my app that contains a list of items.
I build this list with a ListView.builder. The content it returns contains a data from API.
Here's the visual of it
and here's my code
ListView.builder(
itemCount: cartController.cartList.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Container(
width: MediaQuery
.of(context)
.size
.width,
decoration: BoxDecoration(
color: Color(0xffF1F5F9),
boxShadow: <BoxShadow>[
BoxShadow(
color: Color(0xff7D7D7D).withOpacity(0.6),
blurRadius: 4.0,
offset: Offset(2, 3))
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 6, 10, 6),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 40,
width: 40,
child: CachedNetworkImage(
useOldImageOnUrlChange: false,
imageUrl:
'${cartController.cartList.values.toList() [index]
.image}',
placeholder: (context, url) =>
Stack(
alignment: Alignment.center,
children: [
Image.asset(
Constants.loading,
height: 30,
width: 30,
),
],
),
errorWidget: (context, url, error) =>
Image.asset(
"assets/logo/carisayur_empty.png",
height: 20,
width: 20,
),
)),
Padding(
padding: const EdgeInsets.only(left: 14.0, top: 12),
child: Text(
'${cartController.cartList.values.toList() [index]
.name}',
maxLines: 2,
style: TextStyle(
fontSize: 12,
color: Color(0xff31708F),
fontWeight: FontWeight.w500),
),
),
Spacer(),
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {
cartController.cartList.remove(index);
},
icon: Icon(
Icons.close,
color: Color(0xff31708F),
size: 20,
),
),
// Image.asset("assets/icons/cancel.png"),
],
),
),
Divider(
thickness: 0.8,
color: Color(0xffE1E1E1),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 70,
padding: const EdgeInsets.only(left: 8.0),
child: Text(
"Kemasan",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
),
Container(
width: MediaQuery
.of(context)
.size
.width / 2,
child: Text(
"Jumlah",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
),
Spacer(),
Padding(
padding: const EdgeInsets.only(right: 20),
child: Text(
"Harga",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 70,
child: Text(
'${cartController.cartList.values.toList() [index]
.kemasan}',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w600,
color: Color(0xff7F8A8E)),
),
),
Container(
width: MediaQuery
.of(context)
.size
.width / 2,
child: Text(
"1",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w500,
color: Color(0xff7F8A8E)),
),
),
Spacer(),
Padding(
padding: const EdgeInsets.only(right: 20),
child: Text(
"${GlobalFunctions().rupiah(
cartController.cartList.values.toList() [index]
.price ?? 0)}",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w500,
color: Color(0xff000000))),
)
],
),
Divider(
thickness: 0.8,
color: Color(0xffE1E1E1),
),
Padding(
padding: const EdgeInsets.fromLTRB(10, 6, 18, 6),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(left: 10, right: 5.0),
child: Image.asset("assets/icons/edit.png"),
),
Text(
"Edit",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
Padding(
padding: EdgeInsets.only(left: 60, right: 5),
child:
InkWell(
onTap: () {
setState(() {
isTap = !isTap;
});
if (isTap == true) {
favAlert(
'Barang berhasil \n'
'ditambahkan \n'
'ke Favorit',
);
} else {
favAlert(
'Favorit dihapus'
);
}
},
// padding: EdgeInsets.only(right: 35, top: 3),
child: Container(
child: isTap == false
? Icon(Icons.favorite_border, size: 14,)
: Icon(
Icons.favorite, color: Colors.red, size: 14,),
),
),
),
Text(
"Favorit",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
Spacer(),
Text(
"Total",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: Color(0xff000000)),
),
Padding(
padding: const EdgeInsets.only(left: 16),
child:
Text(
"${GlobalFunctions().rupiah(
cartController.cartList.values.toList() [index]
.price ?? 0)}",
style: TextStyle(
fontSize: 12,
color: Color(0xff31708F),
fontWeight: FontWeight.w500),
),
)
],
),
),
],
),
),
);
}),
if I print the cartController.cartList and cartController.cartList.length, it will print I/flutter ( 5474): {2907: Instance of 'UpdateCartProductResponse', 2916: Instance of 'UpdateCartProductResponse', 2820: Instance of 'UpdateCartProductResponse'} and 3
my problem is I can't remove one of the item with an IconButton that I made there.
How can I remove an item?
I would like to know if it is possible to have card widgets as the items in a dropdownmenu button in flutter.
I have tried, but I haven't managed to make the cards visible in the dropdown.
Below are the codes
The class for the cards
class AccountContainer extends StatefulWidget {
#override
_AccountContainerState createState() => _AccountContainerState();
}
class _AccountContainerState extends State<AccountContainer> {
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(15.0),
margin: EdgeInsets.symmetric(vertical: 15.0),
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey[300],
),
borderRadius: BorderRadius.circular(25.0)
),
child: Column(
children: <Widget>[
Card(
margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
child: Container(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Saving Account',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),),
SizedBox(height: 5.0,),
Text('Savings XXX-X-XX563-9',
style: TextStyle(
fontSize: 10.0,
color: Colors.grey[900],
),),
SizedBox(height: 15.0,),
Container(
child: Row(
children: <Widget>[
RichText(
text: TextSpan(
text: '56,302.56',
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
children: <TextSpan> [
TextSpan(text: 'THB',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold
),),
],
),
),
],
),
),
],
),
),
),
Card(
margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
child: Container(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Salary Account 2',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),),
SizedBox(height: 5.0,),
Text('Savings XXX-X-XX563-9',
style: TextStyle(
fontSize: 10.0,
color: Colors.grey[900],
),),
SizedBox(height: 15.0,),
Container(
child: Row(
children: <Widget>[
RichText(
text: TextSpan(
text: '89,302.56',
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
children: <TextSpan> [
TextSpan(text: 'THB',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold
),),
],
),
),
],
),
),
],
),
),
),
],
),
);
}
}
Calling the card class
class AccountSelections extends StatefulWidget {
#override
_AccountSelectionsState createState() => _AccountSelectionsState();
}
class _AccountSelectionsState extends State<AccountSelections> {
int accountSelected = 0;
var accountNames;
#override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints.expand(width: 419.0, height: 150.0),
child:
DropdownButton(
icon: Icon(Icons.keyboard_arrow_down,
color: Colors.blue[500],),
isExpanded: true,
value: accountSelected,
onChanged: (value) {
setState(() {
accountSelected = value;
});
},
items: accountNames.map((value) {
return DropdownMenuItem(
value: AccountContainer(),
child: Text(value),
);
})?.toList(),
),
);
}
}
Wrap you Text(value) widget with card and give elevation to card
This is my very first question if I make a faux pas kindly correct me :)
Coding in : Android Studio
Language is: Flutter/Dart
Question: How do I display the error message that is displayed just under the textformfield in a separate toast/snack bar/flush bar ?
Video-Link of the issue : https://youtu.be/4hJtR11o1GU
Code:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
//import 'package:video_player/video_player.dart';
class LoginForm extends StatefulWidget {
LoginForm(this.submitFn, this.isLoading);
final bool isLoading;
final void Function(
String email,
String password,
String mobile,
bool isLogin,
BuildContext ctx,
) submitFn;
#override
_LoginFormState createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm> {
final _formKey = GlobalKey<FormState>();
var _isLogin = true;
String _userEmail = '';
String _userPassword = '';
String _userMobile = '';
void _trySubmit() {
final isValid = _formKey.currentState.validate();
FocusScope.of(context).unfocus();
if (isValid) {
_formKey.currentState.save();
widget.submitFn(
_userEmail.trim(),
_userPassword.trim(),
_userMobile.trim(),
_isLogin,
context
);
}
}
Widget _buildEmailTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: 50.0,
child: TextFormField(
key: ValueKey('email'),
validator: (value) { if (value.isEmpty || !value.contains('#')) {return
'enter a valid email';} return null;},
keyboardType: TextInputType.emailAddress,
style: TextStyle(color: Colors.white, fontFamily: 'OpenSans',),
decoration: InputDecoration(
isDense: true,
hintText: 'username#xyz.com',
hintStyle: TextStyle(color: Colors.white, ),
contentPadding: EdgeInsets.only(top: 14.0),
errorMaxLines: 1,
errorText: 'Null',
errorStyle: TextStyle(
color: Colors.transparent,
fontSize: 0,
),
prefixIcon: Icon(
Icons.email,
color: Colors.orange ,
),
),
onSaved:(value){_userEmail = value;},
),
),
],
);
}
Widget _buildMobileTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: 50.0,
child: TextFormField(
key: ValueKey('mobile'),
validator: (value) { if (value.isEmpty || !value.contains('91') || value.length > 12 || value.length < 12) {
return '';} return null;},
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
errorMaxLines: 1,
errorText: 'Null',
errorStyle: TextStyle(
color: Colors.transparent,
fontSize: 0,
),
hintText: '91 xxx-xxx-xxxx',
hintStyle: TextStyle(color: Colors.white, ),
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.phone_android,
color: Colors.orange,
),
),
onSaved:(value){_userMobile = value;},
),
),
],
);
}
Widget _buildPasswordTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
height: 60.0,
child: TextFormField(
key: ValueKey('password'),
validator: (value) {if (value.isEmpty || value.length < 7) {
return '';} return null;},
obscureText: true,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
errorMaxLines: 1,
errorText: 'Null',
errorStyle: TextStyle(
color: Colors.transparent,
fontSize: 0,
),
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.lock,
color: Colors.orange,
),
hintText: 'Password',
hintStyle: TextStyle(color: Colors.white, )
),
onSaved:(value){
_userPassword = value;
},
),
),
],
);
}
Widget _buildLoginBtn() {
return Container(
padding: EdgeInsets.symmetric(vertical: 25.0),
width: double.infinity,
child: RaisedButton(
onPressed: _trySubmit,
elevation: 5.0,
padding: EdgeInsets.all(15.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
color: Colors.white,
child: Text(_isLogin ? 'Login In' : 'Sign Up',
style: TextStyle(
color: Colors.orange,
letterSpacing: 1.5,
fontSize: 18.0,
fontWeight: FontWeight.bold,
fontFamily: 'OpenSans',
),
),
),
);
}
Widget _buildSignUpWithText() {
return Column(
children: <Widget>[
FlatButton(
textColor: Theme.of(context).primaryColor,
child: Text(_isLogin ? 'Sign Up With An Email Account' : 'I Already Have An Account',
style: TextStyle(
color: Colors.orange,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
onPressed: () {
setState(() {
_isLogin = !_isLogin;
});
},
),
SizedBox(height: 20.0),
Text(
'- OR -',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
],
);
}
Widget _buildSocialBtn(Function onTap, AssetImage logo) {
return GestureDetector(
onTap: (){
setState(() {
});
_isLogin = !_isLogin;
},
child: Container(
height: 60.0,
width: 60.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 2),
blurRadius: 6.0,
),
],
image: DecorationImage(
image: logo,
),
),
),
);
}
Widget _buildSocialBtnRow() {
return Padding(
padding: EdgeInsets.symmetric(vertical: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_buildSocialBtn(
() => print('Sign Up with Google'),
AssetImage(
'assets/logos/google.jpg',
),
),
],
),
);
}
Widget _buildHomeChefSignUp() {
return GestureDetector(onTap: () => print('Chef\'s Sign Up Process'),
child: RichText(
text: TextSpan(
children: [
TextSpan(text: 'Passionate About Cooking ? ',
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.w400,
),),
TextSpan(text: 'Join Us',
style: TextStyle(
color: Colors.orange,
fontSize: 12.0,
fontWeight: FontWeight.w400,
),),
])),
);
}
#override
Widget build(BuildContext context) {
//Keeps Back Ground Fixed even with Keyboard Opened
return Scaffold(resizeToAvoidBottomPadding: false,
//Top Status Bar Overlay Dark or Light
body: AnnotatedRegion<SystemUiOverlayStyle>(value: SystemUiOverlayStyle.light,
child: GestureDetector(onTap: ()=>FocusScope.of(context).unfocus(),
//Main Tree holding All the necessary Containers
child: Stack(children: <Widget>[
//Holds the background Video
Container(),
//Creates a black overlay to the background
Container(
height: double.infinity,
color: Colors.black.withAlpha(120),),
//Hold the Login Form
Container(
height: double.infinity,
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 100.0,),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Mother\'s Kitchen',
style: TextStyle(
color: Colors.orange,
fontFamily: 'MomsFonts',
fontSize: 40.0,
fontWeight: FontWeight.bold,),),
SizedBox(height: 10.0),
Text(
'Mumbai\'s First & Only Home Cooked Delivery Service',
style: TextStyle(
color: Colors.orange,
fontFamily: 'OpenSans',
fontSize: 12.0,
fontWeight: FontWeight.bold,),),
SizedBox(height: 30.0),
_buildEmailTF(),
SizedBox(height: 10.0,),
if(!_isLogin)
_buildMobileTF(),
_buildPasswordTF(),
if(widget.isLoading)
Column(
children: <Widget>[
SizedBox(height: 10.0),
CircularProgressIndicator(),
],
),
if(!widget.isLoading)
_buildLoginBtn(),
_buildSignUpWithText(),
_buildSocialBtnRow(),
_buildHomeChefSignUp(),
],),
),),
),],
),),
),);
}
}