A, the Widget

1.1 Base class Widgets

  • Text
Is structured instructions
Text(data,{… }) Data: text copy, {… } : Optional named parameter
Text(textSpan,{… }) TextSpan: a fragment of text {… } : Optional named parameter

The first one is relatively simple and satisfies a general usage scenario. The second is more flexible and allows you to do some deep customizations to the text, such as adding underlined lines, underlining, and changing the color of some of the text. You must use textSpan to process the text. First, assume that you have a piece of Text that needs to be displayed on the screen:

String data = "GDP growth of Jiangsu province in 2018: Suzhou saw the highest growth rate (8%), Xuzhou saw the fastest growth rate (2% to 6%), and Zhenjiang saw a decline (-3%), please refer to the official website for more information. 
Copy the code

Copywriting presentation without any processing:

@override
  Widget build(BuildContext context) {

    String data = "GDP growth of Jiangsu province in 2018: Suzhou saw the highest growth rate (8%), Xuzhou saw the fastest growth rate (2% to 6%), and Zhenjiang saw a decline (-3%), please refer to the official website for more information.;
    return Scaffold(
      appBar: AppBar(
        title: Text("Text"),), body: new Column(mainAxisSize: mainAxisSize. Max, // Full screen mainAxisAlignment: MainAxisAlignment. Start, / / child widgets left-aligned crossAxisAlignment: crossAxisAlignment. Start, / / child widgets in the longitudinal axis center alignment children: <Widget>[ Text(data ), ], ), ); }Copy the code

The boss said: display a line at most, display no place to use… At the end, the font must be larger and bolder: this is done using the named parameter in the constructor

@override
  Widget build(BuildContext context) {

    String data = "GDP growth of Jiangsu province in 2018: Suzhou saw the highest growth rate (8%), Xuzhou saw the fastest growth rate (2% to 6%), and Zhenjiang saw a decline (-3%), please refer to the official website for more information.;
    returnScaffold(body: new Column(children: <Widget>[Text(data, maxLines: 1, // overflow: Ellipsis, // end truncation style: TextStyle(fontSize: 16, // fontSize: fontWeight: fontweight.bold),),],); }Copy the code

The boss said, “There is no highlight in this display. Need to mark Suzhou red, Zhenjiang green, dry bold, and finally you can click to open the official website…… A paragraph requires so many states that a second construction is needed:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Column(
        children: <Widget>[
          Text.rich(
            TextSpan(children: [
              TextSpan(
                  text: GDP Growth of Jiangsu Province in 2018:,
                  style: TextStyle(fontWeight: FontWeight.bold)),
              TextSpan(
                text: "Suzhou has the highest increase",
              ),
              TextSpan(
                text: "(8%)", style: TextStyle(color: color.deeporange), // Set the color to red), TextSpan(text:Xuzhou has the fastest growth rate.,
              ),
              TextSpan(
                text: "(2% increased to 6%)", style: TextStyle(color: color.yellow), // set the color to yellow), TextSpan(text:"Zhenjiang has gone down.",
              ),
              TextSpan(
                text: "(3%),", style: TextStyle(color: color.green), // Set the color to green), TextSpan(text:"See the official website for more information.", style: TextStyle(color: color.grey, decoration: textdecoration.underline),// Set the color to grey, underline recognizer: New TapGestureRecognizer() // Sets click events.. onTap = () {print("Open the official website"); }),),),,,); }Copy the code

Text has many named parameters, here is not an example implementation. All changes are made to the textSpan and optional named constructors (textSpan and Text).

Parameter names meaning type instructions
style Font properties TextStyle The TextStyle constructor also receives a bunch of optional named parameters
textAlign Text on its way TextAlign Get this by enumerating TextAlign
textDirection The text direction TextDirection Get it by enumerating TextDirection, and in most cases you don’t need to care about this parameter
locale Internationalization language dependency Locale
softWrap Whether to wrap bool If false, the text will be displayed on a single line regardless of the container size and will be truncated by default if it exceeds the screen
overflow Processing of text length exceeding the container TextOverflow Get this by enumerating TextOverflow
textScaleFactor Scaling factor relative to the current font size double The default value will be 1.0
maxLines Maximum number of lines of text int Default no limit
semanticsLabel Semantic description of images, used to provide image descriptions to TalkBack on Andoid and VoiceOver on iOS String I didn’t understand this parameter
  • Button Button is relatively simple. Here are the three simplest implementations:
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Button"),
      ),
      body: new Column(
        children: <Widget>[
          RaisedButton(
            child: Text("RaisedButton"), onPressed: () {// Pressed event listener},), FlatButton(Child: Text()"FlatButton"), onPressed: () {// Pressed event listener},), OutlineButton(Child: Text()"OutlineButton"), onPressed: () {// Pressed event listener},),],),); }Copy the code

  • Image

  1. Loading images from Assets:

    • Step1: project root directory create a directory for storing images. My directory is called images(whatever it is)
    • Step2: Configure the image in pubspec.yml

    • Step3: get the image in the code

  2. Internet Download pictures

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Image & Icon"),), body: new Column(children: <Widget>[Image(// load asset Image, size 100*100, height: 100, Image: AssetImage("images/test_img.jpg"Width: 200, height: 200, Image: NetworkImage(// load NetworkImage, size 200*200 width: 200, height: 200, Image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547637189125&di=36a042b71b1e6b4ccd80adca6d8f05ff&i mgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg"() [() [() [() }Copy the code

Effect:

  • Icon
  • Switch
  • The Checkbox.
  • TextField

1.2 Layout class Widgets

Layout class widgets typically contain multiple children, and layout class widgets typically describe how children are arranged

Widget meaning instructions
Row Row layout, one row with multiple columns
Wrap Row has only one line by default and does not fold if it goes beyond the screen. Row overflow can be automatically folded with Wrap
Column Column layout, one column with multiple rows
Flow Use less
Flex You can define a weighted Row or Column. Flex needs to work with Expanded
Stack Cascading layout, similar to FrameLayout The Stack itself has a property that sets the children by default to its way, and can also use the precise definition of the position of the child
  • A total of parameters
Parameter names meaning note
textDirection Indicates the horizontal layout order of the child widgets (from left to right or from right to left). By default, it is the text direction of the current Locale (for example, left-to-right for Chinese and English, right-to-left for Arabic).
mainAxisSize The default is mainAxissize.max, which means that the Row occupies as much horizontal space as possible, regardless of how much horizontal space the child widgets actually occupy, the width of the Row is always equal to the maximum horizontal width. MainAxisSize. Min means to use as little horizontal space as possible. If the child widgets do not fill up the horizontal space, the actual width of the Row is equal to the horizontal space occupied by all the child widgets
mainAxisAlignment Represents how the child Widgets are aligned in the horizontal space occupied by the Row. If mainAxisSize is mainAxissie.min, this property is meaningless because the width of the child Widgets is equal to the width of the Row. This property makes sense only if the value of mainAxisSize is mainAxissize.max. Mainaxisalignment. start indicates alignment along the initial direction of textDirection. For example, if textDirection is textdirection. LTR, mainaxisalignment. start indicates left alignment; if textDirection is textdirection. RTL, it indicates right alignment. Mainaxisalignment. end and mainAxisalignment. start are the opposite; Mainaxisalignment. center Indicates center alignment. TextDirection is a reference frame for mainAxisAlignment.
verticalDirection Indicates the alignment of the vertical axis of the Row. The default is verticaldirection. down, which indicates from top to bottom
crossAxisAlignment Represents the vertical alignment of child Widgets. The height of Row is equal to the height of the highest child element in the child Widgets. This alignment is the same as the MainAxisAlignment (start, end, and Center). The difference is that the reference frame of crossAxisAlignment is verticalDirection. That is, when the verticalDirection value is verticaldirection. down, crossAxisAlignment. When verticalDirection is verticaldirection. up, crossAxisAlignment. Start indicates bottom alignment. Crossaxisalignment. end and crosSAXisalignment. start are the opposite
children Child Widgets array.
  • Wrap specific parameters
Parameter names meaning note
spacing Spacing of the main axis child widgets
runSpacing Spacing in the longitudinal direction
runAlignment The alignment of the vertical axis
  • Stack-specific parameters
Parameter names meaning note
alignment This parameter determines how to position the child widget without positioning (without using the tourists) or partial positioning. The so-called partial positioning, here specifically refers to no positioning on a certain axis: left, right for the horizontal axis, top, bottom for the vertical axis, as long as it contains a positioning attribute on the axis even if there is positioning on the axis.
fix This parameter is used to determine how unpositioned child widgets fit into the Stack size. Loose indicates the size to use the child widgets, and stackfit. expand indicates the size to expand into the Stack.
overflow This property determines how to display child widgets that exceed the Stack display space. With overflow. clip, the excess portion is clipped (hidden), but not with overflow. visible.

1.3 Container Class Widgets

Container class widgets typically have only one child. A container’s description is typically a wrapper around a child: add some embellishment (whitening or background color, etc.), transform (rotation or cropping, etc.), or restrict (size, etc.).

Parameter names meaning note
Padding Add padding to its children EdgeInsets.all .fromLTRB .only .symmetric
ConstrainedBox ConstrainedBox is used to align child widgets to add additional constraints Width height, minimum width height, maximum width height
SizedBox ConstrainedBox is a fixed-width ConstrainedBox ConstrainedBox What happens if there are multiple restrictions?
UnconstrainedBox UnconstrainedBox does not impose any restrictions on the child widgets; it allows them to be drawn to their own size You will rarely use this widget directly
DecoratedBox DecoratedBox allows you to draw a Decoration (background, foreground, border, gradient, shadow, etc.) before (or after) the child widget.
Transform Translation, rotation, scaling, etc There is a RotatedBox that needs to be distinguished from transform.rotate, one that works on drawing and one that works on layout
Container You can think of it as a combination of widgets from other container classes Container can implement scenarios that need to be filled, constrained, decorated, and transformed simultaneously
Scaffold A skeleton of routing pages can be easily assembled into a complete page AppBar, drawer, top navigation, bottom navigation, hover buttons, etc

1.4 Functional Widgets

1.5 Event Handling and Listening

1.6 the animation

1.7 the custom

other

Some open source libraries for FLUTTER:

  • Loading state widget: https://pub.flutter-io.cn/packages/flutter_spinkit