Related
This is the expected screen and the container will collapse and expand based on the text displayed and should only occupy the space left out by placing other icons.
But see the flutter implemented screen.
The icons are moved to the right on container expansion and shows overflowed pixel error.
My code
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: const Icon(
Icons.menu,
color: Colors.black,
size: 34,
),
onPressed: () {},
),
//container section
GestureDetector(
child: Container(
margin: const EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.red.shade100,
borderRadius: BorderRadius.circular(40.0)),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Align(
alignment: Alignment.centerLeft,
child: Row(children: const <Widget>[
Text(
"Content is here",
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black54,
fontSize: 19.0,
fontWeight: FontWeight.bold),
),
Icon(
Icons.arrow_drop_down,
color: Colors.black,
),
]),
),
),
),
onTap: () {
//todo show bottom sheet dialog here.
},
),
const Spacer(), // I just added one line
IconButton(
icon: Image.asset('assets/images/ic_scan.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_notification.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_search.png'),
iconSize: 20,
onPressed: () {},
),
],
),
);
Remove the spacer and add the dropdown in a flexible widget
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: const Icon(
Icons.menu,
color: Colors.black,
size: 34,
),
onPressed: () {},
),
Flexible(//<-------Flexible
child: GestureDetector(
child: Container(
margin: const EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.red.shade100,
borderRadius: BorderRadius.circular(40.0)),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Align(
alignment: Alignment.centerLeft,
child: Row(
children: const <Widget>[
Flexible(//<-------Flexible
child: Text(
"Content is here",
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black54,
fontSize: 19.0,
fontWeight: FontWeight.bold),
),
),
Icon(
Icons.arrow_drop_down,
color: Colors.black,
),
]),
),
),
),
onTap: () {
//todo show bottom sheet dialog here.
},
),
),
//Spacer() //<--------remove this
IconButton(
icon: Image.asset('assets/images/ic_scan.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_notification.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_search.png'),
iconSize: 20,
onPressed: () {},
),
],
),
);
I'm new to Flutter and trying to customize the AlertDialog widget of the material dart.
There are ways to set the background color for the whole dialog, is there a way to set the background color only to certain part of the dialog, from the attached picture the background color for the actions section of dialog should be different.
Try below code hope its helpful to you.
Your Widget to call alrtDialog
TextButton(
onPressed: () {
showDataAlert();
},
child: Text(
'Pressed',
),
),
Your Alert Dialog function
showDataAlert() {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(
20.0,
),
),
),
contentPadding: EdgeInsets.only(
top: 10.0,
),
title: Text(
"Your Title Here",
style: TextStyle(fontSize: 24.0),
),
content: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"Your Contents Here",
style: TextStyle(fontSize: 24.0),
),
SizedBox(
height: 5.0,
),
Container(
decoration: BoxDecoration(
color: Colors.grey.shade500,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0)),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
style: ElevatedButton.styleFrom(
primary: Colors.white,
),
child: Text(
"Cancel",
style: TextStyle(
color: Colors.black,
),
),
),
SizedBox(
width: 10,
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
style: ElevatedButton.styleFrom(
primary: Colors.black,
),
child: Text(
"Confirm",
),
),
],
),
)),
],
),
),
);
});
}
Refer ElevatedButton here
Refer AlertDialog here
Your Result Screen->
AlertDialog has backgroundColor parameter and takes Color that will apply to the full background.
title, actions takes widget can be configured the way you want.
AlertDialog(
backgroundColor: Colors.pink,
content: Text("Message"),
buttonPadding: EdgeInsets.all(13),
actions: [
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
child: Text("Cancel"),
),
ElevatedButton(
onPressed: () {},
child: Text("Confirm"),
),
],
);
I'm using ElevatedButton as action button, and you can choose anything and configure it. While everything is widget, you can place the way you want. You can also override the themeData.
More about
AlertDialog-class.
ElevatedButton
themes
ElevatedButton config on SO
You can create custom dialog.
like this.
Dialog errorDialog = Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), //this right here
child: Container(
height: 200.0,
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(15.0),
child: Text('Cool', style: TextStyle(color: Colors.red),),
),
Padding(
padding: EdgeInsets.all(15.0),
child: Text('Awesome', style: TextStyle(color: Colors.red),),
),
Padding(padding: EdgeInsets.only(top: 50.0)),
TextButton(onPressed: () {
Navigator.of(context).pop();
},
child: Text('Done!', style: TextStyle(color: Colors.purple, fontSize: 18.0),))
],
),
),
);
and show dialog
showDialog(context: context, builder: (BuildContext context) => errorDialog);}
https://i.stack.imgur.com/Mz3YL.png
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
//this right here
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
children: [
Padding(
padding: EdgeInsets.all(15.0),
child: Text(
'Cool',
style: TextStyle(color: Colors.red),
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: Text(
'Awesome',
style: TextStyle(color: Colors.red),
),
),
Padding(padding: EdgeInsets.only(top: 50.0)),
],
),
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(12), bottomRight: Radius.circular(12))
),
width: double.maxFinite,
child: TextButton(
onPressed: () {},
child: Text(
'Done!',
style: TextStyle(color: Colors.purple, fontSize: 18.0),
)),
)
],
),
); ```
[1]: https://i.stack.imgur.com/Mz3YL.png
I have a few buttons and I need to set the colour of the card view as per the button click.
Basically, I'm adding a theme to my post, so on the preview page, I need to allow the user to select the colour of their choice by clicking the button.
Screenshot:
CardView Page with Buttons
Button Code:
Padding(
padding: const EdgeInsets.only(top: 10),
child: Row(
children: [
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.yellow,
shape: CircleBorder(),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.orange,
shape: CircleBorder(),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.brown,
shape: CircleBorder(),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.blue,
shape: CircleBorder(),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.green,
shape: CircleBorder(),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.black,
shape: CircleBorder(),
),
),
],
),
),
Cardview Code:
Card(
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: MyColors.black, width: 1.5),
borderRadius: BorderRadius.circular(10)),
child: Column(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundImage:
CachedNetworkImageProvider(
_profileurl),
),
),
Text(_username),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Obx(
() => Text(
pollDataController1.question.value,
style: TextType.boldHeading,
),
),
),
Obx(
() => ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
(pollImageController.imageDisplay.value),
width: 320,
height: 170,
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0),
child: Column(
children: [
Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Obx(
() => Text(
pollDataController1
.op1.value +
" ",
style: TextStyle(
color: MyColors.offBlack,
fontSize: 16.0,
),
),
),
Obx(
() => Text(pollDataController1
.op1Emoji.value),
),
SizedBox(
width: 25.0,
),
Obx(
() => Text(
pollDataController1
.op2.value +
" ",
style: TextStyle(
color: MyColors.offBlack,
fontSize: 16.0,
),
),
),
Obx(
() => Text(pollDataController1
.op2Emoji.value),
),
],
),
],
),
SizedBox(height: 13.0),
Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Obx(
() => Text(
pollDataController1
.op3.value +
" ",
style: TextStyle(
color: MyColors.offBlack,
fontSize: 16.0,
),
),
),
Obx(
() => Text(pollDataController1
.op3Emoji.value),
),
SizedBox(
width: 25.0,
),
Obx(
() => Text(
pollDataController1
.op4.value +
" ",
style: TextStyle(
color: MyColors.offBlack,
fontSize: 16.0,
),
),
),
Obx(
() => Text(pollDataController1
.op4Emoji.value),
),
],
),
],
),
],
),
),
],
),
),
),
You can use a global variable for color and a function to change the color on tapping each circle button.
So an example would be:
Color cardBackgroundColor = Colors.white;
void changeColor(Color changeToColor) {
setState(() {
cardBackgroundColor = changeToColor;
});
}
then in your button code use it like this:
Expanded(
child: MaterialButton(
onPressed: changeColor(Colors.yellow),
color: Colors.yellow,
shape: CircleBorder(),
),
),
and in the Cardview Code change it to:
Card(child: Container(
decoration: BoxDecoration(
color: cardBackgroundColor,
border: Border.all(
color: MyColors.black, width: 1.5),
borderRadius: BorderRadius.circular(10)),
This would be the quickest way to do it, although it might not be the cleanest.
Im trying to have a navigation bar with a slider and some buttons on a bottom app bar, but i found that when i initially added in my slider widget it caused my BottomAppBar to go to the top of my screen and so without the use of main axis alignment it will not remain at the bottom. is there a reason that the slider or my layout causes such an issue ?
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Title"),
backgroundColor: Colors.black87,
centerTitle: true,
actions: <Widget>[
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.arrow_back),
shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
),
//Title( color: Colors.black,),
// title:Text("Title_Data"),backgroundColor: Colors.blueAccent,centerTitle: false,
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(
Icons.bookmark_border_outlined,
size: 25,
),
shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
),
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.workspaces_filled),
shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
),
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.brightness_4_outlined),
shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
),
],
),
bottomNavigationBar: Column(
//mainAxisAlignment: MainAxisAlignment.end,
children: [
BottomAppBar(
color: Colors.black87,
child: new Row(
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.fast_rewind),
shape:
CircleBorder(side: BorderSide(color: Colors.transparent)),
),
Text(
"0",
style: TextStyle(
color: Colors.white70,
fontSize: 16,
fontWeight: FontWeight.bold),
),
Slider(
inactiveColor: Colors.deepPurpleAccent,
value: _currentSliderValue,
min: 0,
max: 100,
divisions: 100,
label: _currentSliderValue.round().toString(),
activeColor: Colors.tealAccent,
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
),
Text(
"100",
style: TextStyle(
color: Colors.white70,
fontSize: 16,
fontWeight: FontWeight.bold),
),
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.fast_forward),
shape:
CircleBorder(side: BorderSide(color: Colors.transparent)),
),
],
),
),
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Image Goes Here",
softWrap: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(
'https://i.imgur.com/KqM0AMm.jpg',
width: 400,
errorBuilder: (BuildContext context, Object exception,
StackTrace stackTrace) {
return FlatButton(
textColor: Colors.black,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.error),
shape: CircleBorder(
side: BorderSide(color: Colors.transparent)),
);
},
)),
],
),
);
}
}
With no alignment
mainAxisSize: MainAxisSize.min,
bottomNavigationBar: Column(
//mainAxisAlignment: MainAxisAlignment.end,
//mainAxisSize: MainAxisSize.min,
children: [
BottomAppBar()
]
)
The problem is that if BottomAppBar is the first child of bottomNavigationBar and it has columns as a children, it will cause this issue. mainAxisSize: MainAxisSize.min should be set to explicitly changing default positioning behavior of the widget like the following:
bottomNavigationBar:
Column(
mainAxisSize: MainAxisSize.min, // this column and this line solves the issue
children: [
BottomAppBar(
child: Padding(
padding: const EdgeInsets.all(8),
child: OverflowBar(
overflowAlignment: OverflowBarAlignment.center,
alignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
// your columns here
Column(children :[
]),
Column(children :[
]),
Column(children :[
]),
)),
])),
i am having problems trying to align my widgets. the left side is aligning correctly but the right side is off a little bit.
here is my code
this is the code for the card view
ListView itemList(List<IncomeData> items, AppDatabase database, BuildContext context) {
return ListView(
children: items.map((IncomeData income) {
return Container(
child: Padding(
padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0,5.0),
child: new Card( //listView(income),
child: Padding(
padding: const EdgeInsets.fromLTRB(20.0, 0.0, 20.0,0.0),
child: new Column(
children: <Widget>[
listView(income),
new ButtonBar(
children: <Widget>[
new RaisedButton.icon(
label: const Text('Edit'),
icon: Icon(Icons.edit,),
color: colorPrimary,
onPressed: () {
_navigateAndDisplaySelection(context, income);
/* Navigator.push(context,
MaterialPageRoute(builder: (context) => AddEditIncomeForm(incomeData: income)));*/
},
),
new RaisedButton.icon(
label: const Text('Delete'),
icon: Icon(Icons.delete),
color: colorPrimary,
onPressed: () {
//database.deleteEntry(income);
//deleteConfirmation(income, database);
showDialog(
context: context,
builder: (context) {
return CheckBoxAlertDialog(transactionType: delete, data: income, database: database,);
}
);
},
),
],
),
],
),
),
)
)
);
}).toList(),
);
}
this is the code for the content of the card view
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(common_functions(incomeList.dateReceived.toString()),
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold )),
Spacer(),
//Expanded(child: SizedBox()),
Text("Not Received"),
Switch(
value: isSwitched,
onChanged: (value) {
setState(() {
isSwitched = value;
print(isSwitched);
});
},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
),
]
),
Row(
children: <Widget>[
CircleAvatar(
backgroundColor: green,
child: Icon(Icons.attach_money, color: white,),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(incomeList.category,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold )),
Text(incomeList.frequency + " | " + incomeList.depositAcct, style: TextStyle(color: grey, fontSize: 15)),
],
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text("\$" + incomeList.expectedAmount.toStringAsFixed(2),
style: TextStyle(fontSize: 18, color: green , fontWeight: FontWeight.bold ) ),
Text(incomeList.status, style: TextStyle(color: grey, fontSize: 15)),
],
),
],
),
],
);
if you take a look at the pic attached, the buttons and the top switch is not align properly to the number $68.00. see the red line i drawed. the switch on top is off to the left by a few spaces and also the buttons are the bottom are not align exactly to $68.00
am i doing something wrong that the widgets are not aligning to the red line as $68.00 is? how can i change my code to properly align all the widgets on the right side? thanks in advance
For ButtonBar it's buttonPadding parameter. Just be sure not to use any horizontal padding with it (right or left), since it will split it between the buttons. You will have to add a left padding for the buttons inside the ButtonBar.
I've attached an example for it and for the Switch widget, which doesn't have any properties to modify this behavior, but you can always use Transform.translate to overcome this.
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Transform.translate(
offset: Offset(10.0, 0.0),
child: Switch(
value: true,
onChanged: (value) {},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
),
),
],
),
ButtonBar(
buttonPadding: EdgeInsets.zero,
children: <Widget>[
RaisedButton.icon(
label: const Text('Edit'),
icon: Icon(
Icons.edit,
),
color: Colors.blue,
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: RaisedButton.icon(
label: const Text('Delete'),
icon: Icon(Icons.delete),
color: Colors.blue,
onPressed: () {},
),
),
],
),