Flutter series 4 — HelloWorld

Want to learn the Flutter, The Flutter series (1) — Introduces the Flutter series (2) — compares the Flutter series (3) — Builds the Environment (Windows) — The Flutter series (4) — HelloWorld Github.com/yang0range/…

The first Demo created

In the last article, WE introduced the environment of Flutter in detail. Now that we’ve built Flutter, we can’t wait to see how to create our first Demo.

Open the Android Studio

image.png

And you can see, you can see there are four choices.

So what’s the difference between these four choices?

The standard reference procedure for Flutter

The basic Plugin for the Native engineering of the Flutter package

Flutter Package pure Dart library engineering

The Flutter Modue is a Module of the existing project

Here we need to create a Flutter Application project.

Project directory structure

Here, we can first see the three important directories, which are Android, ios and Lib.

Android, as the name suggests, is where you write code for the Android platform.

Ios is similar to that, and that’s where you write code for the ios platform.

This is where we actually write the code for Flutter.

There is also a very important document here,

The file pubspec.yaml is our flutter configuration file. For example, the dependencies of all three parties are in this file.

The directory structure above can be roughly understood as, the engineering structure of the tidy flutter is.

Run official Demo

Let’s get the official Demo up and running.

It doesn’t work

Running Gradle Task ‘assembleDebug’ when we run the official Demo for the first time… The situation here is because Gradle’s Maven repository is abroad and cannot be loaded due to a well-known problem.

The solution

Here, we can use the mirror address of Ali Cloud to solve this problem. Open the following directory, where to modify.

You can also copy the following code directly.

buildscript {  
  ext.kotlin\_version = '1.3.50'Maven {// Google () // JCenter () maven {url'https://maven.aliyun.com/repository/google' }  
  maven { url 'https://maven.aliyun.com/repository/jcenter' }  
  maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }  
 }  
  dependencies {  
  classpath 'com. Android. Tools. Build: gradle: 3.5.0'  
  classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin\_version"}} AllProjects {remotes {// Google () // jCenter () maven {url'https://maven.aliyun.com/repository/google' }  
  maven { url 'https://maven.aliyun.com/repository/jcenter' }  
  maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}}}Copy the code

Then open the flutter. Gradle file. The path to flutter is in.. Under \ flutterSDK \flutter\packages\flutter_tools\gradle, modify the contents

// Google () // jCenter () maven {url'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
    dependencies {
        classpath 'com. Android. Tools. Build: gradle: 3.5.0'}}Copy the code

Run it again, and you’re done!

Official Demo structure

Dart file, and that’s the code for the motion Demo.

Based on the code, we can draw the structure of the Demo as shown below.

A few important things from the official Demo

Here we focus on one by one.

void main() => runApp(MyApp());

The entry function, here using the arrow function from the Dart syntax, is very similar to what Kotlin used.

You can see here that MyApp() inherits the StatelessWidget and the StatelessWidget inherits the Widget

The runApp here acts as a global update. Normally a flutter will not be called after it is started

MyApp

The Myapp returns a MaterialApp that, if you know Android, will be familiar with. This allows the Flutter to maintain a MMaterial UI style.

So we’re going to use CupertinoApp.

StatelessWidget

CreateElement () creates the StatelessElement object, One StatelessWidget corresponds to one StatelessElement.

You can see that MyApp is inherited from the StatelessWidget.

StatefulWidget

For widgets with intermediate State changes, createElement() creates a StatelfulElement object, createState() creates a State object (which may be called multiple times), and createState() creates a State object (which may be called multiple times).

MyHomePage inherits from StatefulWidget because of UI changes caused by clicking count++.

State

State is a State object, and <> is used to indicate to whom the State is bound.

State has two functions: 1. The modification State is written in this class and can be read synchronously during Weidget.

2. When the State changes, call state.setState () and refresh Weidget.

State.setState()

Make the subtree a child Widget of the StatefulWidget and create the corresponding instance of the State class, triggering the refresh of the subtree by calling state.setState ().

In the Demo, you can see that _MyHomePageState inherits State and partially refreshes the UI with the state.setState () method.

The last

The above is a detailed introduction to the whole official Demo and the first Flutter project we came into contact with. Next, we will take a look at what Dart language is, what features Dart language has, and why IT is used for Flutter.

Flutter has been one of the Top20 software libraries. Through the next series of articles, I hope that we can learn Flutter together, make progress together, gain something together, and master the initiative of the future technology mainstream!

Have any good suggestion, opinion, idea welcome to leave a message to me!

Welcome to pay attention to the public number

Pay attention to the public number will have more harvest!

Move the hand to praise, collect, pay attention to a key three even go a wave!