This is the third day of my participation in the First Challenge 2022

Who am I? Where I am? What have I learned?

Follow the official website tutorial to go down, puzzling finished a click after the increase of the small demo, but at the moment can not help but send out soul torture.

So today it came.

This article will take you through a new understanding of flutter’s infrastructure and page relationships.

You’re from Vue? Never mind, low bar.

Are you a back-end career changer? Please, don’t roll the front end. The back end is cozy. (No, welcome. JPG)

The relationship between files and pages

This is just a brief, crude overview of the file’s relationship to show how the page is created.

Ps: I’m not talking about routing, but a page made up of widgets.

If you are already getting started with Flutter development, you can already skip this section if you can use flutter independent layout pages.

When developing with Vue/React, there is a word called componentization. I borrowed it from Vue to understand the cheese spot of flutter.

Let’s take a quick look at the code

// home page
import 'package:flutter/material.dart';
import 'package:learn/widgets/demo.dart';

void main() => runApp(MyApp()); // This is also dart syntax, but I'll use it as JavaScript to reduce acceptance costs.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(), // This is equivalent to confirming the layout function of the home page); }}class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( // Create an AppBar, the usual section of the top bar
        title: Text('Flutter learn'),
        elevation: 10,
        centerTitle: true,
      ),
      body: ProcessDemo(), The ProcessDemo function comes from the demo.dart file introduced at the top
      Children: [ProcessDemo(), CheckDemo(),],), */); }}// demo.dart
import 'package:flutter/material.dart';
class ProcessDemo extends StatelessWidget {
  const ProcessDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10),
      child: Column(
        children: [
          LinearProgressIndicator(
            value: . 5,
            valueColor: AlwaysStoppedAnimation(Colors.red),
          ),
          SizedBox(height: 16),
          Container(
            width: 100,
            height: 100, child: CircularProgressIndicator( valueColor: AlwaysStoppedAnimation(Colors.red), ), ), ], ), ); }}Copy the code

Ps: Because the components are in the official website tutorial, so directly to the link. >> Poke links to learn

Develop with multi-checkbox components

The components are already in the tutorial, so why does the author need to write a paragraph? Is the author in water word count?

No, I’m not sure if it’s black, but I’ve never seen a good question.

Look at the code

class CheckDemo extends StatefulWidget {
  const CheckDemo({Key? key}) : super(key: key);

  @override
  _CheckDemoState createState() => _CheckDemoState();
}

class _CheckDemoState extends State<CheckDemo> {
  bool _check = false;
  bool _switch = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Checkbox(
          value: _check,
          activeColor: Colors.red,
          onChanged: (v) {
            setState(() {
              _check = !_check;
            });
          },
        ),
        Switch(
          value: _switch,
          activeColor: Colors.red,
          onChanged: (v) {
            setState(() {
              _switch= v; }); },),,); }}Copy the code

Do you see the difference between the two components when changing their state? You must have seen it.

When I wrote the checkbox, I skillfully followed the tutorial and wrote _check = v; I get an error.

The vernacular translation is:

Why can’t a bool be assigned to a bool? Why don’t you give me a thigh?

Checkbox(
  value: _check,
  activeColor: Colors.red,
  onChanged: (value) {
    setState(() {
      _check = value!;
    });
  },
)
Copy the code

Find the solution behind the solution, add a Boolean after! An exclamation point.

There is a nullable value, so to use it, value! Must be executed.