Flutter顶部模态弹窗插件top_modal_sheet的使用

top_modal_sheet

简单的从屏幕顶部出现的模态弹窗。

安装

在你的pubspec.yaml文件中添加依赖：

dependencies:
  top_modal_sheet: ^2.1.0

然后导入它：

import 'package:top_modal_sheet/top_modal_sheet.dart';

使用方法

只需调用showTopModalSheet来显示模态弹窗。

MaterialButton(
  color: Colors.white,
  elevation: 5,
  child: const Text("Show TopModal 1"),
  onPressed: () async {
    var value = await showTopModalSheet<String?>(context, DummyModal());
    setState(() { _topModalData = value; });
  },
)

对于更详细的例子，请参阅example文件夹。

示例代码

以下是一个完整的示例demo，演示了如何使用top_modal_sheet插件创建一个顶部模态弹窗。此示例包括主应用程序设置、按钮触发模态弹窗和模态弹窗内容。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:top_modal_sheet/top_modal_sheet.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
      statusBarBrightness:
          Platform.isAndroid ? Brightness.dark : Brightness.light,
      systemNavigationBarColor: Colors.teal,
      systemNavigationBarDividerColor: Colors.grey,
      systemNavigationBarIconBrightness: Brightness.dark,
    ));

    return MaterialApp(
      title: 'Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _topModalData = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("TopModalSheet sample"),
      ),
      body: Center(
        child: Text(
          _topModalData,
          style: Theme.of(context).textTheme.headlineLarge,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton.extended(
        elevation: 5,
        label: const Text("Show TopModal 1"),
        onPressed: _showTopModal,
      ),
    );
  }

  Future<void> _showTopModal() async {
    final value = await showTopModalSheet<String?>(
      context,
      const DummyModal(),
      backgroundColor: Colors.white,
      borderRadius: const BorderRadius.vertical(
        bottom: Radius.circular(20),
      ),
    );

    if (value != null) setState(() => _topModalData = value);
  }
}

class DummyModal extends StatelessWidget {
  const DummyModal({Key? key}) : super(key: key);

  static const _values = ["CF Cruz Azul", "Monarcas FC"];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          const Text(
            "Choose Wisely",
            style: TextStyle(color: Colors.teal, fontSize: 20),
            textAlign: TextAlign.center,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: _values
                .map(
                  (value) => Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 10, right: 5),
                      child: OutlinedButton(
                        child: Column(
                          children: [
                            FlutterLogo(
                              size: MediaQuery.of(context).size.height * .15,
                            ),
                            Padding(
                              padding: const EdgeInsets.symmetric(vertical: 2),
                              child: Text(value),
                            )
                          ],
                        ),
                        onPressed: () => Navigator.pop(context, value),
                      ),
                    ),
                  ),
                )
                .toList(),
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  }
}

屏幕截图

以下是使用top_modal_sheet插件创建的顶部模态弹窗的效果图。

如果有什么遗漏或问题，欢迎随时提issue或者贡献代码！