Flutter 可拖动滚动表

Question

does anyone know why my draggable scrollable sheet doesn't work or why I can't see it? I tried it in another way it worked, but I didn't use the SafeArea-Widget,

import 'package:flutter/material.dart';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(100.0),
        child: AppBar(
          //AppBar
      ),
      body: SafeArea(
        child: ListView(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 20),
              child: Text(
                dateday,
                style: TextStyle(
                  color: Color(0xff2C8E5D),
                  fontSize: 150,
                ),
              ),
            ),
            SizedBox.expand(
              child: DraggableScrollableSheet(builder:
                  (BuildContext context, ScrollController scrollController) {
                return Container(
                  color: Colors.red,
                  child: ListView.builder(
                      controller: scrollController,
                      itemCount: 25,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(title: Text("Item $index"));
                      }),
                );
              }),
            ),
          ],
        ),
      ),
    );
  }
}

Thanks for your help!

Answer 1

Replace the ListView with a Stack :

body: SafeArea(
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 20),
              child: Text(
                dateday,
                style: TextStyle(
                  color: Color(0xff2C8E5D),
                  fontSize: 150,
                ),
              ),
            ),
            SizedBox.expand(
              child: DraggableScrollableSheet(
                  builder:
                  (BuildContext context, ScrollController scrollController) {
                return Container(
                  color: Colors.red,
                  child: ListView.builder(
                      controller: scrollController,
                      itemCount: 25,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(title: Text("Item $index"));
                      }),
                );
              }),
            ),
          ],
        ),
      ),

Answer 2

You can use LayoutBuilder and BoxConstraints to provide height and use Expanded flex to control DraggableScrollableSheet 's scroll area
code snippet

SafeArea(
  child: LayoutBuilder(builder: (context, constraints) {    
    return ConstrainedBox(
      constraints: BoxConstraints(maxWidth: constraints.maxWidth),
      child: Column(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Padding(
              padding: EdgeInsets.only(left: 20),
              child: Text(
                "dateday",
          ...
          Expanded(
            flex: 3,
            child: SizedBox.expand(

working demo

full code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('DraggableScrollableSheet'),
        ),
        body: SafeArea(
          child: LayoutBuilder(builder: (context, constraints) {
            print(constraints.maxWidth);
            print(constraints.minWidth);
            return ConstrainedBox(
              constraints: BoxConstraints(maxWidth: constraints.maxWidth),
              child: Column(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Padding(
                      padding: EdgeInsets.only(left: 20),
                      child: Text(
                        "dateday",
                        style: TextStyle(
                          color: Color(0xff2C8E5D),
                          fontSize: 150,
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 3,
                    child: SizedBox.expand(
                      child: DraggableScrollableSheet(builder:
                          (BuildContext context,
                              ScrollController scrollController) {
                        return Container(
                          color: Colors.red,
                          child: ListView.builder(
                              controller: scrollController,
                              itemCount: 25,
                              itemBuilder: (BuildContext context, int index) {
                                return ListTile(title: Text("Item $index"));
                              }),
                        );
                      }),
                    ),
                  ),
                ],
              ),
            );
          }),
        ));
  }
}