（十二）Flutter对话框SimpleDialogAlertDialogBottomSheetsnackBarExpansionPanel

修改main.dart 

import &＃39;package:flutter/material.dart&＃39;;
import &＃39;package:nihao_flutter/demo/form_demo.dart&＃39;;
import &＃39;package:nihao_flutter/demo/navigator_demo.dart&＃39;;
import &＃39;package:nihao_flutter/demo/home_demo.dart&＃39;;
import &＃39;package:nihao_flutter/demo/simple_dialog_demo.dart&＃39;;void main() &＃61;> runApp(MyApp());class MyApp extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) { // TODO: implement buildreturn MaterialApp(debugShowCheckedModeBanner: false,// home: NavigatorDemo(),initialRoute: &＃39;/dialog&＃39;,routes: {&＃39;/&＃39;:(context)&＃61;>HomeDemo(), &＃39;/form&＃39;:(context)&＃61;>FormDemo(), &＃39;/dialog&＃39;:(context)&＃61;>SimpleDialogDemo(), },theme: ThemeData(primarySwatch: Colors.yellow,highlightColor: Color.fromRGBO(255, 255, 255, 0.5),splashColor: Colors.red),);}
}

simle_dialog_demo.dart

简单的显示和关闭

import &＃39;package:flutter/material.dart&＃39;;class SimpleDialogDemo extends StatefulWidget {&＃64;override_SimpleDialogDemoState createState() &＃61;> _SimpleDialogDemoState();
}class _SimpleDialogDemoState extends State {_openSimpleDialog() {showDialog(context: context,builder: (BuildContext context) {return SimpleDialog(title: Text(&＃39;simpleDialog&＃39;),children: [SimpleDialogOption(child: Text(&＃39;Options A&＃39;),onPressed: (){// 关闭对话框Navigator.pop(context);},),SimpleDialogOption(child: Text(&＃39;Options B&＃39;),onPressed: (){// 关闭对话框Navigator.pop(context);},),SimpleDialogOption(child: Text(&＃39;Options C&＃39;),onPressed: (){// 关闭对话框Navigator.pop(context);},),],);});}&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(&＃39;SimpleDialogDemo&＃39;),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(),),floatingActionButton: FloatingActionButton(child: Icon(Icons.format_list_numbered),onPressed: _openSimpleDialog,),);}
}


获取simpledialog中的数值

import &＃39;package:flutter/material.dart&＃39;;
import &＃39;dart:async&＃39;;// 获取选中的数值
enum Option { A, B, C }class SimpleDialogDemo extends StatefulWidget {&＃64;override_SimpleDialogDemoState createState() &＃61;> _SimpleDialogDemoState();
}class _SimpleDialogDemoState extends State {String _chose &＃61; "nothing";Future _openSimpleDialog() async {final option &＃61; await showDialog(context: context,builder: (BuildContext context) {return SimpleDialog(title: Text(&＃39;simpleDialog&＃39;),children: [SimpleDialogOption(child: Text(&＃39;Options A&＃39;),onPressed: () {// 关闭对话框Navigator.pop(context, Option.A);},),SimpleDialogOption(child: Text(&＃39;Options B&＃39;),onPressed: () {// 关闭对话框Navigator.pop(context, Option.B);},),SimpleDialogOption(child: Text(&＃39;Options C&＃39;),onPressed: () {// 关闭对话框Navigator.pop(context, Option.C);},),],);});switch (option) {case Option.A:setState(() {_chose &＃61; "A";});break;case Option.B:setState(() {_chose &＃61; "B";});break;case Option.C:setState(() {_chose &＃61; "C";});break;default:}}&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(&＃39;SimpleDialogDemo&＃39;),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text(&＃39;你选择了:$_chose&＃39;),Row(mainAxisAlignment: MainAxisAlignment.center,children: [],)],),),floatingActionButton: FloatingActionButton(child: Icon(Icons.format_list_numbered),onPressed: _openSimpleDialog,),);}
}


AlertDialog

import &＃39;package:flutter/material.dart&＃39;;
import &＃39;dart:async&＃39;;
class AlertDialogDemo extends StatefulWidget {&＃64;override_AlertDialogDemoState createState() &＃61;> _AlertDialogDemoState();
}class _AlertDialogDemoState extends State {_openAlertDialog(){showDialog(context: context,// 空白地方点击不允许关闭barrierDismissible: false,builder: (BuildContext context){return AlertDialog(title: Text(&＃39;ALertDialog&＃39;),content: Text(&＃39;Are you sure about this?&＃39;),actions: [FlatButton(child: Text(&＃39;Cancel&＃39;),onPressed: (){Navigator.pop(context);},),FlatButton(child: Text(&＃39;OK&＃39;),onPressed: (){Navigator.pop(context);},)],);});}&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(&＃39;AlertDialogDemo&＃39;),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Row(mainAxisAlignment: MainAxisAlignment.center,children: [RaisedButton(child: Text(&＃39;Open AlertDialog&＃39;),onPressed: _openAlertDialog,)],)],),),);}
}

获取alert的值

import &＃39;package:flutter/material.dart&＃39;;
import &＃39;dart:async&＃39;;enum Action {Ok,Cancel,
}class AlertDialogDemo extends StatefulWidget {&＃64;override_AlertDialogDemoState createState() &＃61;> _AlertDialogDemoState();
}class _AlertDialogDemoState extends State {String _choice &＃61; &＃39;Nothing&＃39;;Future _openAlertDialog() async {final action &＃61; await showDialog(context: context,// 空白地方点击不允许关闭barrierDismissible: false,builder: (BuildContext context) {return AlertDialog(title: Text(&＃39;ALertDialog&＃39;),content: Text(&＃39;Are you sure about this?&＃39;),actions: [FlatButton(child: Text(&＃39;Cancel&＃39;),onPressed: () {Navigator.pop(context, Action.Cancel);},),FlatButton(child: Text(&＃39;OK&＃39;),onPressed: () {Navigator.pop(context, Action.Ok);},)],);});switch (action) {case Action.Ok:setState(() {_choice &＃61; &＃39;OK&＃39;;});break;case Action.Cancel:setState(() {_choice &＃61; &＃39;Canel&＃39;;});break;default:}}&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(&＃39;AlertDialogDemo&＃39;),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text(&＃39;你选择了:$_choice&＃39;),SizedBox(height: 16.0,),Row(mainAxisAlignment: MainAxisAlignment.center,children: [RaisedButton(child: Text(&＃39;Open AlertDialog&＃39;),onPressed: _openAlertDialog,)],)],),),);}
}


BottomSheet 底部滑动窗口

import &＃39;package:flutter/material.dart&＃39;;class BottomSheetDemo extends StatefulWidget {&＃64;override_BottomSheetDemoState createState() &＃61;> _BottomSheetDemoState();
}class _BottomSheetDemoState extends State {final _boottomSheetScaffoldKey &＃61; GlobalKey();_openBottomSheet() {_boottomSheetScaffoldKey.currentState.showBottomSheet((BuildContext context) {return BottomAppBar(child: Container(height: 90.0,width: double.infinity,padding: EdgeInsets.all(16.0),child: Row(children: [Icon(Icons.pause_circle_outline,),SizedBox(width: 16.0),Text(&＃39;01:30 / 03:30&＃39;),Expanded(child: Text(&＃39;Fix you - Coldplay&＃39;, textAlign: TextAlign.right),)],),),);});}_closeBottomSheet() {Navigator.pop(context);}&＃64;overrideWidget build(BuildContext context) {return Scaffold(key: _boottomSheetScaffoldKey,appBar: AppBar(title: Text(&＃39;BottomSheetDemo&＃39;),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Row(mainAxisAlignment: MainAxisAlignment.center,children: [FlatButton(child: Text(&＃39;Open BottomSheet&＃39;),onPressed: _openBottomSheet,),FlatButton(child: Text(&＃39;Close BottomSheet&＃39;),onPressed: _closeBottomSheet,)],)],),),);}
}

BottomSheet 对话框形式底部滑动窗口

这种bottomSheet显示出来以后就不能用别的东西了 一般分享功能都是用的这个

import &＃39;package:flutter/material.dart&＃39;;class BottomSheetDemo extends StatefulWidget {&＃64;override_BottomSheetDemoState createState() &＃61;> _BottomSheetDemoState();
}class _BottomSheetDemoState extends State {final _boottomSheetScaffoldKey &＃61; GlobalKey();_openBottomSheet() {_boottomSheetScaffoldKey.currentState.showBottomSheet((BuildContext context) {return BottomAppBar(child: Container(height: 90.0,width: double.infinity,padding: EdgeInsets.all(16.0),child: Row(children: [Icon(Icons.pause_circle_outline,),SizedBox(width: 16.0),Text(&＃39;01:30 / 03:30&＃39;),Expanded(child: Text(&＃39;Fix you - Coldplay&＃39;, textAlign: TextAlign.right),)],),),);});}Future _openModalBottomSheet() async{final option&＃61;await showModalBottomSheet(context: context,builder: (BuildContext context) {return Container(height: 200.0,child: Column(children: [ListTile(title: Text(&＃39;Option A&＃39;),onTap: (){Navigator.pop(context,"A");},),ListTile(title: Text(&＃39;Option B&＃39;),onTap: (){Navigator.pop(context,"B");},),ListTile(title: Text(&＃39;Option C&＃39;),onTap: (){Navigator.pop(context,"C");},),],),);});debugPrint(option);}&＃64;overrideWidget build(BuildContext context) {return Scaffold(key: _boottomSheetScaffoldKey,appBar: AppBar(title: Text(&＃39;BottomSheetDemo&＃39;),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Row(mainAxisAlignment: MainAxisAlignment.center,children: [FlatButton(child: Text(&＃39;Open BottomSheet&＃39;),onPressed: _openBottomSheet,),FlatButton(// 对话框形式底部滑动窗口child: Text(&＃39;Modal BottomSheet&＃39;),onPressed: _openModalBottomSheet,),],)],),),);}
}


SnackBar操作提示栏

import &＃39;package:flutter/material.dart&＃39;;
class SnackBarDemo extends StatefulWidget {&＃64;override_SnackBarDemoState createState() &＃61;> _SnackBarDemoState();
}class _SnackBarDemoState extends State {&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(&＃39;SnackBarDemo&＃39;),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Row(mainAxisAlignment: MainAxisAlignment.center,children: [SnackBarButton()],)],),),);}
}class SnackBarButton extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return FlatButton(child: Text(&＃39;Open SnackBar&＃39;),onPressed: (){Scaffold.of(context).showSnackBar(SnackBar(content: Text(&＃39;Processing....&＃39;),action: SnackBarAction(label: &＃39;Ok&＃39;,onPressed: (){debugPrint(&＃39;OK&＃39;);},),));},);}
}

ExpansionPanel面板的收缩

import &＃39;package:flutter/material.dart&＃39;;
class ExpansionPanelDemo extends StatefulWidget {&＃64;override_ExpansionPanelDemoState createState() &＃61;> _ExpansionPanelDemoState();
}class _ExpansionPanelDemoState extends State {// 面板不会自动收缩的 所以使用这个数值来控制自动收缩bool _isExpanded&＃61;false;&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(&＃39;ExpansionPanelDemo&＃39;),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 点击监听ExpansionPanelList(expansionCallback: (int panelIndex,bool isExpanded){setState(() {_isExpanded&＃61;!isExpanded; });},children: [ExpansionPanel(headerBuilder: (BuildContext context,bool isExpanded){return Container(padding: EdgeInsets.all(16.0),child: Text(&＃39;Panel A&＃39;,style: Theme.of(context).textTheme.title,),);},body:Container(padding: EdgeInsets.all(16.0),width: double.infinity,child: Text(&＃39;Content for Panel A&＃39;),),// 面板的 默认展开和关闭isExpanded: _isExpanded,)],)],),),);}
}

ExpansionPanel 面板列表项目

import &＃39;package:flutter/material.dart&＃39;;
class ExpansionPanelItem{final String headerText;final Widget body;bool isExpandede;ExpansionPanelItem({this.headerText,this.body,this.isExpandede,});
}class ExpansionPanelDemo extends StatefulWidget {&＃64;override_ExpansionPanelDemoState createState() &＃61;> _ExpansionPanelDemoState();
}class _ExpansionPanelDemoState extends State {// 面板不会自动收缩的 所以使用这个数值来控制自动收缩List _expansionPanelItems;&＃64;overridevoid initState() {super.initState();_expansionPanelItems&＃61;[ExpansionPanelItem(headerText: &＃39;Panel A&＃39;,body: Container(padding: EdgeInsets.all(16.0),width: double.infinity,child: Text(&＃39;Content for Panel A.&＃39;),),isExpandede: false,),ExpansionPanelItem(headerText: &＃39;Panel B&＃39;,body: Container(padding: EdgeInsets.all(16.0),width: double.infinity,child: Text(&＃39;Content for Panel B.&＃39;),),isExpandede: false,),ExpansionPanelItem(headerText: &＃39;Panel C&＃39;,body: Container(padding: EdgeInsets.all(16.0),width: double.infinity,child: Text(&＃39;Content for Panel C.&＃39;),),isExpandede: false,),];}&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(&＃39;ExpansionPanelDemo&＃39;),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 点击监听ExpansionPanelList(expansionCallback: (int panelIndex,bool isExpanded){setState(() {_expansionPanelItems[panelIndex].isExpandede&＃61;!isExpanded; });},children:_expansionPanelItems.map((ExpansionPanelItem item){return ExpansionPanel(isExpanded: item.isExpandede,body: item.body,headerBuilder: (BuildContext context,bool isExpanded){return Container(padding: EdgeInsets.all(16.0),child: Text(item.headerText,style: Theme.of(context).textTheme.title,),);});}).toList(),)],),),);}
}

main代码

import &＃39;package:flutter/material.dart&＃39;;
import &＃39;package:flutter_app/home/home.dart&＃39;;
import &＃39;demo/alert_dialog_demo.dart&＃39;;
import &＃39;demo/btootem_sheet_demo.dart&＃39;;
import &＃39;demo/expansion_panel_demo.dart&＃39;;
import &＃39;demo/form_demo.dart&＃39;;
import &＃39;demo/navigator_demo.dart&＃39;;
import &＃39;demo/page_demo.dart&＃39;;
import &＃39;demo/simple_dialog_demo.dart&＃39;;
import &＃39;demo/snack_bar_demo.dart&＃39;;void main() &＃61;> runApp(MyApp());class MyApp extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(debugShowCheckedModeBanner: false,// home: NavigatorDemo(),initialRoute: &＃39;/expansion_panel&＃39;,routes: {&＃39;/&＃39;: (context) &＃61;> Home(),&＃39;/form&＃39;: (context) &＃61;> FormDemo(),&＃39;/dialog&＃39;: (context) &＃61;> SimpleDialogDemo(),&＃39;/alert_dialog&＃39;: (context) &＃61;> AlertDialogDemo(),&＃39;/bottom_sheet&＃39;: (context) &＃61;> BottomSheetDemo(),&＃39;/snack_bar&＃39;: (context) &＃61;> SnackBarDemo(),&＃39;/expansion_panel&＃39;: (context) &＃61;> ExpansionPanelDemo(),},theme: ThemeData(primarySwatch: Colors.yellow,highlightColor: Color.fromRGBO(255, 255, 255, 0.5),splashColor: Colors.white70),);}
}