I'm trying to implement 2 Icons in a Row and under each Icon some text
My current implementation:
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(
Icons.directions_car,
size: 55.0,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.streetview,
size: 55.0,
),
onPressed: () {},
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(18.0, 10.0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('some text',
style: TextStyle(
fontSize: 16.0
),
),
Text('some text'),
],
),
),
My problem is that my text should be dynamic, So every time the text changed, the location of my text changes and sometimes it look really ugly.
How can in place the text in a better way that is posted here?
try this.. so what I have done is I added both Icon and Text inside a Column so they will behave as a group
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
children: <Widget>[
IconButton(
padding: EdgeInsets.zero,
icon: Icon(
Icons.directions_car,
size: 55.0,
),
onPressed: () {},
),
SizedBox(
height: 10,
),
Text('some text'),
],
),
Column(
children: <Widget>[
IconButton(
padding: EdgeInsets.zero,
icon: Icon(
Icons.streetview,
size: 55.0,
),
onPressed: () {},
),
SizedBox(
height: 10,
),
Text('some text'),
],
),
],
),
Related
Edit: This error only happen in Xioami Redmi Note 7 (Android version 10), work perfectly on other device like samsaung (Android version 13).
Edit: I reproduced again. I found this happen when pop back to drawer from drawer navigation.
(Eg: Go to notification screen from drawer navigation stack and pop back).
I found an issue with the flutter drawer while implementing UI.
Please see below image. Drawer header exceed a white margin that I except. But that exceed margin not always happen every time although I reproduce by opening drawer again and again. It only happen in usual when not expected. What is happen and how to fix?
I test this with only in debug mode.
DrawerHeader(
decoration: BoxDecoration(
color: primaryColor,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const FlutterLogo(
size: largeIconSize,
),
const SizedBox(
width: 70,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LA PYAE TEST',
style: Theme.of(context).textTheme.headline5,
),
Text(
'09500007958',
style: Theme.of(context).textTheme.headline5?.copyWith(
fontSize: textRegular2X,
),
),
Text(
'Balance: 0 MMK',
style: Theme.of(context).textTheme.headline5?.copyWith(
fontSize: textRegular,
),
),
],
),
],
),
),
Edit
here is my Drawer body completely ,
Drawer(
child: ListView(
children: [
/// TODO Bind data
DrawerHeader(
decoration: BoxDecoration(
color: primaryColor,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const FlutterLogo(
size: largeIconSize,
),
const SizedBox(
width: 70,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LA PYAE TEST',
style: Theme.of(context).textTheme.headline5,
),
Text(
'09500007958',
style: Theme.of(context).textTheme.headline5?.copyWith(
fontSize: textRegular2X,
),
),
Text(
'Balance: 0 MMK',
style: Theme.of(context).textTheme.headline5?.copyWith(
fontSize: textRegular,
),
),
],
),
],
),
),
ListTile(
onTap: () {
Navigator.pushNamed(context, notificationRoute);
},
leading: const Icon(
Icons.notifications_none_outlined,
size: 30,
),
title: const Text(NOTIFICATION),
),
const ListTile(
leading: Icon(
Icons.settings_outlined,
size: 30,
),
title: Text(APP_SETTING),
),
const ListTile(
leading: Icon(
Icons.location_on_outlined,
size: 30,
),
title: Text(LOCATIONS),
),
const ListTile(
leading: Icon(
Icons.question_mark_outlined,
size: 30,
),
title: Text(ABOUT),
),
const ListTile(
leading: Icon(
Icons.logout_outlined,
size: 30,
),
title: Text(LOG_OUT),
),
const ListTile(
leading: Icon(
Icons.share,
size: 30,
),
title: Text(SHARE_APP),
),
],
),
);
add
padding: EdgeInsets.zero,
to drawer header widget
I'm a beginner in flutter, I want to display a text on the far left and a button on the far right in a container, here is my code:
Container(
width: double.infinity,
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('TEXT'),
IconButton(
onPressed: () {},
icon: Icon(
Icons.price_change_outlined,
color: Colors.blue,
))
],
),
),
Use mainAxisAlignment: MainAxisAlignment.spaceBetween,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('TEXT'),
IconButton(
onPressed: () {},
icon: Icon(
Icons.price_change_outlined,
color: Colors.blue,
))
],
),
You can find more about Row and layout
An alternative to the above solutions is to use a Spacer widget.
An advantage to this approach is that you can easily add more widgets to whatever side you want and keep the spacing in between.
Row(
children: [
Text('TEXT'),
const Spacer(),
IconButton(
onPressed: () {},
icon: Icon(
Icons.price_change_outlined,
color: Colors.blue,
),
)
]
)
I have 3 Maps containing images and a key. I would like to transfer their contents to the columns in the buttons as an image.
I have a few questions.
Did I write the images in the Map correctly ? They are stored in my Resources folder in the iconImage file.
How do I get the recorded images in the button (each button has its own value without repetitions, the order is not important)
And how can I click on the buttons then find out if their keys match ? (The button from the first column with the key 1 coincides with the button from the 2nd column with the key 1, and so on).
final Map <int, Image> column1;
column1: const {
1: Image(image: AssetImage(IconImages.test1)),
2: Image(image: AssetImage(IconImages.test2)),
3: Image(image: AssetImage(IconImages.test3)),
}
final Map <int, Image> column2;
column2: const {
1: Image(image: AssetImage(IconImages.test1)),
2: Image(image: AssetImage(IconImages.test2)),
3: Image(image: AssetImage(IconImages.test3)),
}
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:[
Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.lightBlueAccent,
child: IconButton(
icon: column1.values
iconSize: 60,
onPressed: () {},),
),
SizedBox(height: 40,),
Container(
color: Colors.lightBlueAccent,
child: IconButton(
icon: column1.values
iconSize: 60,
onPressed: () {},),
),
SizedBox(height: 40,),
Container(
color: Colors.lightBlueAccent,
child: IconButton(
icon: column1.values
iconSize: 60,
onPressed: () {},),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.red,
child: IconButton(
icon: column2.values
iconSize: 60,
onPressed: () {},),
),
SizedBox(height: 40,),
Container(
color: Colors.red,
child: IconButton(
icon: column2.values
iconSize: 60,
onPressed: () {},),
),
SizedBox(height: 40,),
Container(
color: Colors.red,
child: IconButton(
icon: column2.values
iconSize: 60,
onPressed: () {},),
),
],
),
]
);
}
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: () {},
),
),
],
),
I've been trying to make my button to fill my container.
But as you can see from the picture above, the button (red) on the left clearly did not fill the entire container(green). I can solve this by adding height to MaterialButton, but IMHO this is not the best solution, because device's height might differ. Can you help me to solve this problem? Thanks.
Here is my code:
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: MaterialButton(
color: Colors.red,
child: Text("Button A"),
onPressed: () {},
),
),
),
Expanded(
child: MaterialButton(
color: Colors.blue,
child: Text("Button B"),
onPressed: () {},
),
),
],
),
Simply Add - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, in MaterialButton
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: MaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // Add this
color: Colors.red,
child: Text("Button A"),
onPressed: () {},
),
),
),
Expanded(
child: MaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // Add this
color: Colors.blue,
child: Text("Button B"),
onPressed: () {},
),
),
],
),
You may can try
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: SizedBox(
height: 48,
child: MaterialButton(
height: double.infinity,
color: Colors.red,
child: Text("Button A"),
onPressed: () {},
padding: EdgeInsets.all(0),
),
),
),
),
Expanded(
child: SizedBox(
height: 48,
child: MaterialButton(
height: double.infinity,
color: Colors.blue,
child: Text("Button B"),
onPressed: () {},
),
),
),
],
),