From entry to mastery

flutter can run on multiple platforms through a set of code, including mobile, web, desktop and embedded. However, the support of web platform has not reached the Beta stage. Please do not use it in the production phase. When reading the document, it is recommended that you read it https://flutter.cn This is a Chinese website synchronized with official documents to reduce the cost of learning

In flutter, all content is widget, which is the smallest unit of flutter project
If you use Flutter in China, you may need to find a trusted image site that is synchronized with the official image site to help your Flutter command-line tool download the required resources to the image site. You need to set two environment variables for this purpose: "pub? Hosted? URL" and "shuttle? Storage? Base? URL", and then run the shuttle command-line tool.
All the following codes and cases are edited based on the Editor vs code. Use the editor and editor plug-in to get a better development experience. These plug-ins provide the functions of code completion, code highlighting, widget assisted editing, as well as support for project operation and debugging.
tip: in the flitter project, you can check whether there is a problem in the project through the flitter doctor
The project directory created by vs code is as follows. The code we wrote is mainly placed under the Lib folder. The most important ones are lib (program code writing) and pubspec.yaml (equivalent to package.json in npm project, setting the configuration item of the project)

The code required by the application is in 'lib/main.dart'. If you want to understand the explanation of each code block from a higher level, please see the comments in the code.

// Package: This is the package built in the system
// The following shows that an application with Material Design style has been created. Material is a common visual design language for mobile and web pages. Flutter provides a wealth of material style widgets.
import 'package:flutter/material.dart';
// The following shows the introduction of the third-party package English words
import 'package:english_words/english_words.dart';
// The main function uses the (= & gt;) symbol, which is the abbreviation of single line function or method in Dart, that is, arrow function. Note that if arrow function is used, only one line can be written.
void main() => runApp(MyApp());
// StatelessWidget represents a stateless component, which means that all States in the component cannot be changed. If you need to inherit a component with a state, it is a stateful widget
class MyApp extends StatelessWidget {
  // As long as the setState method is called, the build will be reloaded. The idea of the fluent framework comes from react
  //Note that the main work of a widget is to provide a build() method to describe how to display itself according to other lower level widgets, which can be compared with the render function in react.
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        //  The Center widget can align its child widget tree to the center of the screen.
        body: Center(
          child: RandomWords()
        ),
      ),
    );
  }
}

class RandomWords extends StatefulWidget {
  RandomWords({Key key}) : super(key: key);

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

class _RandomWordsState extends State<randomwords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

tip:

  • Try to set a Container in the outer layer of Text, so as to make full use of the Container to set width, height, etc
  • Row and column are designed based on flexbox. After use, the elements will be centered vertically and horizontally
  • Stack is designed based on the idea of positioning and absolute positioning

Scan code attention to the public number, there are more exciting articles waiting for you.

</randomwords>

Tags: Front-end Mobile React JSON npm

Posted on Mon, 04 Nov 2019 02:54:00 -0800 by philicious