Reputation: 901
I am trying to align 2 Texts and an Image as a child of a FlatButton (like this) but somehow the elements don't align as they should.
I tried using Stack, Align, Rows and so on but I weren't really successful (I am also a beginner when it comes to dart or flutter)
new ButtonTheme(
minWidth: 171,
height: 176,
child:new Container(
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(19),
gradient: new LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFF8F94FB),
Color(0xFF5D62D4)
]
)
),
child: FlatButton(
onPressed: () => handleButtonClick(),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(19)
),
child: new Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
)
],
),
),
),
),
This is the result:Image
Upvotes: 2
Views: 2003
Reputation: 4933
Replace your FlatButton with below code and see if it works for you.
FlatButton(
padding: const EdgeInsets.all(0),
onPressed: () => {
},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(19)
),
child: new Stack(
children: <Widget>[
Container(
width: 109,
height: 109,
child: Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/demo.png',fit: BoxFit.fitHeight,),
),
),
],
),
),
Upvotes: 3
Reputation: 3510
You can debug step by step. First, this is a technique that I use with me and my other fellows devs. In the child parameter, pass a Container
, this container will receive a color, Colors.red
for example, with that you can see how much size your container's area contain.
After that, if you want to centralize the content inside this Container
, passa a Center
as child, and the child of this Center
widget, you can pass your Image, and define this Image's size.
child: Container(
color: Colors.red,
child: Center(
child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
),
),
Tell me if this worked for you.
Upvotes: 1