So I am trying to create a row with buttons. Each button will have an image (which is a png with transparency) and because they have different sizes I am having different behavious on my buttons. This is what happened so far:
- Using Row with TextButton the button size will vary depending on the size of the image.
- Using a Row > Sized Box > TextButton I get same size buttons, but the image looks small on some of them, since they have different sizes.
Is there a reliable way to "increase" the image inside the button so they all fit correctly? I tried just adding to the height, but nothing happened.
This was my latest attempt (Where buttons are the same size but images inside vary and height didn't make any difference):
SizedBox(
height: 50,
child: TextButton(
onPressed: () => null,
child: ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.grey, BlendMode.modulate),
child: Image.asset(
'images/myimage.png',
height: 100,
))),
),
Sorry, I'm quite new to Flutter so I hope I managed to explain correctly
Update 1: Here's the full code with the Container suggestion used in different ways:
class _DetailsPageState extends State<DetailsPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
backgroundColor: Colors.red.shade300,
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
Row(children: [
SizedBox(
height: 50,
child: TextButton(
onPressed: () => null,
child: Image.asset('images/shiny-stars.png'),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'images/shiny-stars.png',
),
fit: BoxFit.fill),
),
// child: Image.asset('images/shiny-stars.png'),
),
SizedBox(
height: 50,
child: TextButton(
onPressed: () => null,
child: ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.green, BlendMode.modulate),
child: Container(
//width: _width,
height: 50,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'images/shiny-stars.png',
),
fit: BoxFit
.fill, //filled the Image (size of Container)
),
),
),
),
),
),
]),
],
),
],
),
),
],
),
),
);
}
}
- The first item (Row, is the one displaying the image but not covering much of the button),
- Second is the Container with BoxFit.fill which can't be seen in the screen
- Third is the SizedBox + Container, which makes the image disappear
