Related
i made a code which opens bottomSheet. Inside the bottomSheet there are inputs that can be added and subtracted by pressing a button.
but the changes that occur are not in accordance with what I expected. changes are delayed not directly.
Widget buildBottomSheet(BuildContext context) => makeDismissible(
child: DraggableScrollableSheet(
initialChildSize: 0.6,
minChildSize: 0.5,
maxChildSize: 0.6,
builder: (_, controller) => Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
padding: const EdgeInsets.only(top: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Center(child: Icon(Icons.horizontal_rule)),
ListTile(
title: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
ClipRRect(
borderRadius:
const BorderRadius.all(Radius.circular(20)),
child: Image.network(
widget.productList.image,
width: 125,
height: 125,
fit: BoxFit.cover,
),
),
SizedBox(
height: 125,
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (widget.productList.discount == 0)
Text(
CurrencyFormat.convertToIdr(
widget.productList.price, 0),
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18),
),
if (widget.productList.discount >= 1)
Text(
CurrencyFormat.convertToIdr(
widget.productList.price -
(widget.productList.discount /
100) *
widget.productList.price,
0),
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18),
),
if (widget.productList.discount >= 1)
Row(
children: [
Text(
"${widget.productList.discount}% ",
style: const TextStyle(
color: Colors.red,
fontWeight: FontWeight.w600),
),
Text(
CurrencyFormat.convertToIdr(
widget.productList.price, 0),
style: const TextStyle(
color: Colors.black38,
fontWeight: FontWeight.w600,
decoration:
TextDecoration.lineThrough),
)
],
),
Text("Stock : ${widget.productList.stock}")
],
),
),
),
],
),
],
),
),
// minLeadingWidth: 125,
trailing: SizedBox(
child: IconButton(
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.close)),
),
),
const SizedBox(
height: 10,
),
const Divider(
indent: 15,
endIndent: 15,
color: Colors.black,
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Column(
children: const [
Text(
"Pilihan Varian :",
style: TextStyle(fontWeight: FontWeight.w800),
),
],
),
),
const Spacer(),
SizedBox(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 15, horizontal: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _minCounter,
clipBehavior: Clip.antiAlias,
style: ElevatedButton.styleFrom(
shadowColor: Colors.white,
primary: Colors.black,
padding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 0),
),
child: const Icon(Icons.remove),
),
Text('${widget.productList.minbuy + counter} '),
// const SizedBox(
// width: 50,
// height: 35,
// child: TextField(
// textAlign: TextAlign.center,
// decoration: InputDecoration(
// border: OutlineInputBorder(
// borderSide:
// BorderSide(color: Colors.black)),
// ),
// ),
// ),
ElevatedButton(
onPressed: _incrementCounter,
clipBehavior: Clip.antiAlias,
style: ElevatedButton.styleFrom(
shadowColor: Colors.white,
primary: Colors.black,
padding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 0),
),
child: const Icon(Icons.add),
),
],
),
ElevatedButton.icon(
icon: const Icon(
Icons.add,
color: Colors.amber,
size: 14,
),
label: const Text(
"Keranjang",
style: TextStyle(color: Colors.amber),
),
clipBehavior: Clip.antiAlias,
onPressed: () {},
style: ElevatedButton.styleFrom(
side: const BorderSide(color: Colors.amber),
shadowColor: Colors.white,
primary: Colors.white,
padding: const EdgeInsets.symmetric(
horizontal: 15, vertical: 10),
),
),
],
),
),
),
],
),
),
),
);
for full code : https://github.com/nazhoir/travel-app/blob/main/lib/views/shop/product_detail.dart
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"
How could i add iosstyle datepicker in flutter and set it into a textfield. I tried few things but failed..getting android style datepicker and setting it up has many solutions but ios style datepicker doesnt have much solutions..Thanks for the help
use this
void _showIOS_DatePicker(ctx) {
showCupertinoModalPopup(
context: ctx,
builder: (_) => Container(
height: 190,
color: Color.fromARGB(255, 255, 255, 255),
child: Column(
children: [
Container(
height: 180,
child: CupertinoDatePicker(
initialDateTime: DateTime.now(),
onDateTimeChanged: (val) {
setState(() {
dateSelected = val.toString();
});
}),
),
],
),
));
}
flutter_datetime_picker:
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
String _date = "Date of Birth";
Padding(padding: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 16.0),
child: Column(
children: <Widget>[
SizedBox(
height: 60.0,
child: FlatButton(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.orangeAccent
),
borderRadius: BorderRadius.circular(5.0)),
onPressed: () {
DatePicker.showDatePicker(context,
theme: DatePickerTheme(
containerHeight: 210.0,
),
showTitleActions: true,
minTime: DateTime(1900, 1, 1),
maxTime: DateTime.now(), onConfirm: (date) {
print('confirm $date');
_date = '${date.day}/${date.month}/${date.year}';
setState(() {});
}, currentTime: DateTime.now(), locale: LocaleType.en);
},
child: Container(
alignment: Alignment.center,
height: 50.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Icon(
Icons.cake,
color: Colors.black54,
),
Text(
" $_date",
style: TextStyle(
color: Colors.black,
fontSize: 17.0,
fontStyle: FontStyle.normal),
),
],
),
)
],
),
Icon(Icons.date_range,color: Colors.black45,)
],
),
),
color: Colors.white,
),
),
// datetime()
],
),
),
im new to Flutter. I have started learning a few days ago and am trying to grasp the concept of Rows and Columns.
I made a simple Page like this.
To explain my code I first make a Column to put everything in.
Then i use a Row for the TopBar, and then another Row to put the things into the body, so that i can put a Column in the center of the Page, with a bit of space on both sides of it. I then pack Text and Button in a Column and insert it into the Column in the Middle of the Page.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: MainPage(),
));
class MainPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
Color Color1 = const Color.fromRGBO(204, 126, 185, 100);
Color Color2 = const Color.fromRGBO(140, 235, 203, 100);
Color Color3 = const Color.fromRGBO(227, 225, 204, 100);
Color Color4 = const Color.fromRGBO(89, 130, 145, 100);
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
child: SizedBox(
child: Image.asset('assets/MenuIcon.png'),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
child: SizedBox(
child: Image.asset('assets/SearchIcon.png'),
),
),
],
),
Divider(height: 50,),
Expanded(
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 5,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Erwachsen werden",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color1,
),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Glückliches Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color2,
),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Ab in das Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color3,
),
)
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Alleine Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color4,
),
),
),
],
),
],
),
),
Expanded(
flex:1,
child: Container(),
),
],
),
),
],
),
),
);
}
}
I feel like there is a lot of unnecessary Coding, but i can't seem to be able to improve it, with it working properly.
Can anybody Help improve my code?
Simply what i want to achieve is a Column in the middle of the body with margin to the left and right of the screen, without a million lines of code.
Scaffold by default has an parameter for AppBar() use that for your app bar
and as per your layout I will suggest to use ListView() instead of Column()
using Listview will automatically scroll your page if length of your page extends
and also has an parameter as padding using which you can add space on your left and right side
refer below mentioned code structure
Scaffold(
appbar: AppBar(),
body: ListView(
padding: EdgeInsets.only(left:12.0,right:12.0),
children: <Widget>[
//your list of widgets here
],
)
)
Try this:
Code example
Center(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
height: 400,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Material(
color: Colors.transparent,
child: Image.asset(
"assets/images/logo.png",
height: 100,
width: 200,
),
),
//email
TextFormField(
style: TextStyle(
fontFamily: "Light",
color: Theme.of(context).primaryColor,
),
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
cursorColor: Theme.of(context).primaryColor,
decoration: InputDecoration(
labelText: 'Username',
filled: true,
fillColor: Colors.white,
),
),
TextFormField(
style: TextStyle(
fontFamily: "Light",
color: Theme.of(context).primaryColor,
),
keyboardType: TextInputType.visiblePassword,
textInputAction: TextInputAction.done,
cursorColor: Theme.of(context).primaryColor,
obscureText: passwordVisible,
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
filled: true,
fillColor: Colors.white,
onPressed: () {},
),
),
),
Container(
child: RaisedButton(
onPressed: () {},
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: "Light",
),
),
),
),
],
)),
)
I removed unnecessary code ! It may help you !
Color color1 = const Color.fromRGBO(204, 126, 185, 100);
Color color2 = const Color.fromRGBO(140, 235, 203, 100);
Color color3 = const Color.fromRGBO(227, 225, 204, 100);
Color color4 = const Color.fromRGBO(89, 130, 145, 100);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
child: SizedBox(
// child: Image.asset('assets/MenuIcon.png'),
child:Icon(Icons.menu,color:Colors.black)
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
child: SizedBox(
// child: Image.asset('assets/SearchIcon.png')
child:Icon(Icons.search,color:Colors.black)
),
),
],
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:50,right:50),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize:MainAxisSize.min,
children: <Widget>[
Text(
"Erwachsen werden",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color1,
child: Text('Button')),
),
),
SizedBox(height: 10.0),
Text(
"Glückliches Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color2,
child: Text('Button')),
),
),
SizedBox(height: 10.0),
Text(
"Ab in das Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color3,
child: Text('Button')),
)),
SizedBox(height: 10.0),
Text(
"Alleine Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color4,
child: Text('Button')),
),
),
],
),
),
),
],
),
),
);
}
}
I'm having a problem with handling texts when they overflow. I've tried overflow: TextOverflow.xxxx ,Expanded and Flexible but it's still doesn't work. Can anyone help me with this situation?
class _FeaturedCardState extends State<FeaturedCard>{
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
showToast(widget.name, context);
},
child: Padding(
padding: EdgeInsets.only(top: 5.0),
child: Container(
height: MediaQuery.of(context).size.height / 9,
width: MediaQuery.of(context).size.width,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
elevation: 3.0,
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
child: CircleAvatar(
radius: 20,
backgroundImage: AssetImage(widget.img),
backgroundColor: Colors.transparent,
),
),
SizedBox(width: 10),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 3.0, 3.0, 3.0),
child: Wrap(
direction: Axis.vertical,
children: <Widget>[
SizedBox(height: 2),
Text(
widget.name,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 15,
color: Colors.blueGrey,
),
),
SizedBox(height: 3),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.attach_money,
size: 11,
),
Text(
widget.salary,
style: TextStyle(
fontSize: 10,
fontFamily: 'Montserrat',
color: Colors.blue[300]
),
)
],
),
SizedBox(height: 3),
Text( // This is the text that overflows
widget.desc,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12,
),
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
)
],
),
),
),
),
);
}
I've searched a lot of atricles and it still doesn't help. If anyone could come up with a solution for this that'll be really great. Any help would be appreciated, thank you.
You can try this,
class _FeaturedCardState extends State<FeaturedCard> {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(5.0),
child: Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 3.0,
child: InkWell(
borderRadius: BorderRadius.circular(5.0),
onTap: (){
showToast(widget.name, context);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 20,
backgroundImage: AssetImage(widget.img),
backgroundColor: Colors.transparent,
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
widget.name,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 15,
color: Colors.blueGrey,
),
),
const SizedBox(height: 3),
Text(
"\u0024${widget.salary}", // Char code for $ symbol "\u0024"
style: TextStyle(
fontSize: 10,
fontFamily: 'Montserrat',
color: Colors.blue[300],
),
),
const SizedBox(height: 3),
Text(
// This is the text that overflows
widget.desc,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12,
),
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
)
],
),
),
),
),
);
}
}
Add your Text in Container and set static width for Container
for example:
Container(
width: MediaQuery.of(context).size.width*0.7,
child: Text( "xxxxx",),
),