Component 1 of Flutter Development

Flutter's slogan: Everything is a component. Like other platforms, Flutter provides a series of components, including Basic Widgets, Material Components, Cupertino and so on.

The introduction of basic components in Flutter is also relatively simple. Each component exists as a class. Flutter has a lot of component attributes. We can't remember every one. We only use or understand some key attributes frequently and then look at the specific attributes when we use them. It is called "the property of running water, the component of iron beating".

This article mainly introduces the following components:

  • Align-Align-Align-Align Component
  • Bar - Component
  • Box - Component
  • Button - Component

I. Align-Align-Align-Align Component

A widget can align its sub-widgets and automatically resize them according to their size.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Align assembly',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Align assembly'),
        ),
        body:Container(
//          width: 200.0,
//          height: 200.0,
          color: Colors.red,
          child: Align(
            //Alignment mode
            //alignment: Alignment.bottomLeft,
            //The alignment uses X and y to demonstrate that the range is - 1.0 - 1.0
            alignment: Alignment(-0.5,-1.0),
            //Coefficient of width and height filling
            widthFactor: 3.0,
            heightFactor: 3.0,
            child: Container(
              color: Colors.green,
              width: 100.0,
              height: 50.0,
              child: Text('align',style: TextStyle(color: Colors.white),),
            ),
          ),
        ),
      ),
    );
  }
}

Bar-Component

2.1 AppBar component

The right or left button on the status bar, a Material Design application bar, consists of a toolbar and other possible widget s, such as TabBar and Flexible SpaceBar.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppBar assembly',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Title'),
          //Left Icon
          leading: Icon(Icons.home),
          //Background color
          backgroundColor: Colors.green,
          //Center title
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.print),
              tooltip: 'Printing',
              onPressed: (){},
            ),
            //Menu button
            PopupMenuButton<String>(
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                //menu item
                PopupMenuItem<String>(
                  value: 'friend',
                  child: Text('Share in the circle of friends'),
                ),
                PopupMenuItem<String>(
                  value: 'download',
                  child: Text('Download to local'),
                ),
              ],
            ),
          ],
        ),
        body: Container(),
      ),
    );
  }
}

2.2 bottomNavigationBar

The bottom navigation bar makes it easy to switch between tap s and browse the top view.

    return BottomNavigationBar(
      //Bottom Button Type Fixed Style
      type: BottomNavigationBarType.fixed,
      //Button size
      iconSize: 24.0,
      //Click the button inside to call back the function
      onTap: _onItemTapped,
      //Index Highlighting of Current Selected Items
      currentIndex: _currentIndex,
      //When the type is fixed, the color of the selected item
      fixedColor: Colors.red,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(title: Text('chat'),icon: Icon(Icons.chat)),
        BottomNavigationBarItem(title: Text('Circle of friends'),icon: Icon(Icons.refresh)),
        BottomNavigationBarItem(title: Text('My'),icon: Icon(Icons.person)),
      ],
    );

2.3 ButtonBar

Unaligned Button Container ButtonBar

      child: ButtonBar(
        //Alignment defaults to terminal end
        alignment: MainAxisAlignment.spaceAround,
      ),

2.4 FlexibleSpaceBar

Foldable application bar FlexibleSpaceBar

        body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
              return <Widget>[
                SliverAppBar(
                  //Deployment height
                  expandedHeight: 150.0,
                  //Whether to hide title with sliding
                  floating: false,
                  //Is it fixed at the top?
                  pinned: true,
                  //Foldable application bar
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(
                      'Foldable components',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                ),
              ];
            },
            body: Center(
              child: Text('Pull up to see the effect'),
            )
        ),
      ),
    );

2.5 SliverAppBar

Sliver application bar SliverAppBar

 body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
              return <Widget>[
                SliverAppBar(
                  //Whether to reserve height or not
                  primary:true,
                  //A control shown before the title
                  leading: Icon(Icons.home),
                  //Operation button
                  actions: <Widget>[
                    Icon(Icons.add),
                    Icon(Icons.print),
                  ],
                  //Set Shadow Value
                  elevation: 10.0,
                  //Is it fixed at the top?
                  pinned: true,
                  //Extensible Area Height
                  expandedHeight: 200.0,
                  //Use in conjunction with floating
                  snap: false,
                  //Whether to hide title with sliding
                  floating: false,
                  //Extended area
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(
                      'This is a cool title.',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                ),
              ];
            },
            body: Center(
              child: Text(
                'Drag to try'
              ),
            ),
        ),

2.6 SnackBar

Screen bottom message

return Center(
      child: GestureDetector(
        onTap: () {
          final snackBar = new SnackBar(
            //Prompt information
            content: Text('This is a SnackBar'),
            //Background color
            backgroundColor: Colors.green,
            //operation
            action: SnackBarAction(
              textColor: Colors.white,
              label: 'undo',
              onPressed: () {},
            ),
            //Duration
            duration: Duration(minutes: 1),
          );
          Scaffold.of(context).showSnackBar(snackBar);
        },
        child: Text('Display screen bottom message'),
      ),
    );

2.7 TabBar

Tab, a Material Design widget that displays horizontal tabs.

class DemoPageState extends State<DemoPage> with SingleTickerProviderStateMixin {

  ScrollController _scrollViewController;
  TabController _tabController;

  @override
  void initState(){
    super.initState();
    _scrollViewController = new ScrollController();
    //The length should be the same as the Tab number of the display section.
    _tabController = new TabController(vsync: this,length: 6);
  }

  @override
  void dispose(){
    super.initState();
    _scrollViewController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 500.0,
      child: Scaffold(
        appBar: AppBar(
          title: Text('tab'),
          //Front Icon
          leading: Icon(Icons.home),
          //Application bar background color
          backgroundColor: Colors.green,
          //tab
          bottom: TabBar(
            controller: _tabController,
            //Can I scroll?
            isScrollable: true,
              tabs: <Widget>[
                Tab(text: 'science and technology',icon: Icon(Icons.camera),),
                Tab(text: 'Having dinner',icon: Icon(Icons.print),),
                Tab(text: 'Sports',icon: Icon(Icons.favorite),),
                Tab(text: 'entertainment',icon: Icon(Icons.share),),
                Tab(text: 'Film',icon: Icon(Icons.video_call),),
                Tab(text: 'education',icon: Icon(Icons.airline_seat_flat_angled),),
              ]
          ),
        ),
        //Tab view
        body: TabBarView(controller: _tabController,
            children: <Widget>[
              Text('Tab 1'),
              Text('Tab 2'),
              Text('Tab 3'),
              Text('Tab 4'),
              Text('Tab 5'),
              Text('Tab 6'),
            ]
        ),
      ),
    );
  }
}

Box - Components

3.1 ConstrainedBox

A widget that limits the maximum and minimum width and height of a container and imposes additional constraints on its subitems

              //Add a box of specified size to limit its maximum and minimum width
              ConstrainedBox(
                constraints: const BoxConstraints(
                  minWidth: 100.0,
                  minHeight: 20.0,
                  maxHeight: 60.0,
                  maxWidth: 200.0,
                ),
                child: Container(
                  width: 250,
                  height: 80,
                  child: Text(
                    'width>maxWidth height>maxHeight',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Colors.green,
                ),
              ),

3.2 DecoratedBox

Decorated containers, DecoratedBox can draw a Decoration before (or after) its sub widget (such as background, border, gradient, etc.).

DecoratedBox

            //Add decoration
            child: DecoratedBox(
                //Decoration Position. Background Background Background Background Mode DecorationPosition.foreground Foreground Foreground Foreground Mode
                position: DecorationPosition.background,
                decoration: BoxDecoration(
                  //Background color
                  color: Colors.grey,
                  //Setting Background Pictures
                  image: DecorationImage(
                    //Picture Filling Method
                    fit: BoxFit.cover,
                    image: ExactAssetImage('assets/view.jpeg'),
                  ),
                  //Border radian
                  //borderRadius: BorderRadius.circular(10.0),
                  border: Border.all(
                    //Border color
                    color: Colors.red,
                    //Border thickness
                    width: 6.0,
                  ),
                  //Border style
                  shape: BoxShape.rectangle,
                ),
              child: Text('Positioning demonstration',style: TextStyle(fontSize: 36.0,color: Colors.green),),
            ),

3.3 FittedBox

Fill the container and adjust the size and location of its child widget s according to their size.   FittedBox

/*
          BoxFit.fill  //Full display, showing possible stretching, filling
          BoxFit.contain    //Display all, display the original scale, do not need to fill
          BoxFit.cover    //Display possible stretching, possible tailoring, filling
          BoxFit.fitWidth    //Display possible stretching, possible tailoring, full width
          BoxFit.fitHeight    //Display possible stretching, possible tailoring, high filling
          BoxFit.none
          BoxFit.scaleDown   //The effect is similar to that of contain, but this property does not allow the display to exceed the size of the source image. It can be small or not large.
*/

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'FittedBox Filling container',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('FittedBox Filling container'),
        ),

        body: Center(
          child: Column(
            children: <Widget>[
            Container(
                width: 300.0,
                height: 300.0,
                color: Colors.grey,
                child: FittedBox(
                  //Fill type
                  fit: BoxFit.none,
                  //Center alignment
                  alignment: Alignment.center,
                  child: Image.asset('assets/view.jpeg'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3.4 OverflowBox

Overflow containers, widget s that impose different constraints on their children, may allow children to overflow their parents.   OverflowBox

          //Overflow container
          child: OverflowBox(
            //Alignment mode
            alignment: Alignment.topLeft,
            //Restrictive conditions
            maxWidth: 300.0,
            maxHeight: 500.0,
            child: Container(
              color: Colors.blueGrey,
              width: 400.0,
              height: 400.0,
            ),
          ),

3.5 RotatedBox

Rotating the container can rotate its child widget clockwise at a multiple of 90 degrees. RotatedBox

        body: Center(
          child: Column(
            children: <Widget>[

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
                //1/4 of the number of rotations per turn
                quarterTurns: 1,
              ),

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
                quarterTurns: 2,
              ),

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
                quarterTurns: 3,
              ),

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
                quarterTurns: 4,
              ),
            ],
          ),
        ),

3.6 SizedBox

Specify a wide and high container, a box of a specified size. This widget forces its children to have a specific width and height. If the width or height is NULL, the widget will resize itself to match the size of the child in that dimension.

        body:Center(
          //Specified Wide and High Container child is not allowed to exceed the specified size range
          child: SizedBox(
            width: 200.0,
            height: 200.0,
            //Limit picture size
            child: Image.asset('assets/cat.jpeg'),
            //Subelement
//            child: Container(
//              width: 10.0,
//              height: 10.0,
//              color: Colors.green,
//            ),
          ),
        ),

Button - Components

4.1 DropdownButton

Pull-down button DropdownButton

class DropdownButtonDemo extends StatelessWidget {

  List<DropdownMenuItem> generateItemList(){
    final List<DropdownMenuItem> items = new List();
    final DropdownMenuItem item1 = new DropdownMenuItem(child: Text('Beijing'),value: 'Beijing',);
    final DropdownMenuItem item2 = new DropdownMenuItem(child: Text('Shanghai'),value: 'Shanghai',);
    final DropdownMenuItem item3 = new DropdownMenuItem(child: Text('Guangzhou'),value: 'Guangzhou',);
    final DropdownMenuItem item4 = new DropdownMenuItem(child: Text('Shenzhen'),value: 'Shenzhen',);

    items.add(item1);
    items.add(item2);
    items.add(item3);
    items.add(item4);

    return items;
  }

  @override
  Widget build(BuildContext context) {

    return DropdownButton(
      //Prompt text
      hint: Text('Please choose a city'),
      //Drop-down list item data
      items: generateItemList(),
      value: selectItemValue,
      //Drop-down triangle icon size
      iconSize: 48.0,
      //Dropdown Text Style
      style: TextStyle(
        color: Colors.green,
      ),
      //Set Shadow Height
      elevation: 24,
      //Fill the drop-down box horizontally into the parent
      isExpanded: true,
      //Pull-down Change Event
      onChanged: (T){
        var obj = T;
      },
    );
  }
}

4.2 FlatButton

A flat Material button.

FlatButton

</center>

            FlatButton.icon(
                onPressed: (){

                },
                icon: Icon(Icons.print,size: 36.0,),
                label: Text('Default button',style: TextStyle(fontSize: 36.0),),
            ),

           FlatButton(
              //text
              child: Text(
                'Success',
                style: TextStyle(fontSize: 26.0),
              ),
              //Button Background Color
              color: Colors.green,
              //Button brightness
              colorBrightness: Brightness.dark,
              //Background color at failure
              disabledColor: Colors.grey,
              //Text color in case of failure
              disabledTextColor: Colors.grey,
              //text color
              textColor: Colors.white,
              //Button Theme Button Theme Data Button Text Theme Theme Data
              textTheme: ButtonTextTheme.normal,
              //Color of ink splash
              splashColor: Colors.blue,
              //Anti-aliasing ability
              clipBehavior: Clip.antiAlias,
              //padding
              padding: new EdgeInsets.only(
                bottom: 5.0,
                top: 5.0,
                left: 20.0,
                right: 20.0,
              ),
            ),

4.3 FloatingActionButton

Like the iOS phone's little white dots, a circular icon button hovers over the content to show the main actions in the application. Floating Action Button is usually used for Scaffold. Floating Action Button fields.

FloatingActionButton

</center>

            FloatingActionButton(
              //Icon
              child: const Icon(Icons.person),
              //Prompt information
              tooltip: 'This is a custom button',
              //Background color
              backgroundColor: Colors.blue,
              //Foreground color
              foregroundColor: Colors.white,
              //hero effect use
              heroTag: null,
              //Unclicked Shadows
              elevation: 8.0,
              //Shadow on Click
              highlightElevation: 16.0,
              onPressed: () {},
              // Whether it is a "mini" type, default to false,FAB is divided into three types: regular, mini, and extended.
              mini: false,

              //Style of rounded square
              shape: RoundedRectangleBorder(
                side: BorderSide(
                  width: 2.0,
                  color: Colors.white,
                  style: BorderStyle.solid,
                ),
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(8.0),
                  topLeft: Radius.circular(8.0),
                  bottomRight: Radius.circular(8.0),
                  bottomLeft: Radius.circular(8.0),
                ),
              ),
            ),

4.4 IconButton

A Material icon button, when clicked, will have a water wave painting.

IconButton</cneter>

           child: IconButton(
              //Icon
              icon: Icon(Icons.print),
              //Icon size
              iconSize: 48.0,
              //Determine the location of the icon based on the parent container
              alignment: AlignmentDirectional.center,
              color: Colors.green,
              //Spatter effect of ink
              splashColor: Colors.blue,
              padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
              //Prompt text
              tooltip: 'A Print Icon',
              //Press down
              onPressed: () {},
            ),

4.5 RaisedButton

The button in Material Design, a raised rectangular material button.

RaisedButton
</center>

     child: RaisedButton(
        //text
        child: Text(
          'Click the login button',
          style: TextStyle(fontSize: 26.0),
        ),
        //Button Background Color
        color: Colors.green,
        //Button brightness
        colorBrightness: Brightness.dark,
        //Background color at failure
        disabledColor: Colors.grey,
        //Text color in case of failure
        disabledTextColor: Colors.grey,
        //text color
        textColor: Colors.white,
        //Button Theme Button Theme Data Button Text Theme Theme Data
        textTheme: ButtonTextTheme.normal,
        //Color of ink splash
        splashColor: Colors.blue,
        //Anti-aliasing ability
        clipBehavior: Clip.antiAlias,
        //padding
        padding: new EdgeInsets.only(
          bottom: 5.0,
          top: 5.0,
          left: 20.0,
          right: 20.0,
        ),
        shape: RoundedRectangleBorder(
          side: new BorderSide(
            width: 2.0,
            color: Colors.white,
            style: BorderStyle.solid,
          ),
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(10.0),
            topLeft: Radius.circular(10.0),
            bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(10.0),
          ),
        ),

        onPressed: () {
          print('Button Press Operation');
        },
      ),

4.6 RawMaterialButton

RawMaterialButton

     body: RawMaterialButton(
          onPressed: (){},
          textStyle: TextStyle(fontSize: 28.0,color: Colors.black,),
          //text
          child: Text('RawMaterialButton assembly'),
          //Background color when highlighted
          highlightColor: Colors.red,
          //Ink splash
          splashColor: Colors.blue,
          //Zigzag
          clipBehavior: Clip.antiAlias,
          padding: EdgeInsets.only(bottom: 5.0,top: 5.0,left: 30.0,right: 30.0),
          //Shadows in Highlights
          highlightElevation: 10.0,
        ),

To be continued

More information can be clicked on about me. I really hope to communicate with you and make progress together. About me

Tags: Android iOS

Posted on Fri, 20 Sep 2019 22:15:44 -0700 by ferrit91