This article will focus on how to transition from a Web developer to a Flutter project. It will not cover how to install Flutter, how to debug the IDE, how to configure the environment, etc. These online a pile of search, if there is a need to students can take on the Internet oh ~

After Flutter came out, about in the version of V1.12.13, we made an internal CRM APP (Pure Flutter project, which is now running online). This project experienced a long cycle, and many students were involved in it, and we also stepped on many pitfalls. The second project was in V1.17.5 and upgraded to V1.20.2 since then. This project is a native hybrid development mode. The first small version of the project is running online, and the second small version is under development and running well. Of course, there are a lot of problems with Flutter. These problems will be explained in the future Flutter series

language

JavaScript is a weakly typed or dynamic language that can dynamically extend properties to any object at any time (this has both advantages and disadvantages, such as being too flexible and making code hard to predict), whereas Flutter uses Dart as its development language. Dart is a strongly typed language. If you haven’t worked with TypeScript and CoffeeScript before, you can expect to see red everywhere, and type checking will be mandatory after dart2.0 to help developers reduce errors. This is similar to TypeScript and CoffeeScript. If you want to learn more about Dart, you can either go to the Dart website or do your own research online.

engineering

First we create a Flutter APP development environment

flutter create --template=app projectName
Copy the code

The Flutter command supports this when you install the flutter locally. Of course, you can automatically create a Flutter project in Android Studio.

Also, flutter create –template= supports app, Module, package and plugin. In order to create different projects separately, we will only introduce app projects here, and the rest will be covered separately in a later series. By mentioning here, the mode of our mixed development with native is the Module mode.

Let’s take a look at the directory file after initializing the project

flutter create --template=app test_flutter_app

As a Web developer, the first time you see a project directory like this is a bit hazy. Node_modules? Package. The json?

.
├ ─ ─ the README, md├─ Android # Android configuration project and generate package files│ ├ ─ ─ the app│ ├ ─ ─ build. Gradle│ ├ ─ ─ gradle│ ├ ─ ─ gradle. The properties│ ├ ─ ─ gradlew│ ├ ─ ─ gradlew. Bat│ ├ ─ ─ the local properties│ ├ ─ ─ Settings. Gradle│ └ ─ ─ testflutterapp_android. On iml├── Assets # This directory is not initialized for things like pictures├─ Build # For packing├─ ios # ios configuration project and generate package files│ ├ ─ ─ Flutter│ ├ ─ ─ Runner│ ├ ─ ─ Runner. Xcodeproj│ └ ─ ─ Runner. Xcworkspace├─ lib # Development directory mainly write business code.dart file├ ─ ├ ─ sci-tech └─ ├ ─ sci-tech├ ─ ─ pubspec. Lock├─ pubspec.yaml # equivalent to package.json├─ # Unit Test│ └ ─ ─ widget_test. Dart└ ─ ─ testflutterapp. On imlCopy the code

If you are using the Android Studio editor, there will be an External Libraries folder in the same directory as the project, which will contain information that the project depends on.

.
├ ─ ─ the Dart Packages├ ─ ─ the Dart to the SDk└ ─ ─ Flutter PluginsCopy the code

page

The next step is to run the app and see what the page looks like. Remember that flutter pub get works the same as NPM install or YARN.

Homepage effect after running:

Effect of home page

We can all see a Flutter Demo that looks like a counter, which is the code for the Flutter initialization project. When we see a page like this, do we also have a Web implementation in mind? It is very simple. How does the Flutter side implement such a page at the code level?

Dart: the main function in the lib/main.dart entry file is run by default

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

So what’s really important is the MyApp instance in the runApp function executed in main.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo'. theme: ThemeData(  primarySwatch: Colors.blue,  visualDensity: VisualDensity.adaptivePlatformDensity,  ),  home: MyHomePage(title: 'Flutter Demo Home Page'),  );  } } Copy the code

We can see that the MyApp function returns an instance of MaterialApp, in which the home argument is passed the MyHomePage class we will show.

In this section we’ll take a look at the implementation of the MyHomePage class:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

 @override  _MyHomePageState createState() => _MyHomePageState(); }  class _MyHomePageState extends State<MyHomePage> {  int _counter = 0;   void _incrementCounter() {  setState(() {  _counter++;  });  }   @override  Widget build(BuildContext context) {  return Scaffold(  appBar: AppBar(  title: Text(widget.title),  ),  body: Center(  child: Column(  mainAxisAlignment: MainAxisAlignment.center,  children: <Widget>[  Text('You have pushed the button this many times:'),  Text(  '$_counter'. style: Theme.of(context).textTheme.headline4,  ), ]. ),  ),  floatingActionButton: FloatingActionButton(  onPressed: _incrementCounter,  tooltip: 'Increment'. child: Icon(Icons.add),  ),  );  } } Copy the code

The entire page is implemented in a class, including the state of the page and the handling of events. For those who are careful, they may have noticed that MyHomePage is a different class from the MyApp class. They are inherited statelessWidgets and StatefulWidgets. The way I understand it, it’s the difference between Web but page applications like Vue and React, stateless pure presentation components that we encapsulate ourselves, and stateful components.

The setState() function is used in Flutter to trigger a page refresh and re-render the changed data.

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
Copy the code

The Flutter project is full of class implementations like this, as you may have seen, which appear to be nested level by level on the page. That’s right! Everything inside a Flutter is a Widget, which brings us to the following — an element can also be called a Widget

The element

The base element of a Flutter is a Widget, just like any other element tag in the Web.

<div></div>
Copy the code

So how does this basic Web tag go in the Flutter project?

Container(child: null)
Copy the code

What about tags that have other elements in them?

<div>So here I have HTML</div>
Copy the code

To Flutter project

Container(child: Text("Harm, I'm a Flutter."))
Copy the code

As you can see here, the Text in Flutter is an instance of a Text Widget object. Everything is Widget thus visible in general.

The entire page is also nested layer by layer. It may feel awkward at first, but it is ok when you get used to it. In the IDE, the parentheses after each Widget keep up with the name of the Widget, which is another optimization.

Nesting optimization presentation

jump

The concept of a Flutter Route jump is the same as that of a single page on the Web. A routing stack is maintained for management. A push opens a new page, and a pop opens a page.

// Navigate to the new route
Navigator.push( context,
  MaterialPageRoute(builder: (context) {
    return NewRoute();
  }));
Copy the code

Navigator is a routing management component that provides methods to open and exit the routing page. The Navigator manages a collection of active routes through a stack. The current page is usually the route to the top of the stack. Navigator provides a number of ways to manage the routing stack.

// Exit the current page and return to the previous level
Navigator.pop(context, "I'm the return value.")
Copy the code

Another way is to use named routes, which require us to define the routing table first, which is a bit like the routing table defined by Route on the Web. We also need to inject the defined routing table at APP startup:

MaterialApp(
  title: 'Flutter Demo'.  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
 // The registration routing table can also be written to a separate file  routes:{  "/":(context) => MyHomePage(title: 'Flutter Demo Home Page'), // Register the home route  "new_page":(context) => NewRoute(), .// Omit other route registration information }, home: MyHomePage(title: 'Flutter Demo Home Page'), ); Copy the code

When you use named routes, the jump method is a little different, and the return is the same.

+ Navigator.pushNamed(context, "new_page"); // Arguments can also be passed as arguments
- Navigator.push(context,
- MaterialPageRoute(builder: (context) {
- return NewRoute();
-}));
Copy the code

Wrote last

The purpose of this article is to give you a general understanding of Flutter development (which is the original color), and thus the purpose of this article has been achieved. In the upcoming Series on Flutter, specific applications and pitfalls will be detailed for practical business scenarios, or for a generic component. Look forward to the next series.

  • Welcome to be done right, clap brick ~
  • Your code has books you’ve read and paths you’ve traveled
  • Better growth comes from experience

Blog address welcome to visit

GitHub I don’t want Star✨ (Crazy hint)