An overview of the

Flutter is a mobile UI framework that Google launched in 2015 to quickly build high-quality native user interfaces on iOS and Android. First unveiled as “Sky” at the Dart Developer Summit in May 2015, it was later renamed Flutter and released version 1.0 on December 5, 2018. Flutter currently supports web, desktop, embedded and other platforms.

The development environment

Flutter supports multiple system platform development and the official documentation is detailed. Here are some common problems with Flutter on Windows.

First we need to configure the following internal images to our environment variables so that Flutter can be accessed normally later.

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Copy the code

Then we need to download and installFlutter SDKHere we try to go fromOfficial website to download(need to climb the wall), because although the official documentation can be fromFlutter making download, but after my test, although it can be decompressed and found normallyflutter_console.bat, but runflutter doctorWill directly flash back, in order to avoid unnecessary trouble, it is suggested to download from the official website over the wall; After the download is complete, unpack it (try not to place it on a high-privilege system disk) and add it under the environment variable pathflutter\binTo open a command window to executeflutter doctorDependencies are automatically detected and compiled;The first entry displays the version information of the Flutter, indicating that our Flutter has been successfully installed. The second entry tells us that the command line plugin is not installed, so we open the Android Studio SDK Tools to download and install the latest plugin.Performed againflutter doctorThe plug-in is installed successfully, but the license is not accepted. Execute the command as promptedflutter doctor --android-licenses, if you have any enquiriesy/NDirectly y to the end, the configuration of the tool chain is complete;

Visual Studio and Android Studio are not installed. Android Studio is not installedFlutter config --android-studio-dir "here is android Studio path"The same goes for Visual Studio. Since we use Android Studio for development, we ignore the installation and configuration of Visual Studio.If you want to check whether the connection to Google has timed out, you can check whether the connection to Google has timed out.

Create a project

To better support Flutter development, we need to download the Flutter plugin and dart plugin. You will be surprised to find that you can create a Flutter Project directly from the file-new-new Flutter Project. When you create a Flutter Project, you may need to configure the Flutter SDK path.

Analyze project

When the interface is created, instead of Hello World, a counter is added by default. Let’s take a look at the directory structure. Android is obviously what we use with Android native developers, and ios is what we use with ios native developers. The most important thing is this lib-main.dart file, because it’s our main page code. Pubspec. yaml is a dependency configuration file. The rest are simple configuration files that are not described.

Dart is bundled with the Flutter SDK. The first one in the file is the main function. RunApp (Widget App) is then implemented in the function, while the Flutter widgets are built using a modern responsive framework. The main idea of the Flutter widgets is to build your UI with widgets. So we know that the interface starts from main, and runApp is setContent;

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

The MyApp class inherits the Widget, and then overrides the build method to call the Widget component and return the Widget. We can also see that Flutter builds its UI by repeatedly nesting widgets. For those of you familiar with Jetpack Compose, this is done by constantly nesting UI functions.

Based on using

Practice is the sole criterion for testing truth, we have to write a simple interface quick-and-dirty Flutter, for instance we should realize the following functions: to add an input box and add a button, each time you click the add button input box content will be added to a list of with image, and then click on the list of this data will be deleted from the list.

The MyApp component is derived from the StatelessWidget. This is a stateless component, as you can tell by its name. In fact, it loads components that are static and do not need to change the state of the internal data. The return value is a MaterialApp component that encapsulates the widgets needed by the application to implement Material Design;

class MyApp extends StatelessWidget {

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

The Home property of the MaterialApp loads a MyHomePage component. This is basically the page we want to edit. Note that it inherits from the StatefulWidget and can be understood as a stateful component for loading components whose internal data state needs to change. There is an abstract method createState(), which then calls the custom _MyHomePageState() class, which inherits the State class, and finally implements the build() method in this class to return the real Widget; The returned value is a Scaffold component that is the basic implementation of the Material Design layout structure, including drawers, snackbar and bottom sheet.

class MyHomePage extends StatefulWidget {

@override
State<MyHomePage> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
    return Scaffold();
Copy the code

The body property of that Scaffold is used to display the main content. The framework interface has an input box and a list, so the layout should be vertical. We define a Column component for vertical alignment. Then we add the TextField and ListView components to the Children property. Note that the flotation button belongs to the floatingActionButton property in that Scaffold. You can also use the mainAxisAlignment attribute to show the display position of the main child element;

body: Column( mainAxisAlignment: MainAxisAlignment.start, children: [TextField(), ListView ()],), floatingActionButton: floatingActionButton (onPressed: () {}, ToolTip: 'Add', child: const Icon(Icons.add), ),Copy the code

So let’s look at the input field, and we’re using the TextField component, and since it’s an input field, we definitely need to get the input, and the TextEditingController is the Controller property of the TextField, and when the user enters it, The text and selection properties of controller are constantly updated, so you can get the input content of the user. Of course, you can also use the onChanged callback. In addition, in order to experience, we can use the decoration property to add the prompt message without input.

final TextEditingController _controller = TextEditingController();
TextField(
  controller: _controller,
  decoration: const InputDecoration(
    hintText: 'Please input content',
  ),
),
Copy the code

For those familiar with Android development, Recyclerview provides many optimization mechanisms to reuse items to reduce memory. In fact, Flutter also provides a similar component, so we use listView. Builder. It automatically reclaims list elements, so let’s look at the next two main attributes: ItemCount is the length of the list, and itemBuilder needs a function to add a collection of data. Note that in order for the height of the ListView to be calculated properly we need to wrap it with a Expanded component.

List<Message> messages = [];
Expanded(
    child: ListView.builder(
        itemCount: messages.length,
        itemBuilder: (BuildContext context, int position) {
          return getItem(messages[position]);
        }))
Copy the code

Moving on to the layout of the Item needed by the ListView, we intend to achieve the following: Use the Row component to make the image and text appear horizontally, and then use a Column component to make the title and content text appear vertically. We can add some spacing or dividing lines for aesthetics, but just showing it doesn’t make sense. We implement the click event of item through the GestureDetector component package. Here, we make it delete a data after clicking.

Widget getItem(Message message) {
  return GestureDetector(
    child: Row(
        Image.asset("images/ic_launcher.png",height: 50,width: 50,fit: BoxFit.cover,)
        ```
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(message.title,style: const TextStyle(
            fontSize: 18, fontWeight: FontWeight.w600,),),
            Text(message.content,style: const TextStyle( fontSize: 16,),
       ),
    ),
    onTap: () {
          setState(() {
            messags.remove(message);
          });
        },
  ],
),
Copy the code

Yaml configuration file, which is nice and gives you an example of how to do this, but the images directory needs to be created manually in the root directory and put the images in it. You can also use a different name. The other attributes are relatively simple and will not be described here.

flutter:
  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  assets:
    - images/
Copy the code

Now it looks like the list data is just removed, but there’s no initial data, remember the onPressed property in the hover button at the beginning, we can write a method here to add a piece of data to the list, did you notice that setState() is used for both adding and removing data, This method is used to update the data state in the stateful component StatefulWidget and redraw the child components;

OnPressed: () {Message MSG = Message(" title ${messages.length + 1}", _controller.value.text); setState(() { messags.add(msg); }); },Copy the code

Ok, here we have basically completed a small requirement that we planned to implement at the beginning. Although the overall is relatively simple, it basically involves basic components and logic such as layout, list, text, image and data processing. For those who are not familiar with declarative UI, let’s create a simple widget nesting flow diagram using the items in the list and show you how it works.

conclusion

This is just a brief introduction to Flutter. There are many interesting ways to play Flutter and use it in advanced ways. Although it is very different from the native Android imperative build UI, and components are constantly nested causing bracket hell, the code structure of Flutter is much easier to understand. Flutter supports multiple platforms, including the Web and desktop. Most importantly, Flutter has its own set of widgets built into it. Although it follows the core ideas of React, there are no performance issues with Flutter compared to other platforms.