laaasBIGL
laaasBIGL

Reputation: 901

How to align the child of a FlatButton

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

Answers (2)

nick.tdr
nick.tdr

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

Fellipe Malta
Fellipe Malta

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

Related Questions