在颤动中点击底部导航栏上的按钮时如何弹出滑动面板？ [关闭]答案

【问题标题】：How to pop up sliding panel when tap a button on a bottom navigation bar in flutter? [closed]在颤动中点击底部导航栏上的按钮时如何弹出滑动面板？ [关闭]
【发布时间】：2021-08-15 17:57:10
【问题描述】：

gif1: https://drive.google.com/file/d/1ldqHqicHFEauUQbz1fzH5K8XRS3ICNqL/view?usp=sharing gif2:https://drive.google.com/file/d/1NpPVrO9trMbde-rPmbAGeHRVSh28BfPk/view?usp=sharing

我正在制作一个使用地图和底部导航栏以及向上滑动面板的应用程序。我的问题是，就像在第一个 gif 中一样，我想制作底部导航栏和向上滑动面板（或可拖动的可滚动表）。当我将整个面板向下拖动时，它会消失，当我点击导航栏上的图标时，它会再次出现

但在我制作的第二个 gif 中没有即使将整个面板向下拖动，它也不会消失。好吧，我可以调整面板的最小高度以使面板消失，但是当我再次点击按钮时无法弹出面板

我用过这个包https://pub.dev/packages/sliding_up_panel 我认为这个包中没有我想要的选项（可能是错的！如果我错了请通知我）所以我的问题是有没有可以实现我上面提到的功能的flutter包？

【问题讨论】：

标签： android flutter mobile-application

【解决方案1】：

试试这个代码，看看它是否对你有帮助


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  _State createState() => _State();
}

class _State extends State<HomePage> {
  int _selectedIndex = 0;
  final double _sheetSize = 0.4;
  _onItemTapped(index) {
    setState(() {
      DraggableScrollableActuator.reset(context);
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: SizedBox.expand(
        child: DraggableScrollableSheet(
          key: UniqueKey(),
          initialChildSize: _sheetSize,
          minChildSize: 0.0,
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView.builder(
                controller: scrollController,
                itemCount: 25,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(title: Text('Item $index'));
                },
              ),
            );
          },
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

【讨论】：