Bottom sheet is not displaying on the bottom

Question

I want to show a bottom sheet when clicking on the floating button on the page. Page also includes bottom navigation bar. When clicking on the floating button, the bottom sheet appears above the navigation bar not on the bottom of the page. How can I achieve this?.

Code:

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: AppNavigation(),
    );
  }
}

class AppNavigation extends StatefulWidget {
  @override
  _AppNavigationState createState() => _AppNavigationState();
}

class _AppNavigationState extends State<AppNavigation> {
  int _currentIndex = 0;

  final List<Widget> _children = [
    HomeScreen(),
    SettingsScreen(),
  ];

  void onTappedBar(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          onTap: onTappedBar,
          currentIndex: _currentIndex,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), title: Text('Settings')),
          ]),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size; // gives device width and height

    return Scaffold(
        floatingActionButton: FloatingActionButton(
            onPressed: () {
              showBottomSheet(
                  context: context,
                  builder: (context) => Container(
                        height: 320,
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withOpacity(0.5),
                              spreadRadius: 5,
                              blurRadius: 20,
                              offset: Offset(0, 3),
                            ),
                          ],
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(25),
                            topRight: Radius.circular(25),
                          ),
                        ),
                        padding:
                            EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                        child: Center(child: Text('Bottom action sheet')),
                      ));
            },
            child: Icon(Icons.add),
            backgroundColor: Colors.deepPurple),
        body: Center(child: Text("home page")));
  }
}

Below is the output of above code.The bottom action sheet appears above the bottom navigation bar. I expect the bottom action should be on bottom of the screen.

Answer 1

I believe what you are trying to achieve is done by using "showModalBottomSheet" like this:

return Scaffold(
        resizeToAvoidBottomInset: false,
        floatingActionButton: FloatingActionButton(
            onPressed: () {
              // what you asked for
              showModalBottomSheet(
                barrierColor: Colors.white.withOpacity(0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(25),
                    ),
                  ),
                  context: context,
                  builder: (context) => Container(
                        height: 320,
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withOpacity(0.5),
                              spreadRadius: 5,
                              blurRadius: 20,
                              offset: Offset(0, 3),
                            ),
                          ],
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(25),
                            topRight: Radius.circular(25),
                          ),
                        ),
                        padding:
                            EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                        child: Center(child: Text('Bottom action sheet')),
                      ));
            },
            child: Icon(Icons.add),
            backgroundColor: Colors.deepPurple),
        body: Center(child: Text("home page")));

edit: I have modified the code so that it has the same shadow effect like the one in the picture you've posted