Flutter：modal_bottom_sheet（iOS 风格）答案

【问题标题】：Flutter: modal_bottom_sheet (iOS style)Flutter：modal_bottom_sheet（iOS 风格）
【发布时间】：2022-01-14 08:02:05
【问题描述】：

如何像使用MaterialWithModalsPageRoute 推动之后那样为 modal_bottom_sheet (https://pub.dev/packages/modal_bottom_sheet) 设置动画。我启动我的应用程序并希望在按下按钮的第一页上显示此模式，但它的动画效果并不理想。

【问题讨论】：

标签： android ios flutter modal-dialog

【解决方案1】：

这解决了它：https://github.com/jamesblasco/modal_bottom_sheet/issues/159

我的错误是，我添加了onGenerateRoute 和 home 到我的MaterialApp

这是解决上述问题的代码：

import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

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

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: (settings) => MaterialWithModalsPageRoute(
          builder: (context) => HomePage()),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
          color: Colors.white,
        ),
        child: TextButton(
          child: Text("Press"),
          onPressed: () {
            showCupertinoModalBottomSheet(
              context: context,
              expand: true,
              builder: (context) => SecondPage(),
            );
          },
        ));
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Hello"),
    );
  }
}

【讨论】：