import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
_showDialog(BuildContext context) {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('提示'),
content: Text('這是一個Dialog！'),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('取消')),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('確定'))
],
));
}
_showSimpleDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return SimpleDialog(
title: Text('SimpleDialog'),
children: <Widget>[
new SimpleDialogOption(
child: new Text("SimpleDialogOption One"),
onPressed: () {
Navigator.of(context).pop("SimpleDialogOption One");
},
),
new SimpleDialogOption(
child: new Text("SimpleDialogOption Two"),
onPressed: () {
Navigator.of(context).pop("SimpleDialogOption Two");
},
),
new SimpleDialogOption(
child: new Text("SimpleDialogOption Three"),
onPressed: () {
Navigator.of(context).pop("SimpleDialogOption Three");
},
),
],
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {
_showDialog(context);
},
child: Text(
'Material風格的AlertDialog',
style: TextStyle(fontSize: 18, color: Colors.red),
),
),
RaisedButton(
onPressed: () {
_showSimpleDialog(context);
},
child: Text(
'SimpleDialog',
style: TextStyle(fontSize: 18, color: Colors.red),
),
),
RaisedButton(
onPressed: () {
//Dialog 點擊按鈕返回值
_showIOSDialog(context).then((value) {
print("對話框消失:$value");
});
},
child: Text(
'IOS風格的AlertDialog',
style: TextStyle(fontSize: 18, color: Colors.red),
),
),
RaisedButton(
onPressed: () {
_showMyDialogWithColumn(context).then((val) {
print('${val}');
});
},
child: Text(
'列表項對話框',
style: TextStyle(fontSize: 18, color: Colors.red),
),
),
RaisedButton(
onPressed: () {
_showMyDialogWithStateBuilder(context);
},
child: Text(
'StatefulWidget',
style: TextStyle(fontSize: 18, color: Colors.red),
),
),
RaisedButton(
onPressed: () {
_showMyCustomLoadingDialog(context);
},
child: Text(
'自定義',
style: TextStyle(fontSize: 18, color: Colors.red),
),
),
],
),
),
);
}
Future _showIOSDialog(BuildContext context) {
return showCupertinoDialog(
context: context,
builder: (context) {
return new CupertinoAlertDialog(
title: new Text("title"),
content: new Text("內容內容內容內容內容內容內容內容內容內容內容"),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.of(context).pop("點擊了確定");
},
child: new Text("確認"),
),
new FlatButton(
onPressed: () {
Navigator.of(context).pop("點擊了取消");
},
child: new Text("取消"),
),
],
);
});
}
Future _showMyDialogWithColumn(BuildContext context) {
var index = -1;
return showDialog(
context: context,
builder: (context) {
return new AlertDialog(
title: new Text("title"),
content: Container(
height: 200,
child: new SingleChildScrollView(
child: new Column(
children: <Widget>[
GestureDetector(
onTap: () {
index = 1;
},
child: new SizedBox(
child: new Text("1"),
),
),
Divider(
color: Colors.grey,
),
GestureDetector(
onTap: () {
index = 2;
},
child: new SizedBox(
child: new Text("2"),
),
),
Divider(
color: Colors.grey,
),
GestureDetector(
onTap: () {
index = 3;
},
child: new SizedBox(
child: new Text("3"),
),
),
Divider(
color: Colors.grey,
),
GestureDetector(
onTap: () {
index = 4;
},
child: new SizedBox(
child: new Text("4"),
),
),
Divider(
color: Colors.grey,
),
],
),
),
),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.of(context).pop(index);
},
child: new Text("確認"),
),
new FlatButton(
onPressed: () {
Navigator.of(context).pop(-1);
},
child: new Text("取消"),
),
],
);
});
}
void _showMyDialogWithStateBuilder(BuildContext context) {
showDialog(
context: context,
builder: (context) {
bool selected = false;
return new AlertDialog(
title: new Text("StatefulBuilder"),
content:
new StatefulBuilder(builder: (context, StateSetter setState) {
return Container(
child: new CheckboxListTile(
title: new Text("選項"),
value: selected,
onChanged: (bool) {
setState(() {
selected = !selected;
});
}),
);
}),
);
});
}
void _showMyCustomLoadingDialog(BuildContext context) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return new MyCustomLoadingDialog();
});
}
}
class MyCustomLoadingDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
Duration insetAnimationDuration = const Duration(milliseconds: 100);
Curve insetAnimationCurve = Curves.decelerate;
RoundedRectangleBorder _defaultDialogShape = RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(2.0)));
return AnimatedPadding(
padding: MediaQuery.of(context).viewInsets +
const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
duration: insetAnimationDuration,
curve: insetAnimationCurve,
child: MediaQuery.removeViewInsets(
removeLeft: true,
removeTop: true,
removeRight: true,
removeBottom: true,
context: context,
child: Center(
child: SizedBox(
width: 120,
height: 120,
child: Material(
elevation: 24.0,
//dialog背景顏色
color: Color(0x88000000),
type: MaterialType.card,
//在這裏修改成我們想要顯示的widget就行了，外部的屬性跟其他Dialog保持一致
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(
//圓圈顏色控制
valueColor: AlwaysStoppedAnimation(Colors.white),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: new Text(
"加載中",
style: TextStyle(color: Colors.white),
),
),
],
),
shape: _defaultDialogShape,
),
),
),
),
);
}
}
Flutter之Dialog
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章