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

如何在flutter上从CupertinoTimerPicker inside showModalBottomSheet返回数据?

在Flutter中,可以通过使用CupertinoTimerPicker和showModalBottomSheet来实现从CupertinoTimerPicker中返回数据的功能。下面是一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter CupertinoTimerPicker'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open Timer Picker'),
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext builder) {
                return Container(
                  height: MediaQuery.of(context).copyWith().size.height / 3,
                  child: CupertinoTimerPicker(
                    mode: CupertinoTimerPickerMode.hms,
                    onTimerDurationChanged: (Duration duration) {
                      Navigator.pop(context, duration);
                    },
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个HomePage,其中包含一个按钮,点击按钮后会打开一个底部弹出框,其中包含了一个CupertinoTimerPicker。当用户在CupertinoTimerPicker中选择完时间后,点击确定按钮,底部弹出框会关闭,并将选择的时间作为返回值传递回去。

要注意的是,我们使用了showModalBottomSheet来显示底部弹出框,并在CupertinoTimerPicker的onTimerDurationChanged回调中使用Navigator.pop来关闭底部弹出框并返回数据。

这是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有帮助!

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

相关·内容

  • Flutter「发布预览版 2」让 iOS 应用至臻完美

    CupertinoTimerPicker: 用于创建倒数定时器 CupertinoSegmentedControl: 用于创建水平分段控件 CupertinoActionSheet: 用于创建 iOS...CupertinoNavigationBar 和 CupertinoSliverNavigationBar 在切换页面时,实现视差滚动效果 基于 CupertinoPageRoute.title 自动填充页面标题和返回按钮的标签...(请注意: 尽管以上改进对 iOS 和 Android 均适用,但鉴于 iOS 安装包的构建方法异于 Android,您可能会在 iOS看到不同的结果。)...除了上述调查数据以外,我们还可以其它许多方面感受到 Flutter 社区的蓬勃发展。...△ 四大热门 UI 框架在 StackOverflow 网站上的问题访问量统计图 第一天诞生起,Flutter 就一直坚持开源,因为这是我们的选择。

    1.1K60

    Flutter实战 | 0 搭建「网易云音乐」APP(八、我的页面)

    前期回顾: 1.Flutter实战 | 0 搭建「网易云音乐」APP(一、创建项目、添加插件、通用代码)2.Flutter实战 | 0 搭建「网易云音乐」APP(二、Splash Page、登录页...、发现页)3.Flutter实战 | 0 搭建「网易云音乐」APP(三、每日推荐、推荐歌单)4.Flutter实战 | 0 搭建「网易云音乐」APP(四、排行榜、播放页面)5.Flutter实战...| 0 搭建「网易云音乐」APP(五、播放功能逻辑)6.Flutter实战 | 0 搭建「网易云音乐」APP(六、歌词(一))7.Flutter实战 | 0 搭建「网易云音乐」APP(七、...那么先来看一下返回数据是什么样的: ? emmm,只返回了一个 playlist,那就说明要让我们自己来找这两个的区别了。...= user.account.id).toList(); ok,数据有了,画页面就简单多了,图上我们也可以看得出来,是可以展开和收回的。

    1.5K00

    Flutter 专题】08 小小优化【登录】页面

    和尚查了一下官网,调整方式很简单,将根 widget 调整为 body: new ListView(),Flutter 中的 ListView 不仅代表列表 (ListView/RecycleView)...优化二:文本框 TextField 中尾部添加【清空数据】图标 方式一:使用层布局 Stack,在输入文本框 TextField 一层添加一个【清空数据】图标; new Padding( padding...优化三:调整键盘弹出样式 设置文本框 TextField 中 keyboardType: TextInputType.phone, Flutter 提供了多种弹出键盘的方式:text/datetime...优化四:根据输入文本框添加【温馨提示】对话框 Flutter 提供了创建和显示弹出对话框的功能,:showDialog/showMenu/showModalBottomSheet 等,和尚采用的是对话框方式...相关注意 Flutter 提供了很多便利的小图标,使用起来非常方便,和尚但就一个小【×】找到了好几个类似的图,希望可以多多尝试,体验一下。

    1.5K51

    flutter开发技巧汇总

    但实际,还有一个更加直接的: Divider( height: 1.0, color: colorDivider, ) 他们的区别就是上面那个对Container容器做了一个Border,因此...4、你也许想实现一个顶部弹框,但是似乎flutter只提供了showModalBottomSheet这种,或者中间的弹框,而且占据的控件不会铺满整个width,所以 image.png 一个这样的弹框应该如何实现呢...5、SegmentedControl是苹果的一个空间,flutter也有,只不过在使用的时候,需要import 'package:flutter/cupertino.dart';,用上后可以出去 image.png...CupertinoPageRoute(builder: (context) { return PostFeed(feedListBloc:_feedListBloc); })); 8、很多时候我们需要多页面共享数据...,以及数据模型与界面逻辑分离,以便更好的组织代码,做出更加好维护,规模更大的app,笔者官方举办的那个“枯燥无味的flutter show”节目中发现了一种比较好的设计模式,BLOC模式,很好的实现了代码中模型与数据的分离

    1.7K81

    【译】Flutter架构综述

    底层到顶层,我们有: 基础类和构件服务,动画,绘画和手势,在底层基础提供了常用的抽象。 渲染层提供了一个处理布局的抽象。通过这一层,你可以建立一个可渲染对象的树。...我们描述了Flutter何在平台层面与其他代码进行交互,然后简要总结了Flutter的Web支持与其他目标的不同之处。...关于这个过程的更多信息可以在Inside Flutter主题中找到。 在每个渲染帧Flutter可以通过调用该widget的build()方法,仅仅重新创建UI中状态已经改变的部分。...因此,第三种小组件类型 InheritedWidget 提供了一种共享祖先中抓取数据的简单方法。...数据像Map这样的Dart类型序列化为标准格式,然后反序列化为Kotlin(HashMap)或Swift(Dictionary)中的等价表示。 ?

    5.6K10

    Flutter 入门指北之基础部件

    Flutter App 接着看下 MyApp 这个类,继承自 StatelessWidget 并在 build 方法返回一个 MaterialApp 实例,(偷偷讲下,其实这边还可以返回 CupertinoApp...,这是一个 iOS 风格的 widget,基本你看到部件带 「Cupertino」的都是 iOS 风格的 widget,这里先不讲 iOS 风格的部件,目前 flutter 对 Cupertino 系列的...是状态不可变部件,通过其构建的部件一般用来展示固定内容,例如需要展示固定的功能按钮列表,不需要根据不同界面状态进行修改其展示内容 StatefulWidget 是可改变状态的部件,比如我们需要通过网络或者数据库获取数据...当然,不是说 StatelessWidget 不能实现修改界面数据的功能,这就需要涉及到 状态管理 的概念了,后面有机会再讲,这边先埋坑【坑1】 Flutter Scaffold 进入 App 后就需要构建界面了...TAB 切换部件 this.bottomSheet, // 展示底部弹出的,起到提示作用的,通过 showModalBottomSheet 展示 this.backgroundColor

    1.3K30

    深入探究Flutter中的页面导航器:Navigator详解

    而当我们页面返回时,会将当前页面对应的路由对象路由栈中弹出,返回到上一个页面。...下面我们来学习如何在Flutter中进行页面路由导航,以及如何使用Navigator.push和Navigator.pop进行页面的跳转和返回操作。 1....这样就实现了当前页面跳转到名为SecondPage的新页面。 2. 页面返回: 要实现页面的返回操作,我们可以使用Navigator.pop方法。...常见问题解答: 如何处理页面间传递的数据? 在Flutter中,可以通过路由参数传递数据,也可以通过全局状态管理器(Provider、Riverpod等)来共享数据。...另外,也可以使用SharedPreferences或数据库等持久化方案来存储和获取数据。 如何在页面返回时传递数据? 可以通过Navigator.pop方法的第二个参数来传递数据

    1.1K10

    Flutter 旋转轮

    pub 地址:https://pub.dev/packages/flutter_spinwheel 效果演示: 该演示视频展示了如何在Flutter中使用自旋轮。...它显示了如何在flutter应用程序中使用「flutter_spinwheel」软件包运行「旋转轮」,并显示了当您点击该项目时,旋转器将移动。同样,您将沿顺时针/逆时针的任何方向移动微调器。...**onChanged:**此 属性用于在每次更改选择时微调器菜单返回所选值的回调。 「select」:此 属性用于选择(突出显示)圆的扇区。范围是0(项目大小)。想象它就像一个数组。...autoPlay」表示设置为true进行自动播放,「hideOthers」表示确定是否应绘制快门以隐藏除选定」项「以外的所有选项,应当绘制边框」指令**确定是否应绘制边框,「onChanged」表示每次更改选择时微调器菜单返回所选值的回调...当我们运行应用程序时,我们应该获得屏幕的输出,屏幕下方的截图所示。

    8.8K20

    一个会做饭的程序员如何每天给女朋友带不同的便当?

    以前就想过要开发一个APP,来随机决定明天吃什么菜,然而世界最痛苦的事情是: 我是一个 Android 开发崽,而女朋友用的是 iPhone!这难道就是世界最遥远的距离吗?!...就在这时,Flutter 来了,它带着耀眼的光芒和风骚的话语:来啊!我啊! 这™不还是男人? APP 展示 APP基本上一个整天就开发完成了,后续进行了一系列的需求调整,先来看图: ? ? ?...(), ); 通过 RepaintBoundary 包裹住 Scaffold,然后给定一个 globalKey,这样就可以进行截图了: // 代码为 FengY 所写 // 截图boundary,并且返回图片的二进制数据...因为截图会有一定的延时,并且返回值为一个 Future ,那我们没有理由不用 FutureBuilder,如有不了解 FutureBuilder 的,可以查看我的这篇文章:Flutter FutureBuilder...如果你还没有了解过 ExpansionPanelList,那么我建议读我的这篇文章:Flutter ExpansionPanel 超级实用展开控件 剩下的就很简单了,通过数据来判断是否展示 已使用标识

    1.1K50

    Flutter 移动应用程序中创建一个列表

    Flutter 是一个流行的开源工具包,它可用于构建跨平台的应用。在文章《用 Flutter 创建移动应用》中,我已经向大家展示了如何在 Linux 中安装 Flutter 并创建你的第一个应用。...而这篇文章,我将向你展示如何在你的应用中添加一个列表,点击每一个列表项可以打开一个新的界面。...'$_counter', // $ sign allows us to use variables inside a string....然后将光标放到 StatefulWidget (下面红色的下划线处), 按 Alt+Enter 后出现下拉列表,然后选择 package:flutter/material.dart: image.png...可以在安卓模拟器或物理设备运行我们的应用来测试这个动画。当你打开或者关闭列表项的详情页时,你会看到一个漂亮的图标动画:

    3.1K10

    Flutter完整开发实战详解(七、 深入布局原理)

    ( ̄▽ ̄) 一、单子元素布局 在 Flutter 单个子元素的布局 Widget 中,Container 无疑是被用的最广泛的,因为它在“功能”并不会 Padding 等 Widget 那样功能单一...ConstrainedBox 源码,从下图源码可以看出,它是继承了 SingleChildRenderObjectWidget,关键是 override 了 createRenderObject 方法,返回了...Flutter 官方为了治疗我们“?...三、多子元素滑动布局 滑动布局作为 “多子元素布局” 的另一个分支, ListView 、GridView、Pageview ,它们在实现要复杂的多,从下图一个的流程我们大致可以知道它们的关系:...RenderViewport :A render object that is bigger on the inside. /// [RenderViewport] cannot contain [RenderBox

    1.3K20
    领券