Note: This article is republished from the personal public number (Island front island)

Flutter is Google’s mobile UI framework for quickly building high quality native user interfaces and applications for mobile (iOS & Android), Web, desktop, and embedded devices from a single code base.

  • Pre-reading:
    • Environment and configuration of Flutter foundation
    • Use the command line development environment without THE AS Ide
    • Create a vm using the command line without AS Ide

After the environment and configuration and development environment/virtual machine creation then we can see what it really is, it’s time to take the wraps off the mystery.

Create the FLUTTER Project

Remember the previous command to create the Flutter project?

flutter create myapp
Copy the code

Here we create a Flutter project called MyApp. (Don’t forget to enter your work folder first.)



Create the Flutter project MyApp

Wait for the project to be created…

Here the project is created in three parts:

  1. The create section creates the required file structure, files, code, and configuration information for the editor. (66 documents)
  2. File partIt will be executed after the creation is completeflutter pub getCommand to update required dependencies.
  3. After the dependency update is complete, it willPerform a review of the development environmentAfter the check is completecd myapp & flutter runTo run your application.



(Create flutter project completed)

The project structure

Ok, once you’ve created it, let’s talk briefly about the structure of the project.



(Structure of the FLUTTER Project)

The more specific contents of the folder need to be explored, I won’t go into the details. It would be too long to say it all once.

By the way, there will be a Do not Edit. Comment in part of the code, so you’ll need to find the egg yourself.

One important concern for flutter development is the Lib folder. This is the main code directory, where the code we write is kept. Dart indicates that flutter is written mainly in the DART language. This directory has a default entry file.



(MyApp’s default main.dart)

Dart file and you’re like, “Wow, it’s so long, I can’t read it.” .

I’ll just delete those comments…



(Delete commented main.dart)

That’s still so long…

That’s ok. If you’ve read Flutter Chinese before, the code section will tell you to delete main.dart. Then copy the code provided by the tutorial and run it to get Hello World.

Starting from 0

And you think, well, that’s it, right?

Of course not!

I’m here to learn. I can’t just copy and paste a shuttle.

Note: My example is used here, and the rest will be based on this configuration and environment.

The Dart SDK is installed with Visual Studio Code and yamL is installed with Java or C/C++. Project type: Flutter project name: Myapp Programming language: Dart

main

Since it is to learn, it is necessary to take out the spirit of learning, starting from 0!

So… Let’s just delete the code.

Wait, don’t hit your face! Listen to me…

The default examples and Chinese tutorials work, but I don’t think they are detailed enough. So since it is to learn, why not start from zero to learn, bit by bit to understand him? Isn’t it?

Now let’s get down to business. What happens when the code is clean?

Dart copy the Chinese version of the code and then delete it, so that you have a reference, right?

Just like that.



(Copy the reference code)

Let’s start with the first line, and those of you who are a little bit basic know that this is introducing something, but what is it? I’m going to explain:

// Introduce the Material Design language (Dart based version of Flutter)
import 'package:flutter/material.dart';
Copy the code

Explanation:

Material Design (Based on Dart’s version of Flutter), Material Design is a new Design language released by Google. Google said the design language was intended to provide a more consistent and broader “look and feel” for phones, tablets, desktops and “other platforms.” I’m not sure how others translate it, but I think the Chinese translation is ** “texture design” **.

What if I can't remember for such a long time? !).

It doesn’t matter if you don’t remember, this is the time to take advantage of VS Code or other editor tools’ hints. As long as the following input will be prompted, this time as long as the first line is Ok!

import 'pfm';
Copy the code



(Import package prompt)

Then you’ll see this:

// Every application needs a top-level main() entry function to execute.
// Main () returns void
void main() => runApp(new MyApp());
Copy the code

Main is the top-level function and entry point for Dart.

Arrow function? This arrow function is different from the arrow function in JavaScript. We try not to use more advanced uses of Dart without a deep understanding of the syntax. Restore as follows:

void main() {
  runApp(new MyApp());
}
Copy the code

Does that make it look familiar?

There’s also a function called runApp, what is that?

runApp

RunApp is the entry function to a Flutter, so if you want to use it you must call runApp to start the Flutter project, otherwise an error will be reported.



(runApp hint)

The code hint also tells us that the runApp function accepts only one parameter called Widget. What is that?

Overview of the Flutter Chinese-Widget framework

The Flutter Widgets are built with a modern responsive framework. Inspired by React, the idea is to build your UI with widgets. Widgets describe what their view should look like given its current configuration and state. When the widget’s state changes, the widget will rebuild the UI, and Flutter will compare the changes to determine the minimum changes required to transition the underlying render tree from one state to the next.

Now you should understand widgets. A Widget is a framework for building a UI, and the runApp function takes the given Widget and makes it the root of the Widget tree.

About the Widget framework: The Widgets directory

Now that we know about main, runApp, and Widget, we can rewrite the code again:

void main() {
  runApp(
    Center( / / in the middle
      child: Text( // Text object
        'Hello World! '.// Text content
        textDirection: TextDirection.ltr, // Text output direction
        // textDirection needs to be specified when using virtual devices, otherwise it will fail to compile.
        // When using real devices or Material, there is no need to specify the text direction, which will be processed automatically.),),); }Copy the code

Once you start the project, you’ll see a Hello World without Material



(Hello World without Material)

Congratulations, you can now claim to have “mastered the writing of Flutter Hello World” *.

Moving on, the code defines a class called MyApp.

Now you think my title is going to say “MyApp”?

State x Widget

Sorry, you guessed wrong! Blow stine!

MyApp, which inherits from StatelessWidget. So WHAT I’m talking about is this thing about inheritance.

Overview of the Flutter Chinese-Widget framework

When you write an application, you typically create new widgets, which can be stateless statelessWidgets or stateful statefulwidgets, depending on whether your widget needs to manage some state.

The main job of a Widget is to implement a build function that builds itself.

In other words, statelessWidgets and StatefulWidgets are abstract classes of widgets. The only difference is:

  • The StatelessWidget is stateless, meaning it cannot be updated through data changes.
  • Statefulwidgets are stateful, meaning they can be updated with data changes, and you need setState to manage state.

StatelessWidget and StatefulWidget are abstract classes of widgets.

So we need to rewrite the Widget class to implement the specific code and logic. When overwriting widgets, we need to use @Override to decorate the parts that need to be overridden. (@override decorates the keyword. If you are not familiar with the backend language, you need to start searching for information. Otherwise, it will be too long to say.)

Following the code on the right at this point we can officially use the MaterialApp.

// Inherited from StatelessWidget
class MyApp extends StatelessWidget {
  // Override the Widget class implementation
  @override
  // Widget implements the build function
  Widget build(BuildContext context) {
    // TODO: implement build
    returnMaterialApp(); }}Copy the code

After saving, press the r command key in the console to see the effect!!

A red error warning message.

What? You don’t know what the R key means? Why don’t you go back and study right now? !!!!! Review portal



(Error Warning message – MaterialApp)

MaterialApp

Don’t panic, don’t be afraid! I’ll tell you what’s going on here. Let’s take a look at the source section of the MaterialApp first.



(MaterialApp source code)

Oh? Does this 1234 look familiar? Don’t you think you know it from somewhere?

Oh, yeah! “Is the same 1234 as in the error message, but the screen is too small to display it completely. Here we see the description of the last line:

If [home], [routes], [onGenerateRoute], and [onUnknownRoute] are all null, and [builder] is not null, then no [Navigator] is created.

Translation:

If [home], [routes], [onGenerateRoute] and [onUnknownRoute] are all null and [Builder] is not null then [Navigator] will not be created.

It still doesn’t say why. So let’s move on…



(MaterialApp source code)

Let’s see, notice this sentence:

Creates a MaterialApp.

At least one of [home], [routes], [onGenerateRoute], or [builder] must be non-null.

Translation:

At least one of the MaterialApp [HOME], [Routes], [onGenerateRoute] or [Builder] created must be non-NULL.

That should be clear by now. We are missing the necessary code implementation, so we will start with the simplest [home], so we can change the code to:

// Inherited from StatelessWidget
class MyApp extends StatelessWidget {
  // Override the Widget class implementation
  @override
  // Widget implements the build function
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Implement the home function
      home: Center( / / in the middle
        child: Text('hello world'), // Text content)); }}Copy the code

Save the code, and then R. (Note: I have no typo, because I have changed the rendering structure of the code, so I need to use R)

What? You don’t know what the R key means? Why don’t you go back and study right now? !!!!!

What? You can’t tell the difference between r and R? !!!!! You take off!



(Use Material’s Hello World)

A: wow! Why is it so ugly? What kind of APP interface looks like this?

Use the theme

Don’t worry, Sonny. “Rome wasn’t built in a day.” Lay the groundwork and take it one step at a time.

Look at the code on the right and you will see that Scaffold is used to implement the home function. Let’s take a look at the source code and see what it is:



(Scaffold source code)

Let’s look at this:

Creates a visual scaffold for material design widgets. Create a visual stand for the Textured Design part.

Oh, so this is the UI framework?

It’s not exactly true, but here’s how I understand it:

  • Material is design specification (standard)
  • Scaffold is a visual Scaffold that implements the design specification (standard implementation)
  • Widgets are UI frameworks that implement more specific objects, such as Text fields, rows, columns, and so on.

So as long as the Widget provides the required content for that Scaffold, that Scaffold is implemented as the corresponding design standard Material.

So the final code and run result:

import 'package:flutter/material.dart';

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

// Inherited from StatelessWidget
class MyApp extends StatelessWidget {
  // Override the Widget class implementation
  @override
  // Widget implements the build function
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold( // Scaffolding is used to implement the home function
        // Navigation bar (top) displays text
        appBar: AppBar( // Navigation bar (top)
          title: Text('Welcome to Flutter'), // Text content
        ),
        
        // Scaffold container body
        body: Center( // Center the text in the container
          child: Text('Hello World'),),),); }}Copy the code



(Flutter – Hello world)

Perfect!

conclusion

  • When learning a new programming language or framework, don’t rush into it. Copying and pasting a shuttle will only help you learn shape, not mind.
  • Know why, in order to better use in practice.
  • Official documentation is always one of the best sources to start with. What if the official website is in English? Domestic IT industry has developed for many years, Chinese community is likely to exist.
  • To learn English well, you need to explore the frontier areas and content by yourself.

The code to accompany the article has been updated to Github address: github.com/linxsbox/my…

Pre-reading:

  • Environment and configuration of Flutter foundation
  • Use the command line development environment without THE AS Ide
  • Create a vm using the command line without AS Ide

reference

  • Overview of the Flutter Widget Framework (cited)
  • Widgets Directory (cited)