1.Checkbox
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
/ / the current Index
var currentIndex = 0;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Checkbox(
// Activate the color
activeColor: Colors.red,
// Is selected
value: currentIndex == 0.// the value may be true false null.
tristate: true,
onChanged: (bool check){
setState(() {
currentIndex = 0;
});
},
),
Checkbox(
// Activate the color
activeColor: Colors.red,
// Is selected
value: currentIndex == 1,
onChanged: (bool check){
setState(() {
currentIndex = 1; }); },)],); }}Copy the code
2. CheckboxListTile components
class _DemoPageState extends State<DemoPage> {
/ / the current Index
bool _value = false;
List<bool> isChecks = [false.false.false];
void _valueChanged(bool value){
for(int i=0; i<isChecks.length; i++){ isChecks[i] = value; }}bool isCheck = false;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
CheckboxListTile(
// value: currentIndex,
value: _value,
// The default text is selected
selected: true,
onChanged: _valueChanged,
// Whether the text is aligned with the icon height
dense: false.// Whether the text is displayed in three lines
isThreeLine: false.//
title: Text('Text content'),
// The position of the text and selector
controlAffinity: ListTileControlAffinity.leading,
/ / subheadings
subtitle: Text('Check the following options'),
// Small icon on the leftsecondary: Icon(Icons.archive), activeColor: Colors.red, ) ], ); }}Copy the code
3.Chip
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
/ / the current Index
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Wrap(
spacing: 8.0,
runSpacing: 8.0
),
Chip(
label: Text('Flutter')
),
Chip(
label: Text('React'),
backgroundColor: Colors.orange,
),
Chip(
label: Text('Vue'),
/ / to the head
avatar: CircleAvatar(
backgroundColor: Colors.green,
child: Text('1')
),
),
Chip(
label: Text('JQuery'),
/ / to the head
avatar: CircleAvatar(
backgroundImage: NetworkImage('https://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png'),
),
),
Chip(
label: Text('delete'),
/ / delete
onDeleted: (){},
deleteIcon: Icon(Icons.delete),
deleteIconColor: Colors.redAccent,
deleteButtonTooltipMessage: "Delete this tag",
),
Divider(
color: Colors.grey
),
/ / interactive
ActionChip(
label: Text('IOS'),
onPressed: (){
},
),
/ / filter
FilterChip(
label: Text('IOS'),
// Currently selected
selected: true,
onSelected: (value){
},
),
// The color changes when selected
ChoiceChip(
label: Text('IOS'),
// Currently selected
selected: true, selectedColor: Colors.black, onSelected: (value){ }, ) ], ); }}Copy the code
4.Dialog
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
/ / the current Index
void showDialogs(BuildContext context){
showDialog(
context: context,
builder: (_) => AboutDialog(
applicationName: 'IOS',
applicationIcon: Icon(Icons.apps),
applicationVersion: 'V3.1.2',
children: <Widget>[
Text('data'))); }void showSimpleDialog(BuildContext context){
showDialog(
context: context,
/ / the constructor
builder: (BuildContext context) => new SimpleDialog(
title: Text('choose'),
children: <Widget>[
SimpleDialogOption(
child: Text('option 1'),
onPressed: (){
}
),
SimpleDialogOption(
child: Text('option 1'),
onPressed: (){
}
)
],
),
);
}
void showAlter(BuildContext context){
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('title'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223')
],
)
),
actions: <Widget>[
FlatButton(
onPressed: (){
Navigator.of(context).pop();
},
child: Text('cancel')))); }@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Dialog(
child: Container(
height: 200.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('This is a Dialog'),
RaisedButton(
child: Text('cancel'),
onPressed: (){
Navigator.of(context).pop();
}
)
]
)
)
),
RaisedButton(
child: Text('open the AboutDialog'),
onPressed: (){
// showSimpleDialog(context);
showAlter(context);
// showDialogs(context)})],); }}Copy the code
5.Expanded fills the component
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
RaisedButton(
color: Colors.orange,
child: Text('Orange'Flex: 1, Child: RaisedButton(onPressed: (){}, color: Colors.green, child: Text('Green button'Expanded(Flex: 1, Child: RaisedButton(onPressed: (){}, color: color.green, child: Text()'Green button'),
),
),
RaisedButton(
color: Colors.orange,
child: Text('Orange'), onPressed: (){} ) ], ); }}Copy the code
6.GridTile,GridPaper
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
height: 400.0,
color: Colors.blue,
child: GridView.count(
// Number of columns
crossAxisCount: 2.// Vertical void
mainAxisSpacing: 10.0.// Horizontal void
crossAxisSpacing: 4.0./ / padding
padding: EdgeInsets.all(4.0),
/ / content
children: <Widget>[
GridTile(
child: Text('child'),
header: Text('header'),
footer: Text('footer'),
),
Image.network('FM = https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=2488674699, 968179528 & 74 & app = 80 & f = JPEG&size = f121, 121? The SEC = 1880279984 & t =c1366cfecb0f392b2735ffb82aface2f'),
GridTile(
child: Text('child'),
header: GridTileBar(
title: Text('header',style: TextStyle(color: Colors.red)),
// The front icon
leading: Icon(Icons.ac_unit),
),
footer: Text('footer'),
),
Image.network('FM = https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=2488674699, 968179528 & 74 & app = 80 & f = JPEG&size = f121, 121? The SEC = 1880279984 & t =c1366cfecb0f392b2735ffb82aface2f'),
// Add mesh effect
GridPaper(
child: Text('child'),
color: Colors.red,
),
Image.network('FM = https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=2488674699, 968179528 & 74 & app = 80 & f = JPEG&size = f121, 121? The SEC = 1880279984 & t =c1366cfecb0f392b2735ffb82aface2f'() [() [(). }}Copy the code
7.GridView Grid component
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
// return Column(
// children:
[
// _buildGridExtent()
/ /,
/ /);
return Center(
child: _buildGridSliver(),
);
}
Widget _buildGridExtent(){
return GridView.extent(
// Maximum length of the horizontal axis
maxCrossAxisExtent: 180.0.// Maximum number of columns on the horizontal axis
/ / padding
padding: EdgeInsets.all(4.0),
// Vertical spacing
mainAxisSpacing: 4.0.// Horizontal spacing
crossAxisSpacing: 4.0,
children: _buildGridTitleList(30)); } Widget _buildGridCount(){return GridView.count(
// Maximum number of columns on the horizontal axis
crossAxisCount: 3.// Maximum number of columns on the horizontal axis
/ / padding
padding: EdgeInsets.all(4.0),
// Vertical spacing
mainAxisSpacing: 4.0.// Horizontal spacing
crossAxisSpacing: 4.0,
children: _buildGridTitleList(30)); }// Load the Grid lazily (only the visible part is loaded)
Widget _buildGridSliver(){
return CustomScrollView(
primary: false,
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.all(20.0),
sliver: SliverGrid.count(
crossAxisCount: 2,
crossAxisSpacing: 10.0,
children: _buildGridTitleList(30(() [(). }// Customize the Grid
Widget _bulidGridCustoms(){
return GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0
),
childrenDelegate: SliverChildBuilderDelegate(
(Content,index){
return Image.asset('assets/1.png');
},
childCount: 30)); }List<Container> _buildGridTitleList(int count){
return List.generate(count, (int index) => Container(
child: Image.asset('assets/1.png'))); }}Copy the code
8.Icon
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
// Unclickable
Icon(
Icons.apps,
color: Colors.red,
size: 30.0,
),
ImageIcon(
// You can download the PNG image of Ali icon library
AssetImage('assets/1.png'),
color: Colors.blue,
),
// Clickable Icons
IconButton(
icon: Icon(Icons.home),
onPressed: (){}
),
// Icon internal implementation
Icon(
IconData(
0xe8ad,
fontFamily: 'MaterialIcons'
),
color: Colors.blue
),
/ * ** Custom fonts pubspec.yaml introduced the font library
* # fonts:
# - family: Schyler
# fonts:
*
* Then you can use the font icon
* Icon(
IconData(
0xe8ad, just copy the code
FontFamily: 'MaterialIcons' font file
),
color: Colors.blue
),
* /]); }}Copy the code
9.IconTheme
Used to unify icon colors
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
returnColumn(children: <Widget>[IconTheme(data: IconThemeData(// uniform icon color:Colors. Green, opacity: 1.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Icon( Icons.favorite_border, size: 40, ), Icon( Icons.featured_play_list, size: 38 ) ], ) ) ], ); }}Copy the code
10.AssetImage
It can automatically distinguish 2.0x 3.0x based on fractional variability
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
returnColumn(children: <Widget>[/** ** adjust image based on resolution * 2.0x * 3.0x ** ** / SizedBox(width: 200.0, height: 200.0, child: CircleAvatar( backgroundImage: AssetImage('assets/1.png'Container(Child: Image(width: 300.0, height: 300.0, Image: AssetImage('assets/1.png'))), // Scalable Image component Image(Image: ExactAssetImage('assets/1.png', scale: 1.0 // The larger the scale, the smaller the image. }Copy the code
11.DecorationImage
image_picker: ^0.410.
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
child: Center(
child: Text(
'Decorative picture',
style: TextStyle(color: Colors.white)
),
),
height: 200.0,
width: 200.0./ / a decorator
decoration: BoxDecoration(
color: Colors.green,
image: DecorationImage(
image: AssetImage(
'assets/1.png',
),
fit: BoxFit.contain,
alignment: Alignment.bottomCenter
)
),
margin: EdgeInsets.only(
top: 20.0), a)],); }}Copy the code
11.Image_fileImage
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
// To open local images, import image_picker: ^0.4.10
File _image;
// Get local files asynchronously
getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Center(
child: _image == null ? Text('You haven't chosen any pictures yet') : Image.file(_image,scale:0.5, fit: BoxFit.cover)
),
FlatButton(
onPressed: getImage,
child: Text('Click and select image'))); }}Copy the code