首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何配置Flutter的showModalBottomSheet打开/关闭动画?

Flutter的showModalBottomSheet是一个常用的组件,用于显示模态底部弹出框。它提供了一种简单的方式来实现与用户的交互,并且可以自定义打开和关闭的动画效果。

要配置showModalBottomSheet的打开/关闭动画,可以使用Flutter的AnimationController和AnimationBuilder来实现。下面是一个示例代码,展示了如何配置showModalBottomSheet的动画效果:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300), // 设置动画的持续时间
    );
    _animation = CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut, // 设置动画的曲线
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _openModalBottomSheet() {
    _animationController.forward(); // 播放打开动画
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return AnimatedBuilder(
          animation: _animation,
          builder: (BuildContext context, Widget child) {
            return Transform.translate(
              offset: Offset(0.0, _animation.value * MediaQuery.of(context).size.height),
              child: Container(
                height: 200.0,
                color: Colors.white,
                child: Center(
                  child: Text('Modal Bottom Sheet'),
                ),
              ),
            );
          },
        );
      },
    );
  }

  void _closeModalBottomSheet() {
    _animationController.reverse(); // 播放关闭动画
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Modal Bottom Sheet'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: _openModalBottomSheet,
          child: Text('Open Modal Bottom Sheet'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _closeModalBottomSheet,
        child: Icon(Icons.close),
      ),
    );
  }
}

在上面的示例代码中,我们首先创建了一个AnimationController来控制动画的播放,然后使用CurvedAnimation来定义动画的曲线。在打开和关闭模态底部弹出框时,我们分别调用_animationController的forward和reverse方法来播放动画。在showModalBottomSheet的builder中,我们使用AnimatedBuilder来构建动画效果,通过Transform.translate来实现底部弹出框的上下移动。

这是一个简单的示例,你可以根据自己的需求来自定义动画效果。希望对你有帮助!

关于Flutter的更多信息和相关产品,你可以参考腾讯云的官方文档和产品介绍页面:

希望这些信息能对你有所帮助!如果还有其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

你知道吗,Flutter内置了10多种show

barrierColor:背景颜色 transitionDuration:动画时长, transitionBuilder是构建进出动画,默认动画是渐隐渐显,构建缩放动画代码如下: showGeneralDialog...下面的2个按钮根据应用程序支持语言显示相应语言,比如显示中文方法如下: 在pubspec.yaml中配置支持国际化: dependencies: flutter: sdk: flutter...flutter_localizations: sdk: flutter 在MaterialApp中配置当前区域: MaterialApp( title: 'Flutter Demo...通常情况下,我们希望直接从底部弹出,showModalBottomSheet提供了直接从底部弹出功能。...欢迎加入Flutter微信交流群(laomengit),一起学习,一起进步,生活不止眼前苟且,还有诗和《远方》。 今天文章对大家是否有帮助?

1.8K10

你知道吗,Flutter内置了10多种show

[1240] 注意:无特殊说明,Flutter版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 showDialog showDialog 用于弹出...barrierColor:背景颜色 transitionDuration:动画时长, transitionBuilder是构建进出动画,默认动画是渐隐渐显,构建缩放动画代码如下: showGeneralDialog...下面的2个按钮根据应用程序支持语言显示相应语言,比如显示中文方法如下: 在pubspec.yaml中配置支持国际化: dependencies: flutter: sdk: flutter...flutter_localizations: sdk: flutter 在MaterialApp中配置当前区域: MaterialApp( title: 'Flutter Demo...showModalBottomSheet 从底部弹出,通常和BottomSheet配合使用,用法如下: showModalBottomSheet( context: context,

1.9K11
  • Flutter 入门指北之弹窗和提示(干货)

    前面的小节把常用一些部件都介绍了,这节介绍下 Flutter一些操作提示。...,两种方式只有在展示类型上差别,方法调用无差,而且 showBottomSheet 和 fab 有组合动画showModalBottomSheet 则没有,看下实际例子吧。...AboutDialog 会自带两个按钮 VIEW LICENSES 和 CLOSE,VIEW LICENSES 会跳转一个 Flutter Licenses 网页,CLOSE 会关闭,至于为什么是英文...,是因为我们没有设置语言原因,这个涉及到多语言,这边推荐几篇之前看过文章,如果下次有时间的话会单独拿出来讲下 这边为了支持中文,我们做下如下修改,首先打开 pubspec.ymal 文件加入如下支持...Dialog 状态保持 假如有个需求,需要在弹出 Dialog 显示当前被改变值,然后通过按钮可以修改这个值 ,该如何实现。

    2.2K20

    打开Flutter动画另一种姿势——Flare

    开头 日常开发过程中我们时常能遇到 动画 需求,flutter中使用动画方式主要分为三种: 1.通过 AnimationController 及各种 Animation(如线性动画TweenAnimation...1240] 然后调整中下方区域,首先打开动画时长区间,然后将指针拨到00:01:00(mac可以使用快捷键command+shift+左右,windows可以使用快捷键ctrl+shift+左右,一次调整.../flare/animation_test/preview 导入flutter 首先,导出这个flare文件 [strip] 之后在flutter项目中添加flare插件,同时在 lib 同级目录下创建... flrs 文件夹用于存放 flr文件: [1240] 运行 flutter packages get 后,即可准备开始使用动画了。...结尾 以上,都只是flutter魅力冰山一角,使用flutter不仅可以极大提高开发效率,还能带来美好开发体验。 希望未来开发过程中,UI设计师可以使用Flare这项工具。

    2K30

    如何快速提升 Flutter App 中动画性能

    观前提醒:本文假设你已经有一定 Flutter 开发经验,对Flutter Widget,RenderObject 等概念有所了解,并且知道如何开启 DevTools。...涉及到动画,有状态,用 StatefulWidget ,State 里创建一个 AnimationController,用两个 Container 对应两个圈,外圈 Container 宽高监听动画跟着更新就行...毕竟这个动画很简单,内圈完全不变,只有外圈随时间累加而放大/缩小。这个外圈动画自己画行不行?...结语 恭喜你,又离资深 Flutter 开发更近了一步。通过本文,你应该学会了如何Flutter 动画动得更有效率。关注公众号 逆锋起笔,回复 pdf,下载你需要各种学习资料。...还在等什么呢,赶快回去按本文思路优化你项目中动画吧。 如有更好思路,或者其它点,欢迎留下你评论。

    1.5K20

    Flutter 专题】20 图解【分享页面】底部对话框

    和尚在学习 Flutter 过程中需要处理一个类似 Android 中 PopupWindow 效果分享弹框页。看似很简单页面,里面却有很多值得尝试地方。...1.2 若此时设置内容 Widget 宽高,会发现依旧是重新打开一个页面,高度从底向上占据所设置高度,且点击空白区不会消失,如图: ?...Modal 式工作表:是一个半透明页面,默认占据屏幕一半 ScaffoldState.showModalBottomSheet。...方式开启工作表,同时内容 Widget 不限制宽高,效果为打开一个半透明页面,默认占据屏幕一半,点击空白区工作表消失,如图: ?...2.3 若此时设置内容 Widget 数据量很多,效果如何呢,这就是和尚选择用 GridView 原因,在现有宽高内进行可滑动操作即可,如图: ?

    1.2K71

    Flutter操作提示

    在前面的文章中我们学习了Flutter中输入以及选择控件用法,借助于这些组件大家可以完成很多常用功能,但是他不能及时在用户操作后完成相应界面提示,所以今天我们就会来看下Flutter操作提示。...在原生客户端有着几种常用用户提醒方式,如Dialog、Snackbar、BottomSheet等,今天我们就来介绍下Flutter中几种常用提醒方式。...,每当点击确认按钮既可以完成相应操作,这里我们仅仅是关闭掉了Dialog而已。...这两种方法都可以显示BottomSheet,只不过第一个是从新打开了一个界面来显示,第二个方法是直接在当前界面的下面来显示。...现在我们仅仅把方法名改为showModalBottomSheet再来看下 ? 当然,大家可以根据自己需要设置相应内容和点击事件来满足相应需求。

    2.1K30

    Flutter Dojo设计之道——骚气闪屏动画如何实现

    这篇文章是对Flutter动画实现思路一篇剖析,用一个简单动画,分析Flutter创建动画一般步骤 闪屏,实际上有两个作用。 宣传。通过Logo、广告等形式,在启动时,展示要宣传广告等内容。...Flutter Dojo闪屏动画,参考了著名大厂——P站App闪屏,相信大家应该都不陌生。 ? 动画其实比较简单,只是一个从两边向中间靠拢动画。...一般来说,Flutter动画创作,有下面几个步骤。...下面这个函数就演示了如何获取一个特定TextStyle下Text计算宽度。...先看【Flutter】Text动画,它从屏幕左边作用到中间带偏移地方,所以其动画范围是: begin: screenWidth, end: screenWidth / 2 - offset 相应

    1.3K21

    FlutterDialog

    Flutter中,各种提示框、弹出框是如何实现呢?今天我们就来聊一聊这个问题。 首先咱们来聊聊Flutter系统内置Dialog。...Flutter系统内置Dialog 关于Flutter系统内置Dialog,我们可以从两个层面去讨论,一个是showDialog层面,一个是showModalBottomSheet层面。...showModalBottomSheet 前面我们讲了通过showDialog来弹出提示框,通过showDialog弹出提示框都是在页面的中间。接下来我们看看如何从页面底部弹出一个Sheet。...如何自定义Dialog 上面我们讲了Flutter内置提示框,还介绍了一款flutter第三方提示组件fluttertoast,通常情况下,这些就满足我们日常开发需求了。...接下来我们想,如何实现让自定义Dialog自动消失功能呢?

    4.1K30

    Flutter如何在没有插件情况下制作旋转动画

    Flutter如何在没有插件情况下制作旋转动画 本文将向您展示如何使用Flutter 中内置RotationTransition小部件创建旋转动画。...它可以采用一个子部件和一个控制该子部件旋转动画: RotationTransition( turns: _animation, child: /* Your widget here */...完整示例 我们将要构建应用程序包含一个浮动操作按钮和一个由四种不同颜色四个圆圈组合而成小部件。一开始,小部件会自行无限旋转。但是,您可以使用浮动按钮停止和重新启动动画。...旋转 编码 main.dart 中完整源代码和解释: // main.dart import 'package:flutter/material.dart'; void main() { runApp...override void dispose() { _controller.dispose(); super.dispose(); } } 结论 您已经在不使用任何第三方软件包情况下构建了自己旋转动画

    1.6K10

    Flutter开发之路由与导航实现

    如果说构成视图元素基本单位是组件,那么构成应用程序基本单位就是页面。对于拥有多个页面的应用程序而言,如何从一个页面平滑地过渡到另一个页面,是技术框架需要考虑问题。...其中,Route是页面的抽象,主要负责创建界面、接收参数以及响应导航器Navigator打开关闭。...而Navigator则用于维护路由栈管理,Route打开即入栈,Route关闭即出栈,当然还可以替换栈内某一个Route。...其中,MaterialPageRoute是一种路由模板,定义了路由创建以及路由切换过渡动画相关配置,该配置可以根据不同平台实现与平台页面切换动画风格一致路由切换动画。...为了精细化控制路由切换,Flutter 提供了页面打开与页面关闭参数机制,我们可以在页面创建和目标页面关闭时,取出相应参数。

    3.2K10

    Flutter】自定义滚动开关

    **我们将在flutter应用程序中使用lite_rolling_switch 包来实现一个自定义滚动开关演示程序,该程序具有吸引人动画和一些属性。...它显示了自定义滚动开关如何flutter应用程序中使用lite_rolling_switch包工作。...LiteRollingSwitch有一些属性是: **onChanged:**当用户打开关闭开关时,将调用此属性。 **value:此属性用于确定此开关是打开还是关闭。...**animationDuration:**此属性用于动画完成一个周期应花费时间。 **colorOn:**此属性用于在开关打开时显示颜色。...我们将添加animationDuration手段来延迟动画开始并添加onChanged表示用户打开关闭开关时间。当我们运行应用程序时,我们应该获得屏幕输出,如屏幕下方截图所示。

    33.4K60
    领券