Is it possible to make a bottom sheet appear from top instead of bottom in flutter?

414 Views Asked by At

I want to open a bottom sheet on tapping floating action button from top side instead of bottom. Is there any way to do that? Or is there any other widget that can be used for my purpose instead of bottomsheet ?

floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
  floatingActionButton: Container(
    margin: const EdgeInsets.only(top: 235),
    child: FloatingActionButton(
      onPressed: () {
        print('float clicked');
        showBottomSheet(context);
      },
      tooltip: 'Add New ToDo',
      child: const Icon(Icons.add),
    ),
  ),

Future<void> showBottomSheet(BuildContext ctx) async {
showModalBottomSheet(
    backgroundColor: Color.fromARGB(255, 225, 211, 230),
    isDismissible: true,
    context: ctx,
    builder: (ctx1) {
      return Container(
        height: 200,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              margin: EdgeInsets.only(top: 15, left: 15, right: 15),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(180),
              ),
              child: const TextField(
                decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'Add New Task',
                    contentPadding: EdgeInsets.all(10)),
              ),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('Add'),
            )
          ],
        ),
      );
    });
}
1

There are 1 best solutions below

2
Rahul On
  1. Add isScrollControlled: true, to showModalBottomSheet.
  2. Wrap your container inside builder of modalbottomsheet inside
     const FractionallySizedBox(
         heightFactor: 1.0,
         child: Container(...),
     ),
    

You will have the result you want.