flutter - 按下按钮时 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'));
              },
            ),
          );
        },
      ));
    },
  ),
),

标签： flutterdartflutter-layout

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')),
            ),
          );
        },
      );
    },
  );
}