Introduction to the

This article is a personal account of my first flutter project.

Xiaobian is the front-end development background, and has a preliminary understanding of flutter, so the content will be more basic, as I talk to you.

If you want to learn about flutter, you are advised to understand the dart syntax first. In some Flutetr groups, some people do not understand the relationship between flutter and DART. They often ask questions about whether flutter belongs to dart or flutter. In addition, if you are new to flutter learning, you can find a group discussion about flutter, where you can see how others have solved some problems.

The official DART documentation is here: https://www.dartcn.com/

About Project Construction

Build the Flutter development environment look at this

1. https://flutterchi…

2. https://www.jiansh…

In fact, the official documentation of Flutter construction is quite detailed. I suggest that after downloading the FLUTTER SDK and configuring the environment variables, you can use the Flutter doctor command from time to time to check what is missing in your development environment.

There is a common problem with building a Flutter environment. The gradle package fails to be installed, and then fails after using many methods mentioned online. Here is a tip. You can open an Android project with Android Studio, or open the Android project with Flutter. Android Studio will automatically download gradle files for you. If you are confused, try this method.

About the introduction of third-party plug-ins

Here’s a look at the posture of Flutter using a third-party plugin.

How to choose the right third-party plug-in

Small editors often refer to plug-ins written by others in their projects. However, xiaobian will often encounter baidu on the same solution has a lot of similar plug-ins. Here, for example, small editor wants to find a data chart plug-in, go to the Internet, found many similar plug-ins, as shown below:

In addition to the picture there are many similar, so how to choose the appropriate plug-in?

(1) Look at the popularity, look at the likes. Most popular plug-ins first of all, there may be a strong team or some god behind the plug-in in continuous maintenance, and can timely answer the corresponding questions to the netizens, this plug-in is generally safe to eat;

(2) Look at the latest update time of the plug-in. In addition to the popularity of the plugin, also look at the latest update time of the plugin. The development of Flutter is relatively fast in recent years, and flutter itself is constantly updated. As the update brings, some old plug-ins may not be suitable for the latest version of Flutter, so we can choose some new plug-ins to eat as much as possible in terms of time.

(3) Look at the document details and cases. Some plugins may not be that popular, but that doesn’t rule out the fact that some plugins have just been released and haven’t been taken seriously yet. For more detailed written documents and clear cases, you can consider whether to use after reading the document roughly;

(4) Select and transform according to development needs. Those familiar with Flutter can download someone else’s plugin to modify the flutter if they don’t find a perfect one, but only if they have to.

Do not make arbitrary changes to the plug-in version

When we successfully use other people’s plug-ins, do not easily change the plug-in version introduced by the project. Some plug-ins in the development process due to a large update, there will be two versions of the code is not applicable to the situation, so before referencing plug-ins, check the plug-in version, consider whether to introduce, after the introduction of not easy to change.

How do I query the latest version of the plug-in?

Here are two methods:

1. Enter the name of the plugin to search for flutter pub.

2. You can search for the plugin name on Github in a similar way to flutter Pub.

Introduction to Common Plug-ins

Here are some common plug-ins for you to understand the grass xiaobian.

  1. Dio library (HTTP request library). Dart’s native HttpClient class for Web requests and the third-party open source Web request library can be used in the Flutter project in two ways. According to xiaobian, Flutter Chinese open source Dio library is the most popular HTTP request library. If you’re a front-end developer, you probably recognize the axios library, Dio library and I personally feel like axios is in the same position in front-end development right now.

  2. Flutter_ScreenUtil (page adaptation). Flutetr unit friends can go to in-depth understanding after learning. Generally, the units of flutter support some adaptive functions. However, as mobile devices continue to be updated, the pixel ratio and screen size of various devices vary, Flutter has some limitations in terms of page adaptation. In this context, the emergence of flutter_ScreenUtil solves the problem of page adaptation well. Flutter_ScreenUtil is easy to use. You can use flutter_ScreenUtil quickly if you haven’t used it yet.

  3. Shared_preferences (Lightweight data caching) As can be seen from the Flutter Pub, Shared_Preferences is quite popular. It is understood that there are data caching apis in both native Android and IOS. Android side uses Sharedpreferences to implement lightweight data caching,IOS side usually uses NSUserDefaults to implement lightweight data caching, but for me as a front-end geek, whether it is native Android or IOS I know nothing about it. I don’t know how to start working with the native data caching API. However, Flutter has a tripartite plugin library called Shared_Preferences based on Android and iOS. This is quite friendly for those who don’t understand native development.

  4. Flutter_echarts (Statistics charts), SyncFusion_Flutter_Charts (statistics charts). Both of these are data statistics display plug-ins. Xiaobian just used the first plug-in, the popularity of the second chart plug-in will be relatively high, interested partners can understand its usage. If you are familiar with Apache echarts, you will learn flutter_echarts quickly. Its usage is basically consistent with Apache echarts unboxing method.

In addition to there are a lot of plug-in xiaobian is not introduced, if there is a need, we can find their own surfing, a little baidu can be found, here to recommend you to see a brother before finishing the plug-in, very complete, you can go to the big man’s article taobao. Summary of Flutter third-party plugins.

Widget configuration query tips

Flutter provides us with a rich and powerful set of basic widgets. But when we first learned about Flutter, we often had to search the widgets’ configuration items on Baidu. For example, if I want to add a border to a Container, I might subconsciously write something like this:

  Container(
    border: 1,
    borderColor: Colors.pink,
  )
Copy the code

But in fact, it’s completely unworkable. Xiaobian at the beginning also do not understand, on Baidu all kinds of search, check the results may be like this:

So I remember the border of the Container in a short time after the first check. But after a while, I would forget how the border was written, so I would either go back to the code, or I would go back and look it over and over again, which was very inefficient for the development process. So in this case I learned a relatively efficient query configuration method: look at the source code.

Some people may think that reading the source code is not just for big bosses, but it is actually easier to read the source code of a widget configuration in Flutter. Using the Container as an example, I now need to check the configuration of the border and the rounded corners of the border. The whole process is divided into the following two steps:

  • Ctrl+ Click to view the Container configuration
  • Ctrl+ left click to view the value of BoxDecoration

If you don’t understand why it is a BoxDecoration, you can open the source code and look at it step by step. If you look at the source code step by step, you will know why it is a BoxDecoration.

In the driven image, you can see the Container configuration items clearly when you click into the Container source code. In addition, the comments in the source code also indirectly remind us how to write the value of decoration.

In fact, the root is simply because the Widget on the page is usually instantiated by its constructor, the configuration item of the Widget is only a parameter in the constructor. When THE editor gradually became aware of this, he began to get used to looking at the source code to understand how each Widget is configured. Through the above method, by analogy, when encountered configuration do not know how to write when you can look at the source configuration and annotations on the information, under normal circumstances can quickly solve the problem of configuration.

Learning website recommendation

In fact, xiaobian was completely confused when he first got into Flutter. There were two big reasons for this. The first one is the change of language type. Xiaobian has been writing JavaScript for a long time. Those who know about the front end know that JavaScript is a weakly typed language, while DART is a strongly typed language. Secondly, I was used to web pages. When I switched to Flutter, many writing styles changed greatly, which made it difficult to adapt to flutter.

However, as a small editor who is also new to flutter, my advice is to write more and get used to it. We may not know what the overall code style of a Flutter project looks like at first, but there are plenty of examples of existing code on the web for us to learn and see how others have written to get started with Flutter.

Here are a few bloggers who wrote good articles and at least helped me a lot during the month of flutter development.

There are more than 300 component cases in our blog at http://laomengit.com/. You can go through them quickly to get a sense of what widgets Flutter provides. You can use it as a dictionary.

Old meng flutter WeChat public articles: https://mp.weixin.qq.com/s/d-75qWXhww87TjXQGEkNfA here is old meng WeChat public, there are a lot of flutter dry goods.

It’s a long way. This is a prolific blogger and a big shot. Xiaobi got to know him from his Baidu Map related articles. There are many other things that new to Flutter may not know about. You can learn more about flutter on his blog.

Teacher Xu’s article has some common demand scenes, friends can go to see his article, the content is more basic, but very practical.

conclusion

This article is a small series of memories that are new to flutter after first touching flutter. I would like to share them with you and hope it can be helpful to those who are just beginning to learn flutter. We will continue to share some common problems with Flutter in the future.

In addition, learning websites, information, small make up here, there is a need to find small make up to, we work together. Of course, friends in possession of learning materials should not be stingy, but also to share xiaobian hey hey hey.