flutter - 打开底部导航栏下方的底部工作表

Question

我创建了一个底部导航栏和一个底部工作表，单击导航栏项目后，底部工作表应该会出现。如您所见，它有效，但它出现在底部导航栏上。有没有办法让底部工作表出现在导航栏下方？

现在的样子——

导航栏 -

class Dashboard extends StatefulWidget {
  const Dashboard({Key? key}) : super(key: key);

  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  int _bottomNavIndex = 0;

  void _onItemTapped(int index) {
    if (index != 1) {
      setState(() {
        _bottomNavIndex = index;
      });
    } else {
      chooseOneOptionBottomSheet(context);
    }
  }

  Widget? pageCaller(int index) {
    switch (index) {
      case 0:
        {
          return const Home();
        }
      case 3:
        {
          return const Notifications();
        }
      case 4:
        {
          return const MyProfile();
        }
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    bool keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0;
    return Scaffold(
      body: pageCaller(_bottomNavIndex),
      floatingActionButton: Visibility(
        visible: !keyboardIsOpen,
        child: SizedBox(
          height: 70.0,
          width: 70.0,
          child: FittedBox(
            child: FloatingActionButton(
              onPressed: () async {
                await availableCameras().then((value) => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => CameraPage(
                        cameras: value,
                      ),
                    )));
              },
              tooltip: 'Scan',
              child: const ImageIcon(
                AssetImage('assets/icons/scan.png'),
              ),
              elevation: 4.0,
              backgroundColor: primaryColor,
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        onTap: _onItemTapped,
        currentIndex: _bottomNavIndex,
        items: [ //items ],
        type: BottomNavigationBarType.fixed,
        fixedColor: primaryColor,
        unselectedItemColor: secondaryText,
        selectedLabelStyle:
            const TextStyle(fontFamily: 'InterMedium', fontSize: 12),
        unselectedLabelStyle:
            const TextStyle(fontFamily: 'InterMedium', fontSize: 12),
      ),
    );
  }
}

底片 -

void chooseOneOptionBottomSheet(context) {
  showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
//content
));
}

Answer 1

将此行添加到您的 showModelBottomSheet useRootNavigator: true,

示例代码，

showModalBottomSheet(
      context: context,
      useRootNavigator: true,
      builder: (context) {},
    );

Answer 2

尝试

void chooseOneOptionBottomSheet(context) {
  showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
  height:200,
));
}