How can I generate this when I press the floating action button in flutter

Question

I would like to generate a container or a flap (I don't know the word) when I press the floating action button, everything is explained on the screen, Thanks a lot !

I am expecting this tab to generate from the bottom to the top when I press the button and then to disapear from the top to the bottom when I press the button again

Use `bottom sheet`. – Sugan Pandurengan Nov 04 '22 at 12:04 — Sugan Pandurengan, Nov 04 '22 at 12:04
Yes bootm sheets has default animated opening from bottom. – Sugan Pandurengan Nov 04 '22 at 12:09 — Sugan Pandurengan, Nov 04 '22 at 12:09
Okay it might be that, thanks dude – Boatti Nov 04 '22 at 12:16 — Boatti, Nov 04 '22 at 12:16

eamirho3ein · Accepted Answer · 2022-11-04T12:30:38.253

3

Try this:

floatingActionButton: IconButton(
      onPressed: () {
        showModalBottomSheet(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            backgroundColor: Colors.white,
            builder: (BuildContext context) {
              return Column(
                children: [
                  ElevatedButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text('Botton 1')),
                  SizedBox(
                    height: 20,
                  ),
                  ElevatedButton(onPressed: () {}, child: Text('Botton 2'))
                ],
              );
            },
            context: context);
      },
      icon: Icon(Icons.add),
),

edited Nov 04 '22 at 12:30

answered Nov 04 '22 at 12:09

eamirho3ein

16,619
2
12
23

How can I link that with my floating action button ? – Boatti Nov 04 '22 at 12:17
I updated my answer check it out. @Boatti – eamirho3ein Nov 04 '22 at 12:31
And I want to generate it from behind the nav bar, is it possible ? – Boatti Nov 04 '22 at 18:24
one thing you can do is that put your nav bar widget at the end of column which is inside BottomSheet. – eamirho3ein Nov 04 '22 at 18:54
the nav bar is now in the bottom sheet this is not working – Boatti Nov 04 '22 at 20:17
1

I think one have found here : https://stackoverflow.com/questions/71996161/show-bottom-modal-sheet-above-the-bottom-navigation-bar – Boatti Nov 04 '22 at 20:31

How can I generate this when I press the floating action button in flutter

1 Answers1