文章目录

appBar 返回按钮4 Checkbox：复选框5 CheckboxListTile：带标签与图标的复选框6 Radio：单选按钮7 RadioListTile：带标签与图标的单选按钮8 Switch：开关9 SwitchListTile：带标签与图标的开关10 Slider：滑动选择器11 安装第三方包（演示安装 Intl 包）12 显示格式化日期13 showDatePicker：选择日期showDatePicker：获取选择的日期15 showTimePicker：时间选择器16 Future：异步程序

appBar 返回按钮

Scaffold 设置了appBar，就会自动添加返回按钮

4 Checkbox：复选框

import 'package:flutter/material.dart'; class CheckBoxDemo extends StatefulWidget { CheckBoxDemo({Key key}) : super(key: key); @override _CheckBoxDemoState createState() => _CheckBoxDemoState(); } class _CheckBoxDemoState extends State<CheckBoxDemo> { bool _checkBoxItemA=true; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('CheckBoxDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Checkbox( value: _checkBoxItemA, //false 未勾选状态，true勾选状态，未勾选的颜色默认是Theme的accentColor onChanged: (value){ setState(() { _checkBoxItemA=value; }); }, activeColor:Colors.yellow ,//勾选后的颜色 ) ], ) ], ), ), ); } }

5 CheckboxListTile：带标签与图标的复选框

import 'package:flutter/material.dart'; class CheckBoxDemo extends StatefulWidget { CheckBoxDemo({Key key}) : super(key: key); @override _CheckBoxDemoState createState() => _CheckBoxDemoState(); } class _CheckBoxDemoState extends State<CheckBoxDemo> { bool _checkBoxItemA=true; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('CheckBoxDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ CheckboxListTile( value: _checkBoxItemA, onChanged: (value){ setState(() { _checkBoxItemA=value; }); }, title: Text('Checkbox Item A'),//主标题 subtitle: Text('Description'),//子标题 secondary:Icon(Icons.bookmark) ,//图标 selected: _checkBoxItemA,//选择状态，对应状态下图标颜色会变化 ), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ /*Checkbox( value: _checkBoxItemA, //false 未勾选状态，true勾选状态，未勾选的颜色默认是Theme的accentColor onChanged: (value){ setState(() { _checkBoxItemA=value; }); }, activeColor:Colors.yellow ,//勾选后的颜色 )*/ ], ) ], ), ), ); } }

6 Radio：单选按钮

import 'package:flutter/material.dart'; class RadioDemo extends StatefulWidget { RadioDemo({Key key}) : super(key: key); @override _RadioDemo createState() => _RadioDemo(); } class _RadioDemo extends State<RadioDemo> { int _radioGroupA=0; void _handleRadioValueChanged(int value){ setState(() { _radioGroupA=value; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('RadioDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Radio( value: 0, groupValue: _radioGroupA, onChanged: _handleRadioValueChanged, activeColor: Colors.black, ), Radio( value: 1, groupValue: _radioGroupA, onChanged: _handleRadioValueChanged, activeColor: Colors.black, ) ], ) ], ), ), ); } }

7 RadioListTile：带标签与图标的单选按钮

import 'package:flutter/material.dart'; class RadioDemo extends StatefulWidget { RadioDemo({Key key}) : super(key: key); @override _RadioDemo createState() => _RadioDemo(); } class _RadioDemo extends State<RadioDemo> { int _radioGroupA=0; void _handleRadioValueChanged(int value){ setState(() { _radioGroupA=value; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('RadioDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('RadioGroupValue:$_radioGroupA'), SizedBox(height:32.0), RadioListTile( value: 0, groupValue: _radioGroupA, onChanged: _handleRadioValueChanged, title: Text('Options A'), subtitle: Text('Description'), secondary: Icon(Icons.filter_1), selected: _radioGroupA==0,//是否使用选中的颜色 ), RadioListTile( value: 1, groupValue: _radioGroupA, onChanged: _handleRadioValueChanged, title: Text('Options B'), subtitle: Text('Description'), secondary: Icon(Icons.filter_2), selected: _radioGroupA==1,//是否使用选中的颜色 ), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ], ) ], ), ), ); } }

8 Switch：开关

import 'package:flutter/material.dart'; class SwitchDemo extends StatefulWidget { SwitchDemo({Key key}) : super(key: key); @override _SwitchDemo createState() => _SwitchDemo(); } class _SwitchDemo extends State<SwitchDemo> { bool _switchItemA=false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('RadioDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text(_switchItemA?'😀':'😔'), Switch( value: _switchItemA, onChanged: (value){ setState(() { _switchItemA=value; }); } ) ], ) ], ), ), ); } }

9 SwitchListTile：带标签与图标的开关

import 'package:flutter/material.dart'; class SwitchDemo extends StatefulWidget { SwitchDemo({Key key}) : super(key: key); @override _SwitchDemo createState() => _SwitchDemo(); } class _SwitchDemo extends State<SwitchDemo> { bool _switchItemA=false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('RadioDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ SwitchListTile( value: _switchItemA, onChanged: (value){ setState(() { _switchItemA=value; }); }, title: Text('Switch Item A'), subtitle: Text('Description'), secondary: Icon(_switchItemA?Icons.visibility:Icons.visibility_off), selected: _switchItemA, ) , Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ], ) ], ), ), ); } }

10 Slider：滑动选择器

import 'package:flutter/material.dart'; class SliderDemo extends StatefulWidget { @override _SliderDemoState createState() => _SliderDemoState(); } class _SliderDemoState extends State<SliderDemo> { double _sliderItemA = 0.0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('SliderDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Slider( value: _sliderItemA, onChanged: (value) { setState(() { _sliderItemA = value; }); }, activeColor: Theme.of(context).accentColor, inactiveColor: Theme.of(context).accentColor.withOpacity(0.3), min: 0.0, max: 10.0, divisions: 10, label: '${_sliderItemA.toInt()}', ), ], ), SizedBox(height: 16.0,), Text('SliderValue: $_sliderItemA'), ], ), ) ); } }

11 安装第三方包（演示安装 Intl 包）

搜索包，打开，找到版本号

点击运行会自动安装。

12 显示格式化日期

import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; class DateTimeDemo extends StatefulWidget { DateTimeDemo({Key key}) : super(key: key); @override _DateTimeDemo createState() => _DateTimeDemo(); } class _DateTimeDemo extends State<DateTimeDemo> { final DateTime selectedDate=DateTime.now(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('DateTimeDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ InkWell(//可以添加一个onTap属性 onTap:(){ }, child: Row( children:<Widget>[ Text(DateFormat.yMMMd().format(selectedDate)), Icon(Icons.arrow_drop_down), ] ), ), ], ) ], ), ), ); } }

13 showDatePicker：选择日期

import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; class DateTimeDemo extends StatefulWidget { DateTimeDemo({Key key}) : super(key: key); @override _DateTimeDemo createState() => _DateTimeDemo(); } class _DateTimeDemo extends State<DateTimeDemo> { final DateTime selectedDate=DateTime.now(); _selectDate(){ showDatePicker( context: context, initialDate: selectedDate,//初始时间 firstDate: DateTime(1900), //可选择的最早日期 lastDate: DateTime(2100)//可选择的未来期限 ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('DateTimeDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ InkWell(//可以添加一个onTap属性 onTap:_selectDate, child: Row( children:<Widget>[ Text(DateFormat.yMd().format(selectedDate)), Icon(Icons.arrow_drop_down), ] ), ), ], ) ], ), ), ); } }

showDatePicker：获取选择的日期

import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'dart:async'; class DateTimeDemo extends StatefulWidget { DateTimeDemo({Key key}) : super(key: key); @override _DateTimeDemo createState() => _DateTimeDemo(); } class _DateTimeDemo extends State<DateTimeDemo> { DateTime selectedDate=DateTime.now(); _selectDate() async { final DateTime date=await showDatePicker( context: context, initialDate: selectedDate,//初始时间 firstDate: DateTime(1900), //可选择的最早日期 lastDate: DateTime(2100)//可选择的未来期限 ); if(date== null)return; setState(() { selectedDate=date; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('DateTimeDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ InkWell(//可以添加一个onTap属性 onTap:_selectDate, child: Row( children:<Widget>[ Text(DateFormat.yMd().format(selectedDate)), Icon(Icons.arrow_drop_down), ] ), ), ], ) ], ), ), ); } }

15 showTimePicker：时间选择器

import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'dart:async'; class DateTimeDemo extends StatefulWidget { DateTimeDemo({Key key}) : super(key: key); @override _DateTimeDemo createState() => _DateTimeDemo(); } class _DateTimeDemo extends State<DateTimeDemo> { DateTime selectedDate=DateTime.now(); TimeOfDay selectedTime=TimeOfDay(hour: 9, minute: 30); _selectDate() async { final DateTime date=await showDatePicker( context: context, initialDate: selectedDate,//初始时间 firstDate: DateTime(1900), //可选择的最早日期 lastDate: DateTime(2100)//可选择的未来期限 ); if(date== null)return; setState(() { selectedDate=date; }); } _selectTime() async{ final TimeOfDay time=await showTimePicker( context: context, initialTime: selectedTime, ); if(time==null)return; setState(() { selectedTime=time; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('DateTimeDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ InkWell(//可以添加一个onTap属性 onTap:_selectDate, child: Row( children:<Widget>[ Text(DateFormat.yMd().format(selectedDate)), Icon(Icons.arrow_drop_down), ] ), ), InkWell(//可以添加一个onTap属性 onTap:_selectTime, child: Row( children:<Widget>[ Text(selectedTime.format(context)), Icon(Icons.arrow_drop_down), ] ), ), ], ) ], ), ), ); } }

16 Future：异步程序

如果程序里有一些接口需要花费一些时间去执行，比如读取文件等等，我们一般不会一直等待它完成。一般会让他先返回一个初始值，然后等他执行完了，再更新新的值。 async