如何在 Flutter 中创建这种类型的对话框？

Question

我想创建一个对话框底部工作表，如下图 gif 所示。当显示对话框按钮仍可点击时，按钮来自第一个屏幕。

我的结果

Answer 1

有关底部表格的更多信息，请查看documentaton

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            _settingModalBottomSheet();
          },
          child: Text('Show Bottom Sheet'),
        ),
      ),
    );
  }

  void _settingModalBottomSheet() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext bc) {
        return Container(
          child: Wrap(
            children: <Widget>[
              ListTile(
                  leading: Icon(Icons.music_note),
                  title: Text('Music'),
                  onTap: () => {}),
              ListTile(
                leading: Icon(Icons.videocam),
                title: Text('Video'),
                onTap: () => {},
              ),
            ],
          ),
        );
      },
    );
  }
}

Answer 2

您可以通过3 方式获得此信息（首先2 方式将根据需要隐藏付款部分）

`案例 1 - 使用全局密钥

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(
    home: BottomWidget(),
  ));
}

class BottomWidget extends StatelessWidget {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  void showOrdersModel(BuildContext context) {
    scaffoldKey.currentState.showBottomSheet((context) {
      return Container(
        height: 250, // change height as required
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              blurRadius: 10,
              color: Colors.grey[300],
              spreadRadius: 5,
            ),
          ],
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(12),
            topRight: Radius.circular(12),
          ),
        ),
        child: Center(child: Text('Orders')),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      body: Center(
        child: RaisedButton(
          onPressed: () => showOrdersModel(context), // pass context to work
          child: Text('Show my orders'),
        ),
      ),
    );
  }
}

Case 2 - Use scaffold 注意：您需要Scaffold 小部件

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(
    home: BottomWidget(),
  ));
}

class BottomWidget extends StatefulWidget {
  @override
  _BottomWidgetState createState() => _BottomWidgetState();
}

class _BottomWidgetState extends State<BottomWidget> {
  void showOrdersModel(BuildContext context) {
    Scaffold.of(context).showBottomSheet((context) {
      return Container(
        height: 250, // change height as required
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              blurRadius: 10,
              color: Colors.grey[300],
              spreadRadius: 5,
            ),
          ],
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(12),
            topRight: Radius.circular(12),
          ),
        ),
        child: Center(child: Text('Orders')),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(
        builder: (ctx) => Center(
          child: RaisedButton(
            onPressed: () => showOrdersModel(ctx), // pass context to work
            child: Text('Show my orders'),
          ),
        ),
      ),
    );
  }
}

Case 3 - Use showModalBottomSheet来自颤抖

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(
    home: BottomWidget(),
  ));
}

class BottomWidget extends StatelessWidget {
  void showOrdersModel(BuildContext context) {
    showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder( // apply this to get the rounder corners
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(20),
        ),
      ),
      clipBehavior: Clip.antiAliasWithSaveLayer,
      builder: (ctx) {
        return Container(
          height: 250, // change height as required
          color: Colors.transparent,
          child: Center(child: Text('Orders')),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () => showOrdersModel(context), // pass context to work
          child: Text('Show my orders'),
        ),
      ),
    );
  }
}