Flutter04 widget initial experience

One . Widget

1.1. Everything is Widget

• Flutter Almost everything you see in the entire application is Widget, Even the setting of the inner margin is Widget;
• Flutter Medium Widget( Widget or component ), amount to iOS、Android Control in , amount to Vue、React Components in ; but Fullter in Widget More thorough .

1.2. Material Design style

• material yes Google A set of design styles promoted by the company , Or design language 、 Design specifications, etc ;
• There are many design specifications , For example, color. 、 Typesetting of words 、 Respond to animation and overreaction 、 Fill... Etc ;
• stay Flutter Medium and high integration Material Style Widget;

Two . Instance of a hello flutter

2.1. text

import 'package:flutter/material.dart';

void main() {
    
  // runApp(const MyApp());
  runApp(Text('hello flutter', textDirection: TextDirection.ltr));
}

2.2. In the middle

void main() {
    
  // runApp(const MyApp());
  runApp(
    Center(
        child: Text(
          'hello flutter', 
          textDirection: TextDirection.ltr, 
          style: TextStyle(fontSize: 30),
        )
    )
  );
}

2.3. Add navigation bar

void main() {
    
  // runApp(const MyApp());
  runApp(
    MaterialApp(//material  style 
      home: Scaffold(// The scaffold 
        appBar: AppBar(// The navigation bar 
          title: Text(" The first application "),
        ),
        body: Center(// Main view 
          child: Text(
            'hello flutter', 
            textDirection: TextDirection.ltr, 
            style: TextStyle(fontSize: 30),
          )
        ),
      ) 
    )
  );
}

2.4. improvement

• widget:
  • Stateless Widget: StatelessWidget
  • Stateful Widget: StatefulWidget
  • StatefulWidget It's the state of it Widget. It's when the program is running , The state is allowed to change , To write a program that can be operated by users App, You have to use StatefulWidget.

void main() {
    
  // runApp(const MyApp());
  runApp(
    MyApp()
  );
}

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(//material  style 
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(// The scaffold 
      appBar: AppBar(// The navigation bar 
        title: Text(" The first application !"),
      ),
      body: HHContentBody(),
    );
  }
}

class HHContentBody extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return Center(// Main view 
        child: Text(
          'hello flutter', 
          textDirection: TextDirection.ltr, 
          style: TextStyle(fontSize: 30),
        )
      );  
  }
}

3、 ... and . Case 2 Agree to the agreement

• be-all Widget Be annotated @immutable modification , All member variables are immutable

3.1. Error code

// be-all Widget Be annotated @immutable modification , Internal cannot contain variable attributes 
class HHContentBody extends StatelessWidget {
    
  var flag = true;// Wrong writing 
  @override
  Widget build(BuildContext context) {
    
    return Center(// Main view 
        child: Row(// That's ok 
          mainAxisAlignment: MainAxisAlignment.center,// In the middle 
          children: [
            Checkbox(value: flag, onChanged: (flag){
    
              ValueKey(flag);
            }),
            Text(' Agree to the agreement '),
          ],
        )
      );
  }
}

3.2. Correct code

void main() {
    
  // runApp(const MyApp());
  runApp(
    MyApp()
  );
}

/** * widget: *  Stateful Widget: StatefulWidget *  Stateless Widget: StatelessWidget */

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(//material  style 
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(// The scaffold 
      appBar: AppBar(// The navigation bar 
        title: Text(" The first application !"),
      ),
      body: HHContentBody(),
    );
  }
}

class HHContentBody extends StatefulWidget {
    
  @override
  State<StatefulWidget> createState() {
    
    return HHContentBodyState();
  }
}

//flag:  state 
class HHContentBodyState extends State<HHContentBody> {
    
  var flag = true;

  @override
  Widget build(BuildContext context) {
    
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Checkbox(value: flag, onChanged: (value){
    
            // flag = value!;
            print(flag);
            setState(() {
    
              flag = value!; 
            });
          }),
          Text(' Agree to the agreement ')
        ],
      ),
    );
  }
}

Four . Case three list list

• ListView Scroll view
• Column Vertical view
• decoration decorate
• padding Margin
• crossAxisAlignment Cross shaft
• SizedBox Middleware interval

import 'package:flutter/material.dart';

void main() {
    
  // runApp(const MyApp());
  runApp(
    MyApp()
  );
}

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(title: Text('title'),),
        body: HomeBody(),
      );
  }
}

//ListView  Scroll view 
class HomeBody extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return ListView(
      children: [
        HomeProductItem('title', 'desc', 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
        SizedBox(height: 8),
        HomeProductItem('title', 'desc', 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg'),
        SizedBox(height: 8),
        HomeProductItem('title', 'desc', 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg'),
      ],
    );
  }
}

/** Column  Vertical view  decoration  decorate  padding  Margin  crossAxisAlignment  Cross shaft  SizedBox  Middleware interval  */

class HomeProductItem extends StatelessWidget {
    
  final String title;
  final String desc;
  final String imgUrl;

  HomeProductItem(this.title, this.desc, this.imgUrl);

  @override
  Widget build(BuildContext context) {
    

    final style1 = TextStyle(fontSize: 30, color: Colors.blue);
    final style2 = TextStyle(fontSize: 20, color: Colors.orange);

    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        border: Border.all(
          width: 5, 
          color: Colors.purple
        )
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title, style: style1,),
          SizedBox(height: 8),
          Text(desc, style: style2,),
          SizedBox(height: 8),
          Image.network(imgUrl)
        ],
      ),
    );
  }
}

5、 ... and . Case four Addition and subtraction

• mainAxisAlignment Spindle
• state.widget.params state obtain widget Properties of

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
    
  // runApp(const MyApp());
  runApp(
    MyApp()
  );
}

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(title: Text('title'),),
        body: HomeBody(),
      );
  }
}

class HomeBody extends StatefulWidget {
    
  final params = 'params';

  @override
  State<StatefulWidget> createState() {
    
    return _HomeBodyState();
  }
}


//mainAxisAlignment  Spindle 
//state obtain widget Properties of 
class _HomeBodyState extends State<HomeBody> {
    
  var num = 0;

  final style1 = TextStyle(fontSize: 20, color: Colors.red);

  @override
  Widget build(BuildContext context) {
    
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(onPressed: (){
    
                setState(() {
    
                  num--;
                });
              }, 
              child: Text('-', style: style1)),
              ElevatedButton(onPressed: (){
    
                setState(() {
    
                  num++;
                });
              }, 
              child: Icon(Icons.add)),
            ],
          ),
          Text(' Current count ：$num', style: style1),
          Text(this.widget.params)
        ],
      ),
    );

  }

}

6、 ... and . StatefulWidget Life cycle

• StatefulWidget It consists of two classes ：StatefulWidget and State