底部不显示在底部

如何解决底部不显示在底部

当我单击页面上的浮动按钮时，我想显示一个底页。页面还包括底部导航栏。单击浮动按钮时，底页将显示在导航栏上方，而不是页面底部。我该如何实现呢？

代码：

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")));
  }
}

下面是上面代码的输出。底部操作表出现在底部导航栏上方。我希望底部的动作应该在屏幕底部。

解决方法

我相信您要实现的目标是通过使用“ showModalBottomSheet”来完成的：

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")));

编辑：我已经修改了代码，以使其具有与您发布的图片相同的阴影效果