Flutter Components (3)

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