Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

flutter

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

like image 350
Vishali Avatar asked Jan 03 '19 07:01

Vishali


People also ask

How do you put a button at the bottom of the screen in flutter?

From Settings, tap Display, and then tap Navigation bar. Make sure Buttons is selected, and then you can choose your desired button setup at the bottom of the screen. Note: This option will also affect the location you swipe when using Swipe gestures.

How do you change the position of a button in flutter?

By default, the shape of the floating action button (FAB) in the flutter is circular and the location is bottom right floated. You can change the location and shape of the floating action button using properties in Scaffold() widget class and FloatingActionButton() widget class.

How do you put the button in the bottom right corner in flutter?

You can just do it using 'Stack' widget.


2 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")
          )
      ),
    ]
);
like image 119
Andrey Turkovsky Avatar answered Nov 11 '22 14:11

Andrey Turkovsky


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(),
        )
    ]
)
like image 27
Jerome Escalante Avatar answered Nov 11 '22 15:11

Jerome Escalante