Flutter：modal_bottom_sheet（iOS 风格）

Posted 2023-05-06

【中文标题】Flutter：modal_bottom_sheet（iOS 风格）

【英文标题】：Flutter: modal_bottom_sheet (iOS style)

【发布时间】：2022-01-14 08:02:05

【问题描述】：

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

【参考方案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"),
    );