preface

Flutter is a Google productEmerging cross-platform mobile client UI development framework, is being used by more and more developers and organizations, including Alibaba’s Xianyu and Tencent’s wechat.

Today, I will present a comprehensive and detailed guide to getting started with Flutter development, including environment construction, key syntax and examples. I hope you will enjoy this guide.

directory

This paper mainly consists of two parts: environment construction & example explanation

Construction of Flutter environment

The setup here is mainly based on Mac OS.

1. Install the brew

  • Definition: package management tool, refer to: [official website address](brew.sh/
  • Purpose: Easy to install/uninstall/update various software packages, such as flutter, Nodejs, etc
  • Application scenario: Quickly build a local development environment
  • Installation:
The command line to run: / usr/bin/ruby - e "$(curl - fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"Copy the code

Download the Flutter SDK

  • Download address: official website link

  • Unpack the downloaded SDK to a local directory

3. Configure environment variables

Enter the following files on the command line

Open the configuration file open ~/. Bash_profile // If the file does not exist, create it and open it. Enter CD ~ touch. bash_profile open ~/.bash_profile // 2. Under the open configuration file to add the following statement & save the export PATH = / Users/Carson. Ho/AndroidStudioProjects/flutter/bin: $PATH / / note:... Export PUB_HOSTED_URL=https://pub.flutter-io.cn export is the folder from which you decompressed the flutter SDK FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // 3. The configuration source ~/.bash_profile takes effectCopy the code

4. Install the Flutter Plugin

Open Android Studio and install the Flutter Plugin as shown below:

5. Environment check

Terminal command line input

flutter doctor
Copy the code

For Android scenarios, the successful installation message is as follows :(for iOS scenarios, you need to install the place marked in red)

Error handling: If an error occurs, check the following items: Install the corresponding Android SDK and Android Studio.

A quick download is available here: www.androiddevtools.cn/

This concludes the explanation of the environment construction of Flutter.

Getting Started Examples

Here is a step-by-step guide to creating a Flutter project and Demo to get you started quickly on Flutter.

Step 1: Android Studio creates the Flutter project

A brief description of each:

  • The standard Flutter App project includes the standard Dart layer and Native platform layer.
  • Flutter Module: Flutter component engineering, including Dart layer implementation only, Native platform layer sub-engineering is the hidden engineering automatically generated by Flutter;
  • The Flutter Plugin project includes Dart layer and Native platform layer implementation.
  • Flutter Package: The Flutter pure Dart plugin project contains only the implementation of the Dart layer, often defining some common widgets.

Select Flutter Application to display.

Step 2: Engineering structure analysis

Dart the code used on Flutter is mainly written in the main.dart file, which is executed first once the project runs.

Step 3: Sample code parsing

  • This article uses the official Demo of Flutter directly to provide a quick introduction to Flutter development.
  • Dart to see the Demo code, parse as follows:
/ * * * 1. Import Material UI component library * * / import 'package: flutter/Material. The dart'; // Definition: Material is the basic package of Flutter that implements the Material Design style. Contains Text entry boxes, ICONS, images, rows, columns, decorations, animations, etc. // Therefore, basically every flutter program code, The first line of code introduces the package /** * 2. The entry to the Flutter application: runApp (), that is, the function is first executed * to display the given widget on the screen * note: **/ void main() => runApp(MyApp()); **/ void main() => runApp(MyApp); Void main() {// return runApp(MyApp()); MyApp -> jump to 3 /** * 3. MyApp is a component class that inherits from StatelessWidget. **/ class MyApp extends StatelessWidget {// Build () : Life cycle method in a Widget Describe how to build UI interfaces // For other lifecycle methods, See Appendix 2 @Override Widget Build (BuildContext Context) {// Material App is an App that uses Material Design. MyHomePage -> jump 4 return MaterialApp(title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }} /** * 4. Set the application display interface * note: StatefulWidget extends StatefulWidget {MyHomePage({Key Key, this.title}); StatefulWidget extends StatefulWidget {MyHomePage({Key Key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); // Call the parent class StatefulWidget createState() to create StatefulWidget related states -> jump 5} /** * 5. Implements a set of Widget lifecycle methods & updates the State of the Widget. **/ class _MyHomePageState extends State<MyHomePage> {int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } / / build () : @override Widget build(BuildContext context) {// Scaffolding implements the basic Material Dsign layout Return Scaffold(appBar: appBar (// appBar title displayed at the top of the interface: Text(widget.title),), body: Center(// Main content displayed in the current interface child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[Text('You have pushed the button this many times:',), Text('$_counter', Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: FloatingActionButton(// FAB, the most commonly used Widget component = round button onPressed: _incrementCounter, // Set the click event -> call _incrementCounter() tooltip: 'Increment', // long press the button prompt child: Icon(icons.add), // the button's subview: "+" style // There are more styles & properties for FAB, which are not covered here),); }}Copy the code
Appendix 1: StatelessWidget
  • Definition: stateless component, inherited from widget class.
  • Features: stateless, immutable, attributes cannot be changed
  • Examples: Icon, IconButton, and Text
Appendix 2: Introduction to Widget lifecycle methods

Appendix 3: Material App
  • Definition: An application that uses Material Design style
  • Function: Contains the basic controls required by Material Design style applications
  • Common attributes:

The Settings for the Theme are detailed here

Appendix 4: StatefulWidget
  • Definition: stateful component, inherited from widget class.
  • Features: Presence & changes with the Widget life cycle
  • Examples include Checkbox, Radio, Slider, InkWell, Form, and, TextField
  • Custom: Need to inherit & implement two classes
  1. StatefulWidget class: implements StatefulWidget createState() = to createState associated with StatefulWidget
  2. State class: Implements a set of Widget lifecycle methods to update the Widget’s State, as described in Appendix 2: Widget Lifecycle Methods

Go back to the original code

Special note: Use third-party libraries

In practice, third-party libraries are used. The steps for using third-party libraries in Flutter are as follows:

  • Step 1: Use the pubspec.yaml file for configuration

On iOS, use CocoaPods; Use Gradle on Android

  • Step 2: Obtain the required library into the project, and execute it through the terminal command line:
// Step 1: Go to the project directory CD Project directory // Step 2: download the Flutter packagesCopy the code

This concludes the introduction to Flutter development.

conclusion

  • This article provides a comprehensive introduction to Flutter development, including environment construction, key syntax and examples
  • I will continue to talk about Flutter. Stay tuned: Carson teaches You About Android

Welcome to attentionCarson takes you through Android blogs

Blog link: juejin.cn/user/252413…

Please give the top/comment a thumbs up! Because your encouragement is the biggest power that I write!