A, the Widget

1.1 Base class Widgets

• Text

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).

• 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

• A total of parameters

• Wrap specific parameters

• Stack-specific parameters

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.).

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