Flutter DraggableScrollableSheet 在按下按钮时不显示

Question

我想DraggableScrollableSheet在我的应用程序上使用小部件，当我使用下面的代码时，可以毫无问题地显示：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DraggableScrollableSheet'),
      ),
      body: SizedBox.expand(
        child: DraggableScrollableSheet(
          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'));
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

但是当我想通过按例如floatingActionButton不显示来显示时

floatingActionButton: GestureDetector(
  child: FloatingActionButton(
    child: Icon(
      Icons.add,
      size: 35.0,
    ),
    elevation: 5,
    backgroundColor: Colors.deepOrange,
    foregroundColor: Colors.white,
    onPressed: (){
      SizedBox.expand(child: DraggableScrollableSheet(
        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'));
              },
            ),
          );
        },
      ));
    },
  ),
),

Answer 1

如果你想使用DraggableScrollableSheetinside showModalBottomSheet，你可以简单地调用这个函数。

void _showSheet() {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true, // set this to true
    builder: (_) {
      return DraggableScrollableSheet(
        expand: false,
        builder: (_, controller) {
          return Container(
            color: Colors.blue[500],
            child: ListView.builder(
              controller: controller, // set this too
              itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
            ),
          );
        },
      );
    },
  );
}

Answer 2

如果你想这样做Animation，这里是解决方案。

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Duration _duration = Duration(milliseconds: 500);
  Tween<Offset> _tween = Tween(begin: Offset(0, 1), end: Offset(0, 0));

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: _duration);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: GestureDetector(
        child: FloatingActionButton(
          child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _controller),
          elevation: 5,
          backgroundColor: Colors.deepOrange,
          foregroundColor: Colors.white,
          onPressed: () async {
            if (_controller.isDismissed)
              _controller.forward();
             else if (_controller.isCompleted)
              _controller.reverse();
          },
        ),
      ),
      body: SizedBox.expand(
        child: Stack(
          children: <Widget>[
            FlutterLogo(size: 500),
            SizedBox.expand(
              child: SlideTransition(
                position: _tween.animate(_controller),
                child: DraggableScrollableSheet(
                  builder: (BuildContext context, ScrollController scrollController) {
                    return Container(
                      color: Colors.blue[800],
                      child: ListView.builder(
                        controller: scrollController,
                        itemCount: 25,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(title: Text('Item $index'));
                        },
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

如果你想显示DraggableScrollableSheet为模态，你可以使用材料showModalBottomSheet方法来包装它。您的工作表将显示为模态，您不必将其包含在小部件树中。请注意，在幕后，它被作为新的 Route to Navigator 推送，并带来所有后果。

onPressed: (){
   showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        expand: false,
        backgroundColor: Colors.transparent,
        builder: (context) =>
            DraggableScrollableSheet(
              initialChildSize: 0.64,
              minChildSize: 0.2,
              maxChildSize: 1,
              builder: (context, scrollController) {
                return Container(
                  color: Colors.white,
                  child: ListView.builder(
                    controller: scrollController,
                    itemBuilder: (context, index) {
                        return ListTile(
                          title: Text('Item $index'),
                        );
                      },
                    itemCount: 20,
                  ),
                );
              },
            ),
      );
}