flutter Dialog

import 'dart:math';

import 'package:flutter/material.dart';
import 'test.dart';
import 'package:flutter/cupertino.dart'; class HomePage extends StatelessWidget {
var selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dialog'),
),
body: Builder(builder: (BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
child: Text('SimpleDialog'),
onPressed: () {
_showSimpleDialog(context);
},
),
RaisedButton(
child: Text('AlertDialog'),
onPressed: () {
_showAlertDialog(context);
},
),
RaisedButton(
child: Text('CupertinoAlertDialog'),
onPressed: () {
_showCupertinoAlertDialog(context);
},
),
RaisedButton(
child: Text('CustomDialog'),
onPressed: () {
_showCustomDialog(context);
},
),
RaisedButton(
child: Text('bottomSheet'),
onPressed: () {
_showBottomView(context);
},
),
RaisedButton(
child: Text('bottomSelectSheet'),
onPressed: () {
_showSelectionDialog(context);
},
),
],
),
);
}));
} void _showBottomView(BuildContext context) {
var datas = List.generate(20, (index) {
return 'datas$index';
});
showModalBottomSheet(
context: context,
isScrollControlled: false,
builder: (ctx) {
return Container(
height: 200,
color: Colors.white,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.pop(context);
},
),
FlatButton(
child: Text('确定'),
splashColor: Colors.grey,
highlightColor: Colors.white,
onPressed: () {
Navigator.pop(context);
print('selectedIndex:$selectedIndex' +
'data:${datas[selectedIndex]}');
},
),
],
),
Expanded(
child: CupertinoPicker(
children: datas.map((item) {
return Text(item);
}).toList(),
onSelectedItemChanged: (index) {
print('$index');
selectedIndex = index;
},
itemExtent: 36,
),
)
],
),
);
},
);
} void _showSimpleDialog(BuildContext context) {
showDialog(
context: context,
// barrierDismissible: false,
builder: (ctx) {
return SimpleDialog(
// title: Text('SimpleDialog',textAlign: TextAlign.center,),
// titlePadding: EdgeInsets.all(10),
backgroundColor: Colors.amber,
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(6),
),
),
contentPadding: EdgeInsets.all(0),
children: <Widget>[
GestureDetector(
child: Image.asset(
'assets/123.jpg',
fit: BoxFit.cover,
// height: 400,
// width: 400,
),
onTap: () {
//先关闭弹窗
Navigator.pop(context);
//跳转到下一页
Navigator.push(
context,
MaterialPageRoute(builder: (context) => TestPage()),
);
},
)
// ListTile(
// title: Center(
// child: Text("Item_1"),
// ),
// ),
// ListTile(
// title: Center(
// child: Text("Item_2"),
// ),
// ),
// ListTile(
// title: Center(
// child: Text("Item_3"),
// ),
// ),
// ListTile(
// title: Center(
// child: Text("Close"),
// ),
// onTap: () {
// Navigator.pop(context);
// },
// ),
],
);
},
);
} void _showAlertDialog(BuildContext context) {
showDialog(
context: context,
barrierDismissible: true,
builder: (ctx) {
return AlertDialog(
title: Text(
'data',
textAlign: TextAlign.center,
),
content: Text(
'datadatadatadatadatasdadadatadatadatadatadatadatadatadatadatadatadatadata'),
elevation: 5,
actions: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton(
child: Text('确定'),
onPressed: () {},
),
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
],
);
},
);
} void _showCupertinoAlertDialog(BuildContext context) {
showDialog(
context: context,
barrierDismissible: true,
builder: (ctx) {
return CupertinoAlertDialog(
title: Text(
'data',
textAlign: TextAlign.center,
),
content: Text(
'datadatadatadatadatasdadadatadatadatadatadatadatadatadatadatadatadatadata'),
// elevation: 5,
actions: <Widget>[
// Row(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// children: <Widget>[
FlatButton(
child: Text('确定'),
onPressed: () {},
),
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.pop(context);
},
// ),
// ],
)
],
);
},
);
} void _showCustomDialog(BuildContext context) {
showDialog(
context: context,
barrierDismissible: true,
builder: (ctx) {
return CustomDialog();
},
);
} void _showSelectionDialog(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: false,
builder: (ctx) {
return Container(
color: Colors.grey,
height: 130,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
GestureDetector(
child: _itemCreat(context, '相机'),
onTap: (){
print('选中相机');
},
),
GestureDetector(
child: _itemCreat(context, '相册'),
onTap: (){
print('选中相册');
},
),
GestureDetector(
child: Padding(
padding: EdgeInsets.only(top: 10),
child: _itemCreat(context, '取消'),
),
onTap: (){
Navigator.pop(context);
},
)
],
),
);
},
);
} Widget _itemCreat(BuildContext context, String title) {
return Container(
color: Colors.white,
height: 40,
width: MediaQuery.of(context).size.width,
child: Center(
child: Text(
title,
style: TextStyle(fontSize: 16, color: Colors.black),
textAlign: TextAlign.center,
),
),
);
}
} class CustomDialog extends Dialog {
CustomDialog({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.white,
height: 365,
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Image.asset(
'assets/123.jpg',
fit: BoxFit.cover,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('确定'),
),
FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('取消'),
)
],
)
],
),
),
);
}
}

flutter dialog的更多相关文章

  1. flutter dialog异常Another exception was thrown: No MaterialLocalizations found

    flutter dialog异常Another exception was thrown: No MaterialLocalizations found import 'package:flutter ...

  2. 29 Flutter Dialog AlertDialog 、SimpleDialog、showModalBottomSheet、showToast

    pubspec.yaml fluttertoast: ^ Dialog.dart import 'package:flutter/material.dart'; import 'package:flu ...

  3. flutter dialog异常Another exception was thrown: Navigator operation requested with a context that does not include a Navigator

    我在使用flutter里的对话框控件的时候遇到了一个奇怪的错误 Another exception was thrown: Navigator operation requested with a c ...

  4. 这一次,解决Flutter Dialog的各种痛点!

    前言 Q:你一生中闻过最臭的东西,是什么? A:我那早已腐烂的梦. 兄弟萌!!!我又来了! 这次,我能自信的对大家说:我终于给大家带了一个,能真正帮助大家解决诸多坑比场景的pub包! 将之前的flut ...

  5. flutter Dialog里ListView的问题

    showDialog( context: context, builder: (ctx) { return // Dialog( // child: Container( // padding: Ed ...

  6. 一种更优雅的Flutter Dialog解决方案

    前言 系统自带的Dialog实际上就是Push了一个新页面,这样存在很多好处,但是也存在一些很难解决的问题 必须传BuildContext loading弹窗一般都封装在网络框架中,多传个contex ...

  7. Flutter Dialog 屏蔽返回键

    使用 WillPopScope + Future.value(false); 屏蔽返回键.代码如下: showDialog<Null>( context: context, // Buil ...

  8. Flutter GetX使用---简洁的魅力!

    前言 使用Bloc的时候,有一个让我至今为止十分在意的问题,无法真正的跨页面交互!在反复的查阅官方文档后,使用一个全局Bloc的方式,实现了"伪"跨页面交互,详细可查看:flutt ...

  9. Flutter 改善套娃地狱问题(仿喜马拉雅PC页面举例)

    前言 这篇文章是我一直以来很想写的一篇文章,终于下定决心动笔了. 写Flutter的小伙伴可能都感受到了:掘金的一些热门的Flutter文章下,知乎的一些Flutter的话题下或者一些论坛里面,喷Fl ...

随机推荐

  1. redis和mongodb面试题(一)

    ● 请你回答一下mongodb和redis的区别 参考回答: 内存管理机制上:Redis 数据全部存在内存,定期写入磁盘,当内存不够时,可以选择指定的 LRU 算法删除数据.MongoDB 数据存在内 ...

  2. python 有用的库

    1.Faker pip3 install faker官网: https://faker.readthedocs.io/en/master/providers.htmlgithub: https://g ...

  3. 这打车App麻烦了!遭黑客勒索巨额比特币

    6月17日下午,易到用车发布<客服电话故障公告>称,5月25日-26日,易到平台遭到网络黑客攻击,核心服务器被入侵,攻击导致易到核心数据被加密,服务器宕机,绝大部分服务功能受到波及,且攻击 ...

  4. fastai 核心部件

    1.ImageDataBunch 对数据封装的很好,包括预处理都在这里面完成了 2.models 现有模型及权重 2-1  create_body 可以用来获取现有模型的主体结构 2-2 create ...

  5. jquery前端问题随记

    1.图片名称不变,但要求刷新,web页面不重新加载渲染,在url地址后面加t=时间戳 js脚本 img.src=url+"?t="+Math.random() 如果是jsp页面,要 ...

  6. highcharts的基本使用(转载)

    1 概述 Highcharts是一个跨浏览器的JavaScript图表控件,支持柱状图.趋势图.面积图.饼图.环形图.组合图.堆积图.散点图. Highcharts图表的基本功能,只需要引入两个JS类 ...

  7. 高性能mysql 第5章 创建高可用的索引

    b-tree索引 一定程度上说,mysql只有b-tree索引.他没有bitmap索引.还有一个叫hash索引的,只在Memory存储引擎中才有. b-tree索引跟oracle中的大同小异. mys ...

  8. HDU - 6396 Swordsman (单调性+贪心)

    题意:有n个怪物和k种属性,当且仅当你的每种属性都大于等于怪物的属性才可以击杀它,且击杀怪物可以提升你一定的属性值.求可击杀怪物的最大数量以最终的属性值. 这不就是银行家算法里的安全性检验么? 本题的 ...

  9. 华为集群后killsql命令和查看mr占用的磁盘空间

    (1) linux后台:yarn application -list 找到相应的命令 粘贴job (2)去FI manager 的 yarn上粘贴job 看详细过程 (3)确定后 在linux后台 y ...

  10. 快速排序java代码

    法一: //快速排序 通过测试 public class QuickSortTest2 { public static void quickSort(int[] data,int low,int hi ...