CODEWITHSUNDEEP
androidiosflutterbuttonnavigation
VegetaSaiyan
VegetaSaiyan

Reputation: 213

How to Align Buttons To The Bottom of Screen? [Flutter]

Whether it is one button or 2 buttons at the bottom, I would like to align them to the bottom of the screen, in all screen sizes, Android or iOS.

If the screen is scrollable, it'll still remain there. I didn't use BottomNavigation Bar to achieve that function as I thought it inappropriate.

I used

Scaffold(
            floatingActionButton: FloatingActionButton.extended(
              onPressed: () {},
              isExtended: true,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              label: Text('Hello World',
                
            ),
            floatingActionButtonLocation:
                FloatingActionButtonLocation.centerDocked,
            body:...

This method serves the purpose of having a fixed singular button. However this doesn't allow 2 buttons. Sometimes I want to provide the users an option eg Option A to this page, option B to next page.

What are your thoughts on it?

Upvotes: 0

Views: 2247

Answers (2)

Dhritiman Roy
Dhritiman Roy

Reputation: 974

You can provide a Row widget to the floatingActionButton attribute and align your buttons accordingly to your wish.

Example

   Scaffold(
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {},
            child: Text("Button 1"),
          ),
          ElevatedButton(
            onPressed: () {},
            child: Text("Button 2"),
          ),
        ],
      ),
    );

Upvotes: 1

Ayoub BOUMZEBRA
Ayoub BOUMZEBRA

Reputation: 5003

        Scaffold(
             body: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children:[ 
                        floatingActionButton: FloatingActionButton.extended(
                        onPressed: () {},
                        isExtended: true,
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        label: Text('Hello World',
                        ...
                    ),
                    floatingActionButtonLocation:
                        FloatingActionButtonLocation.centerDocked,
                    ...
                ]

Upvotes: 1

Related Questions