This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

Recently, many netizens have added me to my wechat to ask questions about Flutter learning. As a new technology, there are not many books on Flutter learning. But in terms of Flutter’s ecological influence, it is getting stronger and stronger. The Dart language, for example, ranks 7th on StackOverflow’s list of the most popular technologies for 2021. As Google moves forward with its cross-platform solution for Flutter, it is expected that more and more developers will build their applications using Flutter.

This article will give you a complete overview of Flutter. You are welcome to add and communicate with Flutter in the comments section.

Learn circuit mind mapping

Let’s start with a mind map to give you an idea.

The Dart language

If you do not have any programming background before learning the Dart language, it is recommended that you learn computer basics first. Dart, as a modern object-oriented programming language, shares the characteristics of most programming languages on the market, including the following:

  • Variable definition and assignment: This is the most basic part, at least to know what a variable is and how to assign a value. Final, var and const.
  • Basic mathematical operations: addition, subtraction, multiplication, division, full division, mod and other operations;
  • Conditional branch: if… else if… Else control program logic direction, or switch branch;
  • 3. To use a cycle to perform repetitive tasks;
  • Container classes: applications such as List, Map, and Set;
  • Functions and parameters: One is to write reusable logic processing code using functions, and the other is to be aware that functions are objects in Dart. At the same time, the use of named parameters and optional parameters of functions should be distinguished.
  • Object-oriented programming: understand the concepts and ideas of object-oriented programming, and be able to properly use classes to encapsulate code to improve reuse and reduce coupling;
  • Inheritance, polymorphism, and abstract classes: These are very important concepts to improve code reuse and reduce code coupling. It is recommended to take a look at the source code and design ideas (such as design patterns), and then think about abstracting and organizing the code structure when encountering complex business situations.
  • Mixins: Mixins provide a more flexible way to reuse code and combine functionality into existing classes, avoiding some of the drawbacks of inheritance.
  • Generics: Using generics as a tool class is a great choice because you can handle multiple data types in one set of code.
  • Future: Sort of like front-end promises, futures make asynchronous programming much easier.
  • Null Safety: Air safety is now almost standard in high level languages. Null security allows teams to follow the same specification, improving code robustness.

Flutter components

As a qualified App developer, it is a basic requirement to restore a UI interface. It is recommended that you become familiar with the built-in components provided by the Flutter framework at first. You can then combine the built-in components into your own custom components. This section includes:

  • Run Hello World to run through the entire application.
  • Know the structure of your application and how to design your code directory structure.
  • Layout class components: for exampleContainer.SizedBox.Padding.Stack.ListView.GridViewSuch as components.
  • Business components: for exampleTextField, buttons, text, images, ICONS and other components.
  • Custom components: Use a combination of layout class components and business class components to form your own reusable components.
  • Self-owned component library: according to product characteristics and company needs, we extract reusable components to form our own component library, so as to improve the development efficiency of the whole company.

The form

In applications, forms appear frequently in the interface. How you handle forms has a huge impact on development efficiency. It is recommended to start with a simple form page, such as a login page or a registration page. Then make some complex form pages as follows:

  • Simple form page implementation: login page, registration page, binding mobile phone number such pages;
  • The realization of different forms: for example, the realization of common text, password, number, date, single selection, multiple selection and other forms;
  • Form verification: Encapsulate the form verification library and place common verification rules in the verification library, such as length, mobile phone number verification, password strength verification, date format verification, etc. The front-end verification can avoid the pressure of back-end requests and improve user experience.
  • Form encapsulation: Encapsulate a common set of form components for reuse by the entire team, improving productivity and reducing bugs.

State management

State management is at the heart of Flutter. How to handle the relationships between data entities, business logic, and interfaces is critical to the maintainability of Flutter code, which depends on the implementation of state management. For state management, you are advised to learn as follows:

  • Read about the difference between stateful and stateless componentsStatefulWidget 和 StatelessWidgetSource code, there will be a deeper understanding.
  • Understand the rendering mechanism of components: Although we rarely pay attention to how components are rendered in development, when using the state management plug-in, we can use the rendering mechanism to see how to reduce the scope of the refresh when updating the state data and achieve a local refresh to improve performance.
  • Mainstream status plugin application: Compare the mainstream status plugin and choose an application that is suitable for your team. For long-term status management plug-ins, you are advised to understand the specific implementation mechanism, so that problems can be quickly located and solved.
  • Refresh on demand: comparesetStateOne of the great advantages of this simple and crude global update is the ability to implement local refreshes. Page fluency can be greatly improved by refreshing on demand.

To learn more about state management, read the following two articles:

  • 🚩🚩🚩 Suggested collection!! Flutter state management plugin which is strong? Look at the list of code farmers on the island!
  • Introduction to Flutter (92) : A summary of the state management series

Network request

App business function development, a considerable part of the work is and back-end interface, interface. It is important to understand the data interaction with the back end and encapsulate the network request library. It is suggested to learn as follows:

  • JSON data understanding: This is actually very simple, basically look at the understanding. However, it is more important to agree with the backend to return data format, so as to avoid the different format of each interface, which is difficult to do unified encapsulation.
  • JSON data to object: Once upon a time, I used to fetch the desired value directly from the key of the JSON object (which was actually converted into a Map). As a result, I learned the hard way that a backend problem that became null would cause flashbacks. And every time you need to type the name of the key, encoding efficiency is very low. On the one hand, the object can be reused in the whole project. On the other hand, the object can be accessed through object attributes, and the coding has hints. Also, you can apply the NULL safety attribute to directly know which attribute may or may not be null.
  • RESTful interface debugging: Early interfaces were all GET and POST requests, but they were semantically ambiguous. It is recommended that RESTful interfaces be used uniformly with back-end conventions.
  • Mock data: It is important to use Mock data to simulate business logic before the back-end interface is available. It is recommended that the Mock data fetching interface be the same as the back-end interface, so that you can switch the interface implementation class when the back-end interface is in place.
  • Web request plugin usage and encapsulation: The most popular web request plugin for Flutter is Dio, and its corresponding encapsulation version is Retrofit. It is not recommended to start with a packaged version. Instead, you debug one by one and try to encapsulate it yourself, so you can understand the process better.
  • Headers 和 Cookie: Apps are different from browsers, which manage them themselvesCookie. The App needs to manage itselfCookie. So it’s important to know how to set the request headerHeadersAnd how to get the back endCookieAnd wrote backHeadersThe inside.

Responsive programming

When you have a good grasp of the interface, state management, and network requests, there should be no problem developing basic apps with Flutter. This is the time to consider how the application architecture is optimized. For Dart, tools such as Stream and StreamListener are provided to drive associated business or interface updates through streams for responsive programming. Typical of these is the BLoC model (BLoC can also be used for state management). Understanding BLoC’s philosophy is very helpful in designing the overall application framework.

animation

Once you’ve mastered the basics, it’s tempting to look at cool apps and try something like this once in a while. This is when you need to understand how animation is implemented. Flutter provides many ways to build animation, such as:

  • Basic animation components: for exampleAnimatedContainer.AnimatedOpacityAnd so on, simple but fun animations can be achieved through these components.
  • Animation reuse: useAnimatedBuilderReusable dynamic effects can be constructed.
  • Animation Curves: Flutter comes with a number of animation curves and can be customized if not. With animation curves, you can define some of your own animation transitions.
  • Animation plugins: Pub also offers many animation plugins, for exampleLottieYou can convert AE animations to Flutter animations. How to find animation plugins that require knowledge of search, such as search keywordsAnimationOr you can open your eyes to the tech community and find a cool plugin by accident.

drawing

Once your animations are done, you’ll find that the product and design may already be looking at you, and their proposed interactions or interfaces will improve (don’t feel like you’re digging a hole by upgrading your skills). For example, you might have a strange shape that you need to implement, and that’s where drawing comes in. Drawing actually requires a high level of mathematical knowledge, you may need to review advanced mathematics, linear algebra knowledge 😜😜😜 – so the big factory screening schools and education actually has a certain reason, these screening people’s basic knowledge is generally not bad.

  • ClipPathCustom clipping paths are easy for drawing regular shapes, although some complex ones may require some knowledge of Bezier curves.
  • CustomPaintandCanvasUse:CustomPaint 和 CanvasYou can draw as much as you like, including if you want to play a little game. But this is the tricky part, because at the end of the day, math really matters!
  • Computer Graphics (CG) : this is the theoretical support of graphics, with computer graphics knowledge support, will let you draw custom graphics handy.

Local data store

As networks upgrade, local data storage may not be as important as before. However, it is essential both to the user experience and to relieve back-end stress. Wechat, for example, stores an entire person’s chat history locally – saving server storage space and load requests, while being able to claim to “protect personal privacy.” There are three main aspects of local storage:

  • Storage of simple key-value pairs: Stores configuration information and login session information, avoiding repeated retrieval from the server. The Flutter is usually usedSharedPreferencesThe implementation.
  • File storage: Such as in-app download file management, log files, etc., can use file management to achieve. It’s usually usedpath_providerPlug-in implementation.
  • Relational database: Most mobile terminals use SQLite database. SQLite database operation syntax is basically consistent with standard SQL such as MySQL, which can be used to store relational data. There are also several packaged plug-ins for Flutter, such as SQflite.

The page navigation

In fact, page navigation is needed from the start, and in most cases, built-in navigation and route management will suffice. Routes can be advanced as follows:

  • Master built-in routes: anonymous routes, named routes, route transmission parameters, route interception, etc.
  • Application of routing plug-ins: understand the advantages and disadvantages of routing management such as Fluro and GetX, and choose to use their own routing management or third-party plug-ins.
  • 2.0 routing: if this is on the Web side, it is recommended to know about it. The App side feels a little heavy, and the learning cost is relatively high. Of course, since it just came out for a short time, it is estimated that there will be easy to use plug-ins to help us use.

Their own plugin

If your company has many lines of business, you may be asked to build infrastructure if you are already the king of the company, or if you want to contribute to the open source community, build your own plug-ins or open source plug-ins. Flutter provides a plug-in build template project that allows you to build your own plug-ins step by step and then make them available to all lines of business throughout the company to increase their productivity.

Native interaction

Native interaction is divided into three parts:

  • Flutter provides a service for native
  • Flutter uses the interface provided by native
  • Jump between native page and Flutter page

This is essential for a hybrid app, where your body of knowledge needs to be upgraded. You need to learn Kotlin development for Android and Swift development for iOS. Of course, by this stage, it’s not hard to believe!

Application of release

Congratulations to you! Your app is now available in every major app market! I remember how excited I was when my first app was approved by the AppStore (rejected several times 😂😂😂)! How to package an app is easy to do with a quick search, but navigating the AppStore’s review rules, which change every year, can be a battle of wits. Android, however, can be a headache if you’re dealing with a fragmented distribution of operating systems. You are advised to collect application statistics and report exceptions in advance to avoid strange problems on user machines after release.

subsequent

Technology never ends, and later on, you’ll dive into performance optimization, application architecture design. These aspects are largely based on personal accumulation. Inputting new knowledge and understanding other application frameworks and features (not limited to Dart, such as Java’s Spring framework, React and Vue on the Web) will give you a new understanding of the current application architecture design. Expand your vision and technical depth, and you may be the next CTO to be 💪🏻💪🏻 port!!

[Nuggets official Comment Raffle] Fellow Flutter developers, why did you choose Flutter? Welcome to comment section exchange oh!

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder.

👍🏻 : feel the harvest please point a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!