Before developing the Flutter, it is important to understand the Dart language. The differences between the Dart language and other development languages are discussed in this article. The version of Flutter used in this tutorial is stable version V2.0.6.

Create project Flutter

It is recommended to use the command line to create a project (the process of creating a project using the IDE is slower), as follows:

flutter create hello_world
Copy the code

Flutter will create a sample project by default and then open the project using the command (the code command is an alias of VScode and needs to be configured in.zshrc: alias code=’/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code’

code hello_word
Copy the code

The project directory structure is shown below:Each directory or file is described as follows:

  • Android: Android native engineering configuration files, including app ICONS, native resources, permissions configuration, etc., can be seen in the previous article on Android packaging publishing: How to Publish Android Applications?
  • Ios: Ios native project configuration related files, those familiar with ios development will know the specific purpose, the most important is under Runner, set to the native configuration, such as the most critical InfoPlist file, and permissions related configuration, it is recommended to configure these configurations in Xcode will be more intuitive.
  • Build: Package output files, mainly Android package files, iOS packaging needs to be done through Xcode.
  • Dart is the entry file, and the main method is the entry method.
  • Test: Tests related files
  • Web: Introduced with Flutter 2.0, supports three unified web files
  • Pubspec.yaml: This file is very important. All third-party dependencies and file dependencies are managed through this file, similar to Apple’s Podfile and Android’s Gradle file.

Run the application

If you want to run on an Android emulator, you need to install Android Studio and configure the emulator. As for Android debugging, it is similar to Android application development. Apple, too, requires you to install Xcode and start the emulator. Real machine debugging Apple is relatively troublesome, need to have a developer account, the real machine identifier (device unique identifier) added to the development of the corresponding application of the device, this can be baidu search how to configure.

After the configuration is complete, select the Device or emulator to run (the currently selected Device is displayed in the lower right corner, or No Device if not selected, as shown in the figure below), and run the command lineflutter runCan complete the compilation and enter the code debugging.The Flutter application supports hot overloading during debugging (pub dependency changed to require recompilation), so use hot overloading as much as possible as compilation takes a long time.

Development equipment configuration

If you want to run emulators, the requirements for development devices are quite high, and the Mac Pro (16GB of memory) is recommended for development. Windows PCS also need at least 16GB of ram, and the “whoosh” of fans once the emulator is running makes the computer feel tired!

Let’s make a little change

Run up the demo, do not start to change the code to have fun is not too big feeling, we will achieve in the middle of the screen to show the Logo, click after switching pictures of simple modification.

Using image resources requires two steps. First, you need to create an image folder to store the image resources. Second, you need to specify the dependency resource directory in the PubSpec file. Create an images folder to store the image files and place the image files (Avatar-jpg and qrcode.jpg) in the images directory. Set assets properties in pubspec.yaml:

	flutter:

		uses-material-design: true
		assets:
    	- images/avatar.jpg
    	- images/qrcode.jpg
    
    # Other configuration
Copy the code

Be careful where you place them, there are corresponding comments in pubspec.yaml. After the configuration is complete, run the flutter pub get command to update the dependent resources.

The main code is as follows:

class _MyHomePageState extends State<MyHomePage> {
  List _imageNames = [
    {'image': 'images/avatar.jpg'.'text': 'Island Coders'},
    {'image': 'images/qrcode.jpg'.'text': 'Scan code attention'}];int _index = 0;

  void _onSiwtch() {
    setState(() {
      _index = (++_index) % _imageNames.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          child: Column(
            children: [
              Container(
                width: 128,
                height: 128,
                margin: EdgeInsets.only(top: 10, bottom: 10),
                child: Image.asset(
                  _imageNames[_index]['image'],
                  fit: BoxFit.cover,
                ),
              ),
              Text(
                _imageNames[_index]['text'],
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _onSiwtch,
        tooltip: 'switch', child: Icon(Icons.swap_horizontal_circle_outlined), ), ); }}Copy the code

The code logic is as follows: the _MyHomePageState class is a stateful component of MyHomePage. The components of the Flutter are similar to those of the React. They are stateless and stateless.

The underscore _ indicates that the class, method, or member variable is private and cannot be accessed outside the class. _MyHomePageState defines an array (List) of type Map <String, String> _imageNames and an array of state variables controlling the subscript _index. When the toggle button is clicked, the value of the state variable _index is changed by setState in the _onSwitch method, causing an automatic refresh of the interface.

The elements and hierarchy of page components are as follows:

  • AppBar: navigation bar
  • Body: main interface
    • Center: indicates the Center component
      • Container: A Container of page elements, similar to an HTML div, that specifies the dimensions and margins of the interface
        • Column: The Column layout, which means that the elements are arranged vertically once.
          • Image container: used to limit the image display size, margins, etc
            • Images: Display images using local resources
          • Text: Displays the text under the picture
  • FloatingActionButton: floatingButton

You can see that the level of the page looks a lot like HTML. In fact Dart was originally designed to replace Javascript, and The Flutter itself is a lot like React. As you can see from the code, the interface has many layers of nesting, which is often mocked, but we can reduce the layer of nesting by removing the components. (The interface is also written a bit like JSX, except that Flutter has a lot of layout components built in to simplify development.)

The final result

Click the toggle button to change the image and text