preface

Flutter development has been going on for some time. One of the problems encountered during this period is the query of the API of the underlying Flutter components. Although there is an English explanation in the official documentation, there are no specific invocation examples. Oneself inquire on the net scrape together again.

Chinese annotations are also not a more complete.

So I put it all together here for easy reference.

AlertDialog

Documents:

AlertDialog({
  Key key,
  this.title, /// The title
  this.titlePadding, /// The title padding
  this.titleTextStyle, /// The title style
  this.content, ///content
  this.contentPadding = const EdgeInsets.fromLTRB(24.0.20.0.24.0.24.0), /// padding
  this.contentTextStyle, /// style
  this.actions,/// List of action widgets,
  this.actionsPadding = EdgeInsets.zero,
  this.actionsOverflowDirection, /// Action Overflow direction
  this.actionsOverflowButtonSpacing, /// Action overflows the distance between levels
  this.buttonPadding, /// Button padding
  this.backgroundColor, /// The background color
  this.elevation, /// shadow
  this.semanticLabel,
  this.insetPadding = _defaultInsetPadding,
  this.clipBehavior = Clip.none,
  this.shape,
  this.scrollable = false./// Not scrollable, you need to nest SingleChildScrollView to scroll
})
Copy the code

Example:

Future<int> _getAlertDialog(BuildContext context) {
  return showDialog<int>(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('Title'),
    ///If the content is too long, use SingleChildScrollView
    content: Scrollbar(
      child: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: Text("This is the content."),
      ),
    ),
    actions: [
      FlatButton(
        child: Text('cancel'),
        onPressed: () => Navigator.of(context).pop(0),
      ),
      FlatButton(
        child: Text('sure'),
        onPressed: () => Navigator.of(context).pop(1),),),///Click on the dialog to see if the outside disappears
  barrierDismissible: true);
}
Copy the code

Official API: Alertdialog-class

Align

Example:

Container(
  height: 120.0,
  width: 120.0,
  color: Colors.blue[50],
  child: Align(
    alignment: Alignment.topRight,
    child: FlutterLogo(
      size: 60,),),)Copy the code

Documents:

Align({
  Key key,
  this.alignment = Alignment.center, // A value of type AlignmentGeometry is required, representing the start bit of the child component in the parent component
  this.widthFactor, // Is the property used to determine the width and height of the Align component itself; These are two scaling factors that multiply the width and height of the child elements, respectively, resulting in the width and height of the Align component. If the value is null, the width and height of the component will take up as much space as possible.
  this.heightFactor,
  Widget child,
})
Copy the code

Official API: align-class

AppBar

Example:

Widget _appBarDemo1() {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(
        primary: true.// False will affect leading, Actions, and titile components, resulting in upward migration
        textTheme: TextTheme(// Set the various font theme colors above the AppBar
          title: TextStyle(color: Colors.red),
        ),
        actionsIconTheme: IconThemeData(color: Colors.blue,opacity: 0.6),// Set the theme color of the icon on the right side of the navigation
        iconTheme: IconThemeData(color: Colors.black,opacity: 0.6),// Set the theme color of the Icon above AppBar
        brightness: Brightness.dark,// Set the status bar above the navigation bar to display the font color
        backgroundColor: Colors.amber,// Set the background color
        shape: CircleBorder(side: BorderSide(color: Colors.red, width: 5, style: BorderStyle.solid)),// Set the appbar shape
        automaticallyImplyLeading: true.// void when leading is null
        centerTitle: true,
        title: Text('AppBar Demo'),
        leading: IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            print('add click.... ');
          }
        ),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: (){print('search.... '); }), IconButton(icon: Icon(Icons.history), onPressed: (){print('history.... '); }),],),); }Copy the code

Documents:

AppBar({
  Key key,
  this.leading,// The Widget to display on the left of the navigation bar
  this.automaticallyImplyLeading = true.this.title,// Navigation bar title
  this.actions,// A set of widgets to display on the right of the navigation bar
  this.flexibleSpace,
  this.bottom, widget that needs to be displayed at the bottom of the navigation barthis.elevation,
  this.shape,// Navigation bar style
  this.backgroundColor,// Navigation bar background color
  this.brightness,// Set the dark and light states of the status bar above the navigation bar
  this.iconTheme,// The icon theme on the navigation bar
  this.actionsIconTheme,// Right widgets theme on the navigation bar
  this.textTheme,// Navigation bar text theme
  this.primary = true.// False will affect leading, Actions, and titile components, resulting in upward migration
  this.centerTitle,// The navigation bar indicates whether the display is centered
  this.titleSpacing = NavigationToolbar.kMiddleSpacing,
  this.toolbarOpacity = 1.0.this.bottomOpacity = 1.0,})Copy the code

Official API: Appbar-class

Button

Example:

FlatButton(
  color: Colors.blue,
  textColor: Colors.white,  // Button text color
  highlightColor: Colors.blue[700].// When clicked, the color of the wave in the wave animation
  disabledTextColor: Colors.gray,  // Text color when the button is disabled
  colorBrightness: Brightness.dark,  // Button theme, default light color theme
  splashColor: Colors.grey,
  padding:    // Button padding
  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)), / / shape
  child: Text("Submit"),
  onPressed: () {},
)
Copy the code

Official API: Flatbutton-class

Checkbox

Example:

new Checkbox(
  value: this.check,
  tristate: true.// If true, the check box can be true, false, or null.
  autofocus: true.// The initial focus of the current scope
  activeColor: Colors.blue, // Activate the color
  focusColor: Colors.blue, // Focus color
  checkColor: Colors.blue, // Select the color of the icon
  hoverColor: Colors.blue, // hover color
  materialTapTargetSize: MaterialTapTargetSize.padded // Set the minimum size of the TAP target, click on the section size, PADDED: Extend 48px area shrinkWrap: Control section
  focusNode: focusNode,
  onChanged: (bool val) {
    this.setState(() {
        this.check = !this.check; }); },),Copy the code

Official documentation: checkbox-class

CircularProgressIndicator

Example:

CircularProgressIndicator(
  value: 0.3,
  strokeWidth: 4.0,
  backgroundColor: Color(0xffff0000),
  valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
)
Copy the code

Documents:

const CircularProgressIndicator({
  Key key,
  double value ,// Float from 0 to 1, used to indicate progress; If value is null or empty, an animation is displayed, otherwise a fixed value is displayed
  Color backgroundColor, // Background color
  Animation<Color> valueColor,// Animation type parameter that sets the color of the progress value. The default color is the theme color
  this.strokeWidth = 4.0.// Progress bar width
  String semanticsLabel,
  String semanticsValue,
})
Copy the code

The official API: CircularProgressIndicator – class

ClipOval oval clipping

Documents:

const ClipOval({ Key key, this.clipper, this.clipBehavior = Clip.antiAlias, Widget child }) : super(key: key, child: child);

const ClipRRect({
    Key key,
    this.borderRadius,
    this.clipper,
    this.clipBehavior = Clip.antiAlias,
    Widget child,
  }) : assert(borderRadius ! =null|| clipper ! =null),
       assert(clipBehavior ! =null),
       super(key: key, child: child);

const ClipRect({ Key key, this.clipper, this.clipBehavior = Clip.hardEdge, Widget child }) : super(key: key, child: child);
Copy the code

Example:

/ / clipping clip

// Trim Widget effects
// ClipOval subassemblies are clipped to inner circles when they are square and ellipses when they are rectangular
// ClipRRect clips child components to rounded rectangles
// ClipRect ClipRect subcomponents to the actual occupied rectangle size (overflow portion clipping)

import 'package:flutter/material.dart';

class ClipTest extends StatelessWidget {

  @override
  Widget build(BuildContext context)  {
    / / avatar
    Widget avatar = Image.asset('assets/images/avatar.png', width: 60,);
    return Scaffold(
      appBar: AppBar(
        title: Text('cut'),
      ),
      body: Column(
        children: <Widget>[
          / / not cut
          avatar,
          // Cut to a circle
          ClipOval(child: avatar,),
          // Cut to a rounded rectangle
          ClipRRect(
            borderRadius: BorderRadius.circular(5.0),
            child: avatar,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Align(
                alignment: Alignment.topLeft,
                // Set the width to half of the original, the other half will overflow
                widthFactor: . 5,
              ),
              Text('Hello world! ', style: TextStyle(color: Colors.green),)
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // Trim the overflow part
              ClipRect(
                child: Align(
                  alignment: Alignment.topLeft,
                  widthFactor: . 5,
                  child: avatar,
                ),
              ),
              Text('Hello world! ', style: TextStyle(color: Colors.green),)
            ],
          ),
          DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.red,
            ),
            child: ClipRect(
              // Use custom clipperclipper: MyClipTest(), child: avatar, ), ) ], ), ); }}// Custom clipping
class MyClipTest extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) => Rect.fromLTWH(10.0.15.0.40.0.30.0);

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}
Copy the code

Official API: Clipoval-class

Column

Example:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  textBaseline: TextBaseline.ideographic,
  textDirection: TextDirection.rtl,
  verticalDirection: VerticalDirection.up,
  children: <Widget>[
    Icon(Icons.opacity),
    Icon(Icons.settings),
    Container(
      color: Colors.redAccent,
      width: 100.0,
      height: 100.0,
      child: Text('data'),
    ),
    Icon(Icons.ondemand_video),
  ],
)
Copy the code

Documents:

Column({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,// The arrangement of child widgets on the vertical axis, with all child widgets displayed from the top
  MainAxisAlignment.end// The arrangement of child widgets on the vertical axis, with all child widgets displayed next to the bottom
  MainAxisAlignment.center// The arrangement of the child widgets on the vertical axis, with all the child widgets displayed in the middle
  MainAxisAlignment.spaceBetween// The arrangement of the child widgets on the vertical axis, where two child widgets are equally spaced and the top and bottom widgets are displayed next to each other
  MainAxisAlignment.spaceAround// The arrangement of the child widgets on the vertical axis, where two child widgets are equally spaced and the distance between the top and bottom widgets is half the distance between the two child widgets
  MainAxisAlignment.spaceAround// The arrangement of the child widgets on the vertical axis, where two child widgets are equidistant from each other and the top and bottom widgets are equidistant from each other
  MainAxisSize mainAxisSize = MainAxisSize.max,// Set the space occupied by Column to maximum
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.start,// Set the left alignment of all child widgets
  CrossAxisAlignment.end// Set the right alignment of all child widgets
  CrossAxisAlignment.stretch// Set all child widgets to occupy the entire horizontal axis (X), stretching to the left and right of Column
  CrossAxisAlignment.baseline,/ / equivalent CrossAxisAlignment. Start, but need to cooperate textBaseline, or complains
  TextDirection textDirection,// Set the left and right display orientation of the child widget only when crossAxisAlignment is start or end;
  VerticalDirection verticalDirection = VerticalDirection.down,// Set the starting position of the child widgets on the vertical axis (Y). Down indicates that the first Widget is displayed from the starting position, followed by the next Widget. Equivalent to positive order
  VerticalDirection.up// Indicates that the first widget is displayed at the end, followed by the next widget, in reverse order
  TextBaseline textBaseline,/ / cooperate CrossAxisAlignment. Baseline used together
  List<Widget> children = const <Widget>[],// Install in a set of child widgets
})
Copy the code

Official API: Column-class

ConstrainedBox

Size limit class containers

Example:

ConstrainedBox(
  constraints: BoxConstraints(
    this.minWidth = 0.0.// Minimum width
    this.maxWidth = double.infinity, // Maximum width
    this.minHeight = 0.0.// Minimum height
    this.maxHeight = double.infinity // Maximum height
  ),
  child: Container(
      height: 5.0, 
      child: redBox 
  ),
)
Copy the code

Constrainedbox-class official API: constrainedbox-class

Container

The container

Example:

Container(
  alignment: Alignment.center,// Child is displayed in the child Widget margin
  padding: EdgeInsets.all(20),// Set the inner margin of Container to 20.0
  margin: EdgeInsets.all(20.0),// Set the margin of Container to 20.0
  color: Colors.black,// Set the background color to black
  width: 200.0.// Set width to 200.0
  height: 200.0.// Set the height to 200.0
  child: Text(// Child is filled with Text
    'This is a Container'.// Display text
    textDirection: TextDirection.ltr,// Text is displayed from left to right
    style: TextStyle(/ / the Text style
    color: Colors.redAccent,// Text color
    backgroundColor: Colors.black,/ / the Text background color),),)Copy the code

Documents:

Container({
  Key key,
  this.alignment, // Alignment Sets the Alignment of the child in the Container
  this.padding, // EdgeInsets, set the inner margin
  Color color, // Set the background color of the Container
  Decoration decoration, // Set the decoration after the child of the Container
  this.foregroundDecoration, // Set the decoration in front of the child of the Container
  double width, // Set the width of the Container
  double height, // Set the height of the Container
  BoxConstraints constraints, // Sets the constraints on the child elements of the Container
  this.margin, // EdgeInsets, set the margin
  this.transform, // Set the transformation matrix for Container
  this.child, // Widget, set the child of the Container
}

Copy the code

Official API: Container-class

DecoratedBox

A DecoratedBox can paint decorations, such as backgrounds, borders, gradients, and so on, before (or after) its children

Example:

DecoratedBox(
  decoration: BoxDecoration(
    gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), // Background gradient
    borderRadius: BorderRadius.circular(3.0), //3 pixels rounded corners
    boxShadow: [ / / the shadow
      BoxShadow(
        color:Colors.black54,
        offset: Offset(2.0.2.0),
        blurRadius: 4.0
      )
    ]
  ),
  child: Padding(padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
    child: Text("Login", style: TextStyle(color: Colors.white),),
  )
)
Copy the code

Documents:

const DecoratedBox({
  Decoration decoration, // Represents the Decoration to be painted. Its type is Decoration
  DecorationPosition position = DecorationPosition.background, // foreground foreground | foreground foreground
  Widget child
})

BoxDecoration({
  Color color, / / color
  DecorationImage image,/ / picture
  BoxBorder border, / / frame
  BorderRadiusGeometry borderRadius, / / the rounded
  List<BoxShadow> boxShadow, // Multiple shadows can be specified
  Gradient gradient, / / the gradient
  BlendMode backgroundBlendMode, // Background blending mode
  BoxShape shape = BoxShape.rectangle, / / shape
})
Copy the code

Official API: decoratedBox-class

Expaned

Expanded component Is a highly used component in the Flutter. It dynamically adjusts the size of the Child component along the main axis, such as filling the remaining space or setting the size ratio. It is often used in combination with a Row or Column.

Example:

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Row Sample'),
      ),
      body: Center(
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.amber,
                height: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 50,
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.amber,
                height: 100,),),),),),); }}Copy the code

Structure:

const Expanded({
    Key key,
    int flex: 1.@required Widget child
})
Copy the code

Official example: Expanded Class

Flex

Example:

class FlexDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Flex(
      direction: Axis.horizontal,
      direction: Axis.vertical,
      children: <Widget>[
        Container(
          width: 90.0,
          height: 100.0,
          color: Colors.redAccent,
        ),
        SizedBox(width: 6,),
        Container(
          width: 90.0,
          height: 100.0,
          color: Colors.greenAccent,
        ),
        SizedBox(width: 6,),
        Container(
          width: 90.0,
          height: 100.0,
          color: Colors.blue,
        ),
        SizedBox(width: 6,),
        Container(
          width: 90.0,
          height: 100.0, color: Colors.orange, ), ], ); }}Copy the code

Documents:

Flex({
  Key key,
  @required this.direction,// Flex is set horizontally
  List<Widget> children = const <Widget>[],// A set of child widgets<! For the rest of these definitions, see the similar definitions for Row and Column.this.mainAxisAlignment = MainAxisAlignment.start,
  this.mainAxisSize = MainAxisSize.max,
  this.crossAxisAlignment = CrossAxisAlignment.center,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  this.textBaseline,
})
Copy the code

Official API: Flex-class

Flow

Example:

import 'package:flutter/material.dart';

/* * Flow layout * custom FlowDelegate * */

double boxSize = 80.0;

class FlowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flow(
      delegate: MyFlowDelegate(),
      children: List.generate(10, (index) {
        returnBox(index); })); }/* A square with gradient color */
  Widget Box(index) => Container(
    width: boxSize,
    height: boxSize,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      gradient: LinearGradient(
          colors: [Colors.orangeAccent, Colors.orange, Colors.deepOrange]),
    ),
    child: Text(
      index.toString(),
      style: TextStyle(
        color: Colors.white,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
    ),
  );
}

class MyFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    /* Screen width */
    var screenW = context.size.width;

    double padding = 5; / / spacing
    double offsetX = padding; / / x coordinate
    double offsetY = padding; / / y

    for (int i = 0; i < context.childCount; i++) {
      /* Continue drawing if the width of the child control to the left of the current x is smaller than the screen width otherwise newline */
      if (offsetX + boxSize < screenW) {
        /* Draws a child control */
        context.paintChild(i,
            transform: Matrix4.translationValues(offsetX, offsetY, 0));
        /* Change the x coordinate */
        offsetX = offsetX + boxSize + padding;
      } else {
        /* Change the x coordinate to margin*/
        offsetX = padding;
        /* Compute the y coordinate */
        offsetY = offsetY + boxSize + padding;
        /* Draws a child control */
        context.paintChild(i,
            transform: Matrix4.translationValues(offsetX, offsetY, 0)); }}}@override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return true; }}Copy the code

Documents:

Flow({
  Key key,
  @required this.delegate,   // The layout delegate receives a value of type FlowDelegate
  List<Widget> children = const <Widget>[],  // The child control to display
})
Copy the code

Official API: flow-class

Form

Example:

Form(
  key: _formKey, // Set globalKey to get FormState later
  autovalidate: true.// Enable automatic verificationonWillPop: Future .. .// Asynchronously intercept route returns.
  onChanged: (v) {
    print("onChange: $v");
  }
  child: ...
)
Copy the code

FormField

Example:

TextFormField(
  decoration: InputDecoration(
    hintText: 'Phone number',
  ),
  validator: (value) {
    RegExp reg = new RegExp(r'^\d{11}$');
    if(! reg.hasMatch(value)) {return 'Please enter an 11-digit mobile phone number';
    }
    return null; },)Copy the code

Documents:

const FormField({
  ...
  FormFieldSetter<T> onSaved, // Save the callback
  FormFieldValidator<T>  validator, // Validate the callback
  T initialValue, / / initial value
  bool autovalidate = false.// Whether to check automatically.
})
Copy the code

Official API: form-class

GridView

Documents:

GridView.builder({
  Key key,
  Axis scrollDirection = Axis.vertical, // Set the scrolling direction, horizontal or vertical
  bool reverse = false.// Whether to flip
  ScrollController controller, // Use to control the scroll position and listen for scroll events
  bool primary,
  ScrollPhysics physics,
  bool shrinkWrap = false.// Whether to set the GridView length based on the total length of the child widgets
  EdgeInsetsGeometry padding, / / spacing
  @required this.gridDelegate, // How does the control child Widget layout
  @required IndexedWidgetBuilder itemBuilder,
  int itemCount,
  bool addAutomaticKeepAlives = true.bool addRepaintBoundaries = true.bool addSemanticIndexes = true.double cacheExtent,
  int semanticChildCount,
}) 
Copy the code

Example:

GridView(
  scrollDirection: Axis.vertical,
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 100.// The maximum width of the child control is 100
    childAspectRatio: 0.5.// Width/height ratio is 1:2
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  padding: EdgeInsets.all(10),
  children: List.generate(
    20,
    (index) {
      return Box(index + 1); },),);Copy the code

Official API: GridView-class

Icon

Example:

String icons = "";
// accessible: &#xE914; or 0xE914 or E914
icons += "\uE914";
// error: &#xE000; or 0xE000 or E000
icons += " \uE000";
// fingerprint: &#xE90D; or 0xE90D or E90D
icons += " \uE90D";


Text(icons,
  style: TextStyle(
      fontFamily: "MaterialIcons",
      fontSize: 24.0,
      color: Colors.green
  ),
);
Copy the code
Icon(
  IconData icon;// Icon file in the system library
  double size;// Size of the icon
  Color color;// The color used to draw the icon
  String semanticLabel;// The semantic label of the icon
  TextDirection textDirection;// The text direction used to render the icon
)
Copy the code

Official Icon library: Material – ICONS document: Icon-class

IconButton

Documents:

IconButton(
  double iconSize: 24.0;// Icon size
  EdgeInsetsGeometry padding: const EdgeInsets.all(8.0);/ / padding
  AlignmentGeometry alignment: Alignment.center;// Alignment
  Widget icon;// Icon control
  Color color;/ / color
  Color highlightColor;// The color of the button when pressed
  Color splashColor;// Click to diffuse the animation color
  Color disabledColor;// The color of the button when it is unavailable
  VoidCallback onPressed;// The callback that is invoked when the button is clicked or otherwise activated
  String tooltip;// Text describing the action that will take place when the button is pressed
)
Copy the code

Example:

IconButton(
  icon: Icon(Icons.description),
  onPressed: () {
    print('Click icon$index'); },)Copy the code

Official API: Iconbutton-class

Image

Example:

Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0,
  height: 100.0,
  color: Colors.blue, // The mixed color value of the image
  colorBlendMode: BlendMode.difference, // Specify the blending mode
  repeat: ImageRepeat.repeatY, // Lay repeatY/repeatX/noRepeat
  fit: BoxFit.fill, Fill/contain/cover/fitWidth/fitHeight/scaleDown/None
  alignment: Alignment.center, // Alignment
);
Copy the code

Documents:

Image(
    ImageProvider<dynamic> image;    // The Image to display (Image())
    String name,    // Image path (image.asset ())
    AssetBundle bundle,    // Image.asset()
    File file;    // File path (image.file ())
    String src;    // Image.network()
    Uint8List bytes Uint8List;    Uint8List (image.memory ())
    String semanticLabel;    // Image semantic description
    bool excludeFromSemantics;   // Whether to exclude the image from the semantics. Default is false
    double scale;    / / ratio
    double width;    / / width
    double height;   / / height
    Color color;    // Color, if not null, mixes the color with the image via the colorBlendMode attribute
    BlendMode colorBlendMode;    // Mix mode
    BoxFit fit;    // Display mode of the image
    AlignmentGeometry alignment;    // Alignment, default Alignment. Center
    ImageRepeat repeat;    // Repeat mode, default ImageRepeat. NoRepeat
    Rect centerSlice;     // 9 grid stretch
    bool matchTextDirection;    // Whether to draw pictures in text direction. Default is false
    bool gaplessPlayback;       // When the image changes, whether to continue to display the old image (true) or simply display anything (false), the default is false
    FilterQuality filterQuality;    // FilterQuality, default filterquality.low
    String package, // Package name (image.asset ())
    Map<String.String> headers;    // The argument can be used to send custom HTTP headers through image requests (Image.network())
)
Copy the code

Official API: image-class

LinearProgressIndicator

Example:

LinearProgressIndicator(
  value: 0.3,
  valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
  backgroundColor: Color(0xff00ff00),Copy the code

Documents:

const LinearProgressIndicator({
  Key key,
  double value, // Float from 0 to 1, used to indicate progress; If value is null or empty, an animation is displayed, otherwise a fixed value is displayed
  Color backgroundColor, // Background color
  Animation<Color> valueColor, // Animation type parameter that sets the color of the progress value. The default color is the theme color
  String semanticsLabel,
  String semanticsValue,
})
Copy the code

LinearProgressIndicator-class

ListView

Documents:

ListView(
  IndexedWidgetBuilder itemBuilder;   // Sub-item layout (listview.builder (), listView.separated ()))
  IndexedWidgetBuilder separatorBuilder;   / / (ListView. Separated ())
  SliverChildDelegate childrenDelegate;   // Provide a child delegate for the ListView (listView.custom ())
  int itemCount;    // Item number (listview.bu ilder(), listview.separated ())
    List<Widget> children: const <Widget>[], // Subitem layout (ListView())
  int semanticChildCount,// Number of child entries
  Axis scrollDirection: Axis.vertical;// Scroll direction
  bool reverse: falsel;// Whether to reverse the scrolling direction
  ScrollController controller;// Scroll controller
  bool primary;// If true, a scrollable view is scrollable even if the scrollable view does not have enough content to actually scroll. Otherwise, by default, only users with enough content can scroll through the view, depending on the Physics property
  ScrollPhysics physics;// How should scroll views respond to user input
  bool shrinkWrap: false;// Whether the scope of the scrolling view in scrollDirection should be determined by what you are viewing
  EdgeInsetsGeometry padding;/ / padding
  double itemExtent;// The range of the scroll direction
  bool addAutomaticKeepAlives: true;// Whether to wrap each child in AutomaticKeepAlive
  bool addRepaintBoundaries: true;// Whether to wrap each subitem in a RepaintBoundary
  bool addSemanticIndexes: true;// Whether to wrap each child item in IndexedSemantics
  double cacheExtent;// Scroll cache pixels
  DragStartBehavior dragStartBehavior: DragStartBehavior.start;// Determine how to handle the drag start behavior
)
Copy the code

Example:

body: new Scrollbar(
  / / ListView. Builder written
  child: new ListView.builder(
    // No secant line
    itemBuilder: (context, item) {
      return buildListData(context, titleItems[item], iconItems[item], subTitleItems[item]);
    },
    // There are dividing lines
    itemBuilder: (context, item) {
      return new Container(
        child: new Column(
          children: <Widget>[
            buildListData(context, titleItems[item], iconItems[item], subTitleItems[item]),
            new Divider()
          ],
        ),
      );
    },

    itemCount: iconItems.length, // Data length),),Copy the code

Official API: ListView-class

NestedScrollView

Documents:

NestedScrollView({
  controller: ScrollController
  scrollDirection: Axis.vertical // Slide direction
  reverse: false // In reverse order
  physics // Controls the user's scrolling view interactionHeaderSliverBuilder: NestedScrollViewHeaderSliversBuilder body: Widget})Copy the code

Example:

NestedScrollView(
    headerSliverBuilder: (context, innerBoxIsScrolled) {
      return[ SliverToBoxAdapter( child: FortuneCityDetailBanner( describe: detailInfo?.describe, cityColor: cityColor, cityLine: cityLine, cityStar: cityStar, ), ), ]; }, body: FortuneCityDetailTab(tabList: detailInfo? .lines), )Copy the code

The official API: NestedScrollView

Padding

Example:

class PaddingTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      // Add 16 pixels for each side
      padding: EdgeInsets.all(16.0),
      child: Column(
        // Explicitly specify left alignment to eliminate alignment interference
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            // Add 8 pixels of padding on the left
            padding: const EdgeInsets.only(left: 8.0),
            child: Text("Hello world"),
          ),
          Padding(
            // Add 8 pixels of padding up and down
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text("I am Jack"),
          ),
          Padding(
            // Specify the four directions of the complement
            padding: const EdgeInsets.fromLTRB(20.0.. 0.20.0.20.0),
            child: Text("Your friend"() [() [(); }}Copy the code

Documents:

Padding({
  ...
  EdgeInsetsGeometry padding, // In development, we usually use the EdgeInsets class
  Widget child,
})

EdgeInsets({
  fromLTRB(double left, double top, double right, double bottom), // Specify four directions for filling
  all(double value), // Fill with the same value in all directions.
  only({left, top, right ,bottom }), // You can set the fill in a specific direction (you can specify more than one direction at a time).
  symmetric({ vertical, horizontal }) // Set the fill in symmetric directions, vertical to top and bottom, horizontal to left and right.
})
Copy the code

Official API: Padding-class

Positioned

Example:

Stack(
  alignment:Alignment.center ,
  fit: StackFit.expand, // Unlocated widgets fill up the Stack
  children: <Widget>[
    Positioned(
      left: 18.0,
      child: Text("I am Jack"),
    ),
    Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
      color: Colors.red,
    ),
    Positioned(
      top: 18.0,
      child: Text("Your friend"),) ",Copy the code

Documents:

const Positioned({
  Key key,
  this.left, / / the left margin
  this.top, / / top margin
  this.right, / / the right margin
  this.bottom, / / bottom margin
  this.width, // The width of the element needs to be positioned
  this.height, // The height of the element needs to be located
  @required Widget child,
})
Copy the code

C-class

RaisedButton

Documents:

RaisedButton(
    requiredVoidCallback onPressed;  // The callback that is invoked when the button is clicked or otherwise activated
    ValueChanged<bool> onHighlightChanged;  / / by the underlying InkWell widget InkWell. OnHighlightChanged callback invocation
    ButtonTextTheme textTheme;  // Text theme
    Color textColor;  // Text color
    Color disabledTextColor;  // The text color when the button is not available
    Color color;  // Button color
    Color disabledColor;   // The color of the button when it is unavailable
    Color highlightColor;  // The color of the button when pressed
    Color splashColor;     // Click to diffuse the animation color
    Brightness colorBrightness;  // The theme brightness used for this button
    double elevation;  // The protruding height
    double highlightElevation;  // The height of the bulge when the button is pressed
    double disabledElevation;  // The protruding height when the button is not available
    EdgeInsetsGeometry padding;  / / padding
    ShapeBorder shape;  // Shape of the button material
    Clip clipBehavior: Clip.none;  / / clipping
    MaterialTapTargetSize materialTapTargetSize;  // Set the minimum size of the click target
    Duration animationDuration;  // Duration of the animation
    Widget child;  // Child control (RaisedButton())
    Widget icon;  Raisedbutton.icon ())
    Widget label;// text (raisedbutton.icon ())
)
Copy the code

Example:

RaisedButton(
  onPressed: () {},
  child: Text("TextColor The color of the text, the color of the background, the highlightColor the color that the button presses."),
  textColor: Color(0xffff0000),
  color: Color(0xfff1f1f1),
  highlightColor: Color(0xff00ff00),Copy the code

Official API: RaisedButton-class

Row

Example:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Icon(Icons.opacity),
    Icon(Icons.settings),
    Container(
      color: Colors.redAccent,
      width: 100.0,
      height: 100.0,
      child: Text('data'),
    ),
    Icon(Icons.ondemand_video),
  ],
)
Copy the code

Documents:

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,// Where do I place the child widgetsMainaxisalignment. start, layout mainAxisalignment. end from the left, layout MainAxisalignment. center from the right, Starting from the middle layout MainAxisAlignment spaceBetween, the distance between the adjacent two widgets equal MainAxisAlignment. SpaceAround, child widgets evenly space, the left most of the components from the side, For the two widgets half of margin, specific please set viewing effect of MainAxisAlignment. SpaceEvenly, child widgets evenly space, MainAxisSize = MainAxisSize. Max,// Set how much space Row should occupy on the main axis
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,// How should child elements be placed along the horizontal axis, aligned in the middle by default
  CrossAxisAlignment.satrt// Set the top alignment of the child elements
  CrossAxisAlignment.end// Set the bottom alignment of the child elements
  CrossAxisAlignment.stretch// The top and bottom of each child is aligned with the top and bottom of the Row, which is equivalent to stretching
  CrossAxisAlignment.baseline,/ / equivalent CrossAxisAlignment. Start, but need to cooperate textBaseline, or complains
  TextDirection textDirection,// Set the left and right display orientation of the child widget only when crossAxisAlignment is start or end;
  VerticalDirection verticalDirection = VerticalDirection.down,CrossAxisAlignment. End, CrossAxisAlignment. Start, CrossAxisAlignment, CrossAxisAlignment, CrossAxisAlignment
  TextBaseline textBaseline,/ / cooperate CrossAxisAlignment. Baseline used together
  List<Widget> children = const <Widget>[],// Store a set of child widgets
}
Copy the code

Official API: row-class

Scaffold

Object > Diagnosticable > DiagnosticableTree > Widget > StatefulWidget > Scaffold

Implement basic design visual layout structure. The content that supports the entire interface is also inherited from a Widget, a control.

Documents:

Scaffold({
  Key: key,
  PreferredSizeWidget: appBar, // A design application bar.
  Widget Body, // Content control
  Widget floatingActionButton, // Float button FloatingActionButtonFloatingActionButtonLocation FloatingActionButtonLocation endFloat,/ / the position of the float button placed centerFloat | endDocked | centerDocked | endFloat,
  FloatingActionButtonAnimator floatingActionButtonAnimator, / / floating button animation: FloatingActionButtonAnimator. Scaling
  List<Widget> persistentFooterButtons, // Bottom control 2
  Widget Drawer, // Slide-left layout, active call: scaffold.of (context).opendrawer ();
  Widget endDrawer, // Right swipe layout, active call: Scaffold.of(context).openenddrawer ();
  Widget bottomNavigationBar, // Bottom control three
  Widget bottomSheet, // Bottom control one
  Color backgroundColor, // Background color
  bool resizeToAvoidBottomPadding = true.// Whether to resize the body so that the keyboard does not block part of the layout
  bool primary = true.// Whether to fill the top (status bar)
})
Copy the code

Example:

Scaffold(
  appBar: AppBar(
    leading: null,
    automaticallyImplyLeading: false,
    title: Text(widget.title),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.ac_unit),
        onPressed: () {},
      ),
      new PopupMenuButton<String>(
        itemBuilder: (BuildContext context) => <PopupMenuItem<String> > [new PopupMenuItem(child: new Text("I")),
          new PopupMenuItem(child: new Text("Settings")),
          new PopupMenuItem(child: new Text("Wallet")),
        ]
      )
    ],
    elevation: 10,
    shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),side: new BorderSide(
      style: BorderStyle.none,
    )),
    backgroundColor:Colors.green,
    brightness: Brightness.light,
    iconTheme: IconTheme.of(context).copyWith(color: Colors.black),
    actionsIconTheme: IconTheme.of(context).copyWith(color: Colors.black),
    textTheme: Theme.of(context).textTheme.apply(fontSizeFactor: 1.2),
    primary: true,
    centerTitle: true,
    titleSpacing: 10,
    toolbarOpacity: 1.0,
    bottomOpacity : 0.5,
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Hello Flutter',
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    tooltip: 'Increment',
    foregroundColor: Colors.cyanAccent,
    backgroundColor: Colors.green,
    focusColor: Colors.red,
    hoverColor: Colors.black,
    onPressed: _showMessage,
    shape :const CircleBorder(),
    clipBehavior: Clip.none,
    focusNode: _node,
    isExtended: true,
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
  persistentFooterButtons: <Widget>[
    Text('cancel'),
    Text('sure')
  ],
  drawer: new Drawer(
    child: new UserAccountsDrawerHeader(
      accountName: new Text(
        "Flutter",
      ),
      accountEmail: new Text(
        "[email protected]",
      ),
    ),
  ),
  bottomNavigationBar:BottomNavigationBar(
    items:[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text(
            'home',
          ),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text(
            'community',
          ),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text(
            'I',
          ),
        ),
    ],
    currentIndex:0,
  ),
  bottomSheet: Text('Bottom popup'),
  primary: true,
  drawerDragStartBehavior: DragStartBehavior.down,
  extendBody: true,
  drawerScrimColor: Color.fromARGB(50.0.0.0));Copy the code

Official API: scaffoldclass

Scrollable Scrollable component

Documents:

Scrollable({
  Key key,
  ///Rolling direction
  this.axisDirection = AxisDirection.down,
  ///Scroll controller and event listener
  ///In the source code is such an introduction ScrollController initialScrollOffset control the location of the initial rolling
  ///ScrollController. KeepScrollOffset control should automatically save and restore its rolling in [PageStorage]
  ///buy
  ///Scrollcontroller.offset is used to read the current scroll position
  this.controller,
  ///It is decided that the widget's animated response to the user's drag and drop is by default more sensitive to setting different variables for different environments
  ///ClampingScrollPhysics A water ripple effect used by Android
  ///BouncingScrollPhysics: Elastic effect under iOS if Android wants to implement this effect
  ///The total height of the sublayout must be greater than the actual height of the ListView, the viewport
  this.physics,
  /// The getItem method used to generate child layouts is similar to the Adapter method in Android
  @required this.viewportBuilder,
  ///
  this.incrementCalculator,
  /// Whether to expose the semantic number for easy identification by software like TalkBack
  this.excludeFromSemantics = false.///Number of semantic subsets
  this.semanticChildCount,
  ///Handles how and when a drag starts
  ///There are two values dragStartBehavior.start dragStartBehavior.down
  ///Start is a drag,down is a touch event pressed
  this.dragStartBehavior = DragStartBehavior.start,
})
Copy the code

ScrollView

Documents:

const ScrollView({
  Key key,
  ///The Scrollable property, which sets the main axis of the slide
  this.scrollDirection = Axis.vertical,
  ///Whether to slide in the opposite direction of reading
  this.reverse = false.///The Scrollable property, used by the controller to listen for scrolling and set the scrolling distance
  this.controller,
  /// Whether to use the default PrimaryScrollController in the Widget tree; When the sliding direction is vertical
  ///When the scrollDirection value is Axis. Vertical and controller is not specified, primary defaults to true
  ///If primary is true it will scroll even though it doesn't have enough height to actually scroll,
  ///But the controller is required to be null, but I tried it and it didn't work
  bool primary,
  ///The Scrollable property completes the drag-and-drop animated response
  ScrollPhysics physics,
  ///If the scroll view does not shrink the newline, the scroll view expands to the maximum size allowed in scrollDirection.
  ///ShrinkWrap must be true if the scroll view has an infinite constraint in scrollDirection
  /// This property seems to solve the listView nesting problem, but it is more performance costly
  this.shrinkWrap = false.this.center,
  ///When scrollOffset = 0, the first child is anchor <= 1.0 in viewport position,
  ///0.0 at the beginning, 1.0 at the tail, 0.5 in the middle, and only
  this.anchor = 0.0.///Cache area size
  this.cacheExtent,
  ///Number of semantic subsets of the Scrollable property
  this.semanticChildCount,
  ///The Scrollable property to start responding to the drag
  this.dragStartBehavior = DragStartBehavior.start,
  this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
})
Copy the code

Official API: Scrollable-class

SingleChildScrollView

Documents:

const SingleChildScrollView({
  Key key,
  // The scroll direction is vertical by default
  this.scrollDirection = Axis.vertical,
  // Whether to slide in the opposite direction of the reading direction
  this.reverse = false.// Content margins
  this.padding,
  // Whether to use the default PrimaryScrollController in the Widget tree
  bool primary,
  // This property accepts an object of type ScrollPhysics that determines how scrolling can respond to user actions, such as continuing to animate after the user has lifted his finger after sliding, or how it should appear when sliding to a boundary.
  // By default, the Flutter uses different ScrollPhysics objects depending on the platform. For example, when the Flutter slides to a boundary and continues to drag, it has an elastic effect on iOS.
  // On Android, the shimmer effect appears. If you want to use the same effect on all platforms, you can specify a fixed ScrollPhysics display.
  // The Flutter SDK contains two subclasses of ScrollPhysics. 1.ClampingScrollPhysics: Android shimmering effect, 2.BouncingScrollPhysics: iOS elastic effect
  this.physics,
  // This property receives a ScrollController object, whose main function is to control the scroll position and listen for scroll events.
  // By default, there is a default PrimaryScrollController in the Widget tree. If the scrollable component in the Widget tree does not display the specified Controller and the primary property is true, Scrollable components use this default ScrollController.
  // The advantage of this mechanism is that the parent component controls scrollable scrolling behavior in the child tree. Example: Scaffold uses this mechanism for click-to-the-top navigation in iOS.
  this.controller,
  this.child,
})
Copy the code

Example:

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'SingleChildScrollView Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('SingleChildScrollView Demo'),
        ),
        body: new SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: new Center(
            child: new Column(
              children: <Widget>[
                Container(
                  width: 300.0,
                  height: 200.0,
                  color: Colors.blue,
                ),
                Container(
                  width: 300.0,
                  height: 200.0,
                  color: Colors.yellow,
                ),
                Container(
                  width: 300.0,
                  height: 200.0,
                  color: Colors.pink,
                ),
                Container(
                  width: 300.0,
                  height: 200.0,
                  color: Colors.blue,
                ),
                Container(
                  width: 300.0,
                  height: 200.0,
                  color: Colors.yellow,
                ),
                Container(
                  width: 300.0,
                  height: 200.0,
                  color: Colors.pink,
                ),
                Container(
                  width: 300.0,
                  height: 200.0, color: Colors.blue, ), ], ), ), ), ), ); }}Copy the code

Official API: SingleChildScrollView

Stack

Example:

Stack(
  alignment: AlignmentDirectional.center,
  textDirection: TextDirection.rtl,
  fit: StackFit.passthrough,
  children: <Widget>[
    Container(
      color: Colors.redAccent,
      width: 100.0,
      height: 100.0,
      child: Text('data'),
    ),
    Icon(Icons.settings),
    Positioned(
      top: 10,
      left: 60,
      child: Icon(Icons.settings)
    ),
    Icon(Icons.opacity),
    Icon(Icons.ondemand_video),
  ],
)

Copy the code

Documents:

Stack({
  Key key,
  this.alignment = AlignmentDirectional.topStart,// Set the location where the child widgets will be displayed, starting at the top
  AlignmentDirectional.topCenter// Display from the top center
  AlignmentDirectional.topEnd// Display from the top end position
  AlignmentDirectional.centerStart// Start from the middle
  AlignmentDirectional.center// Display from the center
  AlignmentDirectional.centerEnd// Display from the middle end position
  AlignmentDirectional.bottomStart// Display from the bottom
  AlignmentDirectional.bottomCenter// Display from bottom center
  AlignmentDirectional.bottomEnd// Display from the bottom end position
  this.textDirection,// Sets the left and right display orientation of the child widgets
  this.fit = StackFit.loose,// Set the size of the child widget that does not pass the jam, loose means, the largest size of the child widget is displayed
  StackFit.expand// The size of the stack is the size of the parent widget
  thisOverflow = overflow. clip, which is used to intercept child widgets when they are out of the stack. Refer to overflow interception of TextList<Widget> children = const <Widget>[],// A set of child widgets
})

Copy the code

Official document: stack-class

Switch

Examples + documentation:

new Switch(
  value: this.check, // bool Toggle button value.
  activeColor: Colors.blue,     // The origin color is activated
  activeThumbImage: ImageProvider, // How the image looks when activated.
  activeTrackColor: Colors.blue,   // The color of the bar when activated.
  inactiveThumbColor: Colors.black, // The color of the origin when inactive
  inactiveThumbImage: ImageProvider, // Image effect of deactivated origin.
  inactiveTrackColor: Colors.black, // The color of the bar when inactive.
  onChanged: (bool val) {
    this.setState(() {
      this.check = !this.check; }); },)Copy the code

API: switch-class

TabBar

Example:

TabBar(
  onTap: (int index){
    print('Selected......$index');
  },
  unselectedLabelColor: Colors.grey, // Set the unselected font color. The font style in tabs has the highest priority
  unselectedLabelStyle: TextStyle(fontSize: 20), // Set the unselected font style. The font style in tabs has the highest priority
  labelColor: Colors.black, // Set the selected font color. The font style in tabs has the highest priority
  labelStyle: TextStyle(fontSize: 20.0), // Set the selected font style. The font style in tabs has the highest priority
  isScrollable: true.// Allow left and right scrolling
  indicatorColor: Colors.red, // Select the color of the underline
  indicatorSize: TabBarIndicatorSize.label, // Select the length of the underline, label as the length of the text, TAB as the length of a TAB
  indicatorWeight: 6.0.// Select the height of the underline. The greater the value, the higher the height. The default value is 2. 0
  indicator: BoxDecoration(), // Set the display style for the selected state
  tabs: [
    Text('select',style: TextStyle(
      color: Colors.green,
      fontSize: 16.0
    ),),
    Text('Guess you like it',style: TextStyle(
      color: Colors.indigoAccent,
      fontSize: 16.0
    ),),
    Text('mother'),
    Text('child'),
    Text('ladies'),]),Copy the code

Documents:

const TabBar({
  Key key,
  @required this.tabs, // A minimum of two tabs must be displayed
  this.controller,
  this.isScrollable = false.// Whether to scroll, true: yes
  this.indicatorColor, // Select the color of the underline
  this.indicatorWeight = 2.0.// Select the height of the underline. The greater the value, the higher the height. The default value is 2
  this.indicatorPadding = EdgeInsets.zero,
  this.indicator, // Set the display style for the selected state
  this.indicatorSize, // Select the length of the underline, label as the length of the text, TAB as the length of a TAB
  this.labelColor, // Set the selected font color. The font style in tabs has the highest priority
  this.labelStyle, // Set the selected font style. The font style in tabs has the highest priority
  this.labelPadding,
  this.unselectedLabelColor, // Set the unselected font color. The font style in tabs has the highest priority
  this.unselectedLabelStyle, // Set the unselected font style. The font style in tabs has the highest priority
  this.dragStartBehavior = DragStartBehavior.start,
  this.onTap, // Click the event
})
Copy the code

Official API: Tabbar-class

Text

Example:

Text("Hello world",
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18.0,
    height: 1.2,  
    fontFamily: "Courier",
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    background: newPaint().. color=Colors.yellow, decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dashed, ), textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, maxLines:1,);Copy the code

Documents:

Text(
    String data;    // Text content (Text())
    TextSpan textSpan; // Text content (text.rich ())
    TextStyle style;     // Text style
    StrutStyle strutStyle;    // Paragraph style
    TextAlign textAlign;    // This article on its way
    TextDirection textDirection;    // Text direction
    Locale locale;    // Select locale for locale-specific glyphs
    bool softWrap;     // Whether to wrap
    TextOverflow overflow;    // How to handle text overflow
    double textScaleFactor;    // Number of font pixels per logical pixel
    int maxLines;    // The maximum number of lines of text. If the text exceeds the given number of lines, it will be truncated according to overflow fields
    String semanticsLabel;    // Alternative semantic tags for text
)
Copy the code

The official API: Text – class

TextField

Example:

TextField(
  autofocus: true.// Auto focus
  obscureText: false.// Whether to hide the text being edited, such as the scene for entering passwords. The text content will be replaced with "•".
  focusNode: focusNode,
  textAlign = TextAlign.start, // Edit the horizontal alignment of text in the input box.
  style: TextStyle(), // The style of the text being edited
  maxLines: 1.// The maximum number of lines in the input box, default is 1; If null, there is no limit on the number of rows.
  maxLength: 30.// Represents the maximum length of the input box text. After setting the input box, the lower right corner will display the input text count
  maxLengthEnforced: true.// Determines whether to block input when the length of the input text exceeds maxLength.
  onSubmitted: (ValueChanged<String> value) {}, // Input completes the callback
  onEditingComplete: () {}, // Input completes the callback
  inputFormatters: [WhitelistingTextInputFormatter(new RegExp("[a-z]")),// Regular whitelist verification is attached
  enable: false.// Whether to disable
  cursorWidth: 20.0.// Cursor width
  cursorRadius: 
  decoration: InputDecoration(
    labelText: "Username",
    hintText: "Username or email address",
    prefixIcon: Icon(Icons.person)
  ),
),
Copy the code

Documents:

TextField(
    TextEditingController controller;    // Text editing controller
    FocusNode focusNode;    // Define the keyboard focus for this widget
    InputDecoration decoration;    // The decoration to display around the text field
    TextInputType keyboardType;    // The type of keyboard used to edit text
    TextInputAction textInputAction;    // The type of action button used for the keyboard
    TextCapitalization textCapitalization;    // Configure platform keyboard. How to choose uppercase or lowercase keyboard, default textCommodities. none
    TextStyle style;    // Text style
    StrutStyle strutStyle;    // Pillar style for vertical layout
    TextAlign textAlign;    // Alignment, default textalign.start
    TextDirection textDirection,    // Directionality of text
    bool autofocus;    // Whether to automatically get focus. Default is false
    bool obscureText;    // Whether to hide text (password). The default is false
    bool autocorrect;    // Whether to enable autocorrect. The default value is true
    int maxLines;    // Maximum line, default 1
    int minLines;    / / the minimum line
    bool expands;    // Whether to adjust the height of this widget to fill its parent. Default is false
    int maxLength;    // Maximum length
    bool maxLengthEnforced;    // Prevents the field from allowing more than maxLength characters if true. The default is true
    ValueChanged<String> onChanged;    // Called when users initiate changes to TextField values: when they insert or delete text
    VoidCallback onEditingComplete;    // called when the user submits editable content (for example, when the user presses the "Finish" button on the keyboard)
    ValueChanged<String> onSubmitted;    // Called when the user indicates that they have finished editing the text in the field
    List<TextInputFormatter> inputFormatters;    // Optional input validation and format overwriting
    bool enabled;    // Whether it is available
    double cursorWidth;    // Cursor width, default 2.0
    Radius cursorRadius;    // Cursor circle Angle
    Color cursorColor;    // Cursor color
    Brightness keyboardAppearance;    // What the keyboard looks like
    EdgeInsets scrollPadding;    // This value controls how far TextField will be located at the edge of the Scrollable after scrolling. Default edgeinsets.all (20.0)
    DragStartBehavior dragStartBehavior;    // determine how to handle the DragStartBehavior, default dragstartbehavior.start
    bool enableInteractiveSelection;    // If true, holding the TextField will display the cut/copy/paste menu, and clicking will move the text caret
    GestureTapCallback onTap;    // Called when the user clicks on the text field
    InputCounterWidgetBuilder buildCounter;    // Generate a callback for the custom InputDecorator.counter widget
    ScrollPhysics scrollPhysics;    // Determine the physical properties of the Scrollable widget
)
Copy the code

Attach a:

  • WhitelistingTextInputFormatter white list checking, is allowed to enter only conform to the rules of characters
  • BlacklistingTextInputFormatter blacklist check, in addition to the provisions of the other characters can be input
  • With maxLength LengthLimitingTextInputFormatter length limit, works in a similar way

Official API: TextField-class

Transform

Example:

Container(
  color: Colors.black,
  child: new Transform(
    alignment: Alignment.topRight, // Alignment with respect to the origin of the coordinate system
    transform: new Matrix4.skewY(0.3), // Tilt along the Y-axis by 0.3 radians
    child: new Container(
      padding: const EdgeInsets.all(8.0),
      color: Colors.deepOrange,
      child: const Text('Apartment for rent! '),),),);Copy the code

Translation:

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  // The default origin is the upper left corner, which is shifted 20 pixels to the left and 5 pixels up
  child: Transform.translate(
    offset: Offset(20.0.5.0),
    child: Text("Hello world"),),)Copy the code

Rotation:

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  child: Transform.rotate(
    // Rotate 90 degrees
    angle: math.pi/2 ,
    child: Text("Hello world"),),);Copy the code

Zoom:

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  child: Transform.scale(
      scale: 1.5.// Zoom in 1.5 times
      child: Text("Hello world")));Copy the code

Layout rotation:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    DecoratedBox(
      decoration: BoxDecoration(color: Colors.red),
      Transform. Rotate to RotatedBox
      child: RotatedBox(
        quarterTurns: 1.// Rotate 90 degrees (1/4 turn)
        child: Text("Hello world"),
      ),
    ),
    Text("Hello", style: TextStyle(color: Colors.green, fontSize: 18.0),),),Copy the code

Transform-class official API: transform-class

Wrap

Example:

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Wrap(
      direction: Axis.vertical,
      direction: Axis.horizontal,
      spacing: 16.0.Horizontal in direction: Axis. Vertical in direction: Axis. Vertical in direction: Axis. Horizontal in direction: Axis. Vertical in direction: Axis
      runSpacing: 16.0.Horizontal in direction: Axis. Vertical in direction: Axis. Vertical in direction: Axis. Horizontal in direction: Axis. Vertical in direction: Axis
      alignment: WrapAlignment.start,
      crossAxisAlignment: WrapCrossAlignment.start,
      textDirection: TextDirection.ltr,
      verticalDirection: VerticalDirection.up,
      children: <Widget>[
        ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
          child: Container(
            alignment: Alignment.center,
            width: 86.0,
            height: 36.0,
          color: Colors.orange,
            child: Text('History 1'),
          ),
        ),
        ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
          child: Container(
            alignment: Alignment.center,
            width: 86.0,
            height: 36.0,
            color: Colors.redAccent,
            child: Text('History 2'),
          ),
        ),
        ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
          child: Container(
            alignment: Alignment.center,
            width: 86.0,
            height: 36.0,
            color: Colors.blue,
            child: Text('History 3'),
          ),
        ),
        ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
          child: Container(
            alignment: Alignment.center,
            width: 86.0,
            height: 36.0,
            color: Colors.greenAccent,
            child: Text('History 4'),
          ),
        ),
         ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
          child: Container(
            alignment: Alignment.center,
            width: 86.0,
            height: 36.0,
            color: Colors.amber,
            child: Text('History 5'),
          ),
        ),
        ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
          child: Container(
            alignment: Alignment.center,
            width: 86.0,
            height: 36.0,
            color: Colors.indigoAccent,
            child: Text('History 6'(), [[(), [(). }}Copy the code

Documents:

Wrap({
  Key key,
  this.direction = Axis.horizontal, // Set the horizontal part or vertical layout
  this.alignment = WrapAlignment.start, // Set the actual position of the element,
  
  this.spacing = 0.0.Horizontal in direction: Axis. Vertical in direction: Axis. Vertical in direction: Axis. Horizontal in direction: Axis. Vertical in direction: Axis
  this.runAlignment = WrapAlignment.start, // Set the spacing between widgets on the horizontal or vertical axis
  WrapAlignment.start // The arrangement of the child widgets in each row (column) along the vertical (horizontal) axis, with all the child widgets displayed from the top
  WrapAlignment.end // The arrangement of the child widgets in each row (column) along the vertical (horizontal) axis, with all the child widgets displayed next to the bottom
  WrapAlignment.center // The arrangement of the child widgets in each row (column) along the vertical (horizontal) axis, with all the child widgets displayed in the middle
  WrapAlignment.spaceBetween // The arrangement of the child widgets in each row (column) along the vertical (horizontal) axis, with two child widgets spaced equally apart and the top and bottom widgets displayed next to each other
  WrapAlignment.spaceAround // The arrangement of the child widgets in each row (column) along the vertical (horizontal) axis. The spacing between the child widgets is equal. The distance between the top and bottom widgets is half of the distance between the child widgets
  WrapAlignment.spaceAround // The arrangement of the child widgets in each row (column) along the vertical (horizontal) axis, with two child widgets equidistant from each other, and the top and bottom widgets equidistant from each other
  this.runSpacing = 0.0.Horizontal in direction: Axis. Vertical in direction: Axis. Vertical in direction: Axis. Horizontal in direction: Axis. Vertical in direction: Axis
  this.crossAxisAlignment = WrapCrossAlignment.start, Control the top alignment of all child widgets horizontally and the left alignment of all child widgets vertically
  WrapCrossAlignment.end // Control the bottom alignment of all child widgets horizontally and edge alignment of all child widgets vertically
  WrapCrossAlignment.center // Set the alignment within the child Widgets of each row
  this.textDirection, // Set the display of each row (column)
  textDirection: TextDirection.ltr // Set the child Widgets of each row (column) to display in order from left to right (top to bottom)
  textDirection: TextDirection.rtl // Set the child Widgets of each row (column) to display in reverse order
  this.verticalDirection = VerticalDirection.down, // Set the display of column widgets to normal
  VerticalDirection.up // Display in reverse order, for example, 1, 2, 3 rows of widgets in direction: Axis. Horizontal with up, display 3, 2, 1
  List<Widget> children = const <Widget>[], // A set of child widgets
})

Copy the code

Official API: wrap-class

END

Keep updating and tinkering.