How to transfer Map content to a button? - flutter

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: () {},),
),
],
),
]
);
}

Related

I have a problem with displaying in a Row in flutter

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,
),
)
]
)

How to prevent _persistentFooterButtons_ to get covered from activated keyboard?

When the keyboard is activated, persistentFooterButtons are covered.
...
persistentFooterButtons: <Widget>[
ButtonBar(
children: [
IconButton(
iconSize: 15,
onPressed: () {},
icon: Icon(Icons.east, color: Colors.green),
),
IconButton(
iconSize: 15,
onPressed: () {},
icon: Icon(Icons.api, color: Colors.blue),
),],),],
); //Scaffold
When the keyboard is activated, the icons should be displayed above the keyboard.
write in floatingActionButton
for example :
floatingActionButton: Column(
children: [
Row(
children: [
Expanded(child: Container()),
FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
],
),
Container(
height: 1, color: Colors.grey , margin: EdgeInsets.only(top: 10 , left: 30),
),
Container(
child: ButtonBar(
children: [
IconButton(
iconSize: 15,
onPressed: () {},
icon: Icon(Icons.extension, color: Colors.green),
),
IconButton(
iconSize: 15,
onPressed: () {},
icon: Icon(Icons.ac_unit, color: Colors.blue),
),
],
),
)
],
mainAxisAlignment: MainAxisAlignment.end,
), //

Flutter ButtonBar in horizontal mode doesn't seem to respect MainAxisSize

I would like to use flutter's ButtonBar due to the nice feature of automatically having a column when the device's width isn't enough. However, I'd also like to use the MainAxisSize.min, but I can't get it to use MainAxisSize.min in horizontal mode (wrt width). See example below.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(border: Border.all()),
child: ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton(
child: Text('short'),
color: Colors.blueAccent,
onPressed: () => {},
),
FlatButton(
child: Text('short'),
color: Colors.blueAccent,
onPressed: () => {},
),
],
),
),
Container(
decoration: BoxDecoration(border: Border.all()),
child: ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton(
child: Text('loooooooooooooooooong'),
color: Colors.blueAccent,
onPressed: () => {},
),
FlatButton(
child: Text('loooooooooooooooooong'),
color: Colors.blueAccent,
onPressed: () => {},
),
],
),
),
],
),
What I get
What I want
A possible solution can be to use the Wrap class instead of the ButtonBar. You have to
wrap the Container with a Center widget add some padding for the layout and your're god to go:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(border: Border.all()),
child: ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton(
child: Text('short'),
color: Colors.blueAccent,
onPressed: () => {},
),
FlatButton(
child: Text('short'),
color: Colors.blueAccent,
onPressed: () => {},
),
],
),
),
Center(
child: Container(
decoration: BoxDecoration(border: Border.all()),
padding: EdgeInsets.all(10),
child: Wrap(
//alignment: MainAxisAlignment.center,
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
FlatButton(
child: Text('looooooooooooooooooooooooong'),
color: Colors.blueAccent,
onPressed: () => {},
),
FlatButton(
child: Text('looooooooooooooooooooooooong'),
color: Colors.blueAccent,
onPressed: () => {},
),
],
),
),
),
],
),

How to achieve dynamic text under icon in the best way

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'),
],
),
],
),

Flutter: Set button height to fill container

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: () {},
),
),
),
],
),