flutter,how to place button at the bottom of the image?

user_8281996 0
Viewed 8983

I'm creating the button over the image and i want the button at the bottom center of the image

Widget buildBody() {
  return Stack(
    children: <Widget> [
      Image(
        image: new AssetImage('assets/homebg.png'),
      ), 
      Center(
        child:  RaisedButton( 
          onPressed: () => launch("tel://21213123123"),
          child: new Text("Call me")
        )
      ),
    ]
  );     
}

I expect the output of button should be at the bottom of the image

flutter
3 Answers

Try to add alignment

Stack(
    alignment: Alignment.bottomCenter,
    children: <Widget>[
      Image(
        image: new AssetImage('assets/homebg.png'),
      ),
      Padding(
          padding: EdgeInsets.all(8.0),
          child: RaisedButton(
              onPressed: () => launch("tel://21213123123"),
              child: new Text("Call me")
          )
      ),
    ]
);
user_71308200

You can try to use the Positioned widget as a child of Stack.

Stack(
    children: [
        Image(...),
        Positioned(
            left: 0.0,
            right: 0.0,
            bottom: 0.0, 
            child: yourChildWidget(),
        )
    ]
)
user_108261590

Better-One, In Which You can able to add more Buttons Easily,

                   child: Stack(
                  children: [
                   //Your Image Here...
                    Align(
                      alignment: Alignment.topRight,
                      child: Padding(
                          padding: EdgeInsets.all(8.0),
                          child: IconButton(
                              onPressed: () => print("Closed")
                              icon: Icon(Icons.close))),
                    ),
                  ],
                ),

Use Align inside the children and add more buttons and align them anywhere of your choice, this is an edit of the above answer of @Andrey Thanks Alot.

user_156574820
Related