preface
Up to now, Bytedance has implemented a number of Flutter technology solutions, including More than 20 businesses including Toutiao, Watermelon Video, and Manpi Shrimp. There are both pure Flutter projects and hybrid Flutter and Native projects.
Bytedance selects the initial heart of a Flutter
Flutter is not so much a big front-end technology as a big mobile technology. The Roadmap for Flutter is to fully support Android/iOS capabilities first, and further improve Web capabilities.
Bytedance attaches great importance to client technology. Bytedance has many client engineers. In the past, the basic technology of client in-depth is mainly plug-in, hot repair, performance optimization, security reinforcement, etc., and the cross-platform direction has always been promoted by front-end engineers, which is a big front-end direction. Flutter is a more client-led cross-platform technology solution.
In bytes to beat, cross-platform technology did not form large-scale ground, no historical burden, so in the face of cross-platform technology selection, to focus on the technical limit and cross-platform technology development potential, the rendering technique of Flutter can be understood as more completely pure cross-platform technology, along with rival native fluency, This is why we choose Flutter.
Now more and more businesses and teams start to try Flutter technology stack. As a developer, it is very necessary to master the use of Flutter, especially companies like Alibaba and Tencent, which are widely used by Flutter. Then how can we achieve the degree of “mastery” of Flutter? Let’s talk about it today.
A brief introduction to the advanced Notes on Flutter technology. Each chapter has an in-depth analysis of the underlying source code available in the PDF. In order to let you better learn Flutter technology, I also showed it to you for the first time!
Note content is free to share, if you need a complete version of notes [click on me] for free!
Chapter 1 Why Flutter is the ultimate cross-platform development choice
Cross-platform development is one of the most popular and widely used frameworks today. There are also a bewildering variety of frameworks available for cross-platform development.
Some of the most popular cross-platform frameworks are Xamarin, PhoneGap, Ionic, Titanium, Monaca, Sencha, jQuery Mobile, React Native, Flutter, and many more. But the performance of these tools varies.
Many of these popular frameworks have also been lost to history and gradually forgotten. But the React Native and Flutter frameworks remain strong and popular.
They are backed by the biggest tech giants, Facebook and Google.
Chapter 2 builds the Flutter development environment on Windows
- Using a mirror
- System requirements
- Access to Flutter the SDK
- Editor Settings
- The Android Settings
- Get started: Configure the editor
- Getting started: Experience
- Experience thermal overload
Note content is free to share, if you need a complete version of notes [click on me] for free!
Chapter 3: Writing your first Flutter App
Step 1: Create the Flutter app
To create a simple template-based Flutter application, follow the steps in the instructions for creating your first Flutter application and name the project Startup_namer (not MyApp). Then you will modify the application to complete the final APP.
In this example, you will mainly edit the lib/main.dart file where the Dart code resides,
Tip: Indentation may distort when pasting code into an application. You can fix this problem automatically using the Flutter tool:
Android Studio/IntelliJ IDEA: Right click on the Dart Code and select Reformat Code with DarTFmt.
VS Code: Right-click and select Format Document.
Terminal: Run the flutter format.
Dart. Delete all the code in lib/main.dart and replace it with the following code, which will show “Hello World” in the center of the screen.
import'package:flutter/material.dart';
voidmain()=>runApp(newMyApp());
classMyAppextendsStatelessWidget{
@override
Widgetbuild(BuildContextcontext){
returnnewMaterialApp(
title:'Welcome to Flutter',
home:newScaffold(
appBar:newAppBar(
title:newText('Welcome to Flutter'),
),
body:newCenter(
child:newText('Hello World'),
),
),
);
}}
Copy the code2. Run the application and you should see the following screen.
Analysis of the
This example creates a Material APP. Material is a standard visual design language for mobile and Web. Flutter provides a rich set of Material Widgets.
The main function uses the (=>) notation, which is shorthand for single-line functions or methods in Dart.
The application inherits the StatelessWidget, which makes the application itself a widget. Most things in Flutter are widgets, including alignment, padding and layout.
Scaffold is a widget provided in the Material Library that provides the default navigation bar, title, and body property containing the widget tree on the main screen. Widget trees can be complex.
The main job of a widget is to provide a build() method that describes how to display itself against other lower-level widgets.
In this example, the Body widget tree contains a Center widget, which in turn contains a Text child widget. The Center Widget can place its child Widget tree into the Center of the screen.
Step 2: Use external packages
In this step, you’ll start using an open source package called English_words, which contains thousands of the most commonly used English words and some useful features.
You can find the English_Words package at pub.dartlang.org as well as many other open source packages
1. Pubspec files manage assets(such as images, packages, etc.) of the Flutter application. In pubspec.yaml, add english_words (3.1.0 or later) to the dependency list, as highlighted in the line below:
"> < span style =" font-size: 14px; line-height: 20pxCopy the code2. While viewing PubSpec in the Android Studio editor view, click the Packages Get in the upper right corner, which will install the dependency Packages into your project. You can see the following in the console:
flutter packages get
Running "flutter packages get"in startup_namer...
Process finished with exit code 0
Copy the code3. In lib/main.dart, introduce english_words, as shown in the highlighted line:
import'package:flutter/material.dart'; import'package:english_words/english_words.dart';Copy the codeAs you type, Android Studio provides you with suggestions for library imports. It then renders a gray import string to let you know that the imported library is not used (yet)
4. Use the English Words package to generate text to replace the string “Hello World”.
Tip: “Camel nomenclature” (called “upper Camel case” or “Pascal case”) means that every word in the string (including the first word) begins with a capital letter. So, “upperCamelCase” becomes “upperCamelCase” with the following changes, as highlighted:
import'package:flutter/material.dart'; import'package:english_words/english_words.dart'; voidmain()=>runApp(newMyApp()); classMyAppextendsStatelessWidget{ @override Widget build(BuildContext context){ final wordPair =new WordPair.random(); returnnewMaterialApp( title:'Welcome to Flutter', home:newScaffold( appBar:newAppBar( title:newText('Welcome to Flutter'), ), body:newCenter( //child: new Text('Hello World'), child:newText(wordPair.asPascalCase), ), ), ); }}Copy the code5. If the application is running, use the hot reload button to create a new running application. Each time you click hot reload or save an item, a different pair of words is randomly selected in the running application. This is because word pairs are generated within the build method. Build runs every time the MaterialApp needs to render or switch platforms in the Flutter Inspector.
Have a problem?
If your application is not working properly, look for spelling errors. If necessary, use the code in the link below to compare the corrections.
· pubspec.yaml (The pubspec.yaml file won’t change again.)
Lib/main dart
Step 3: Add a Stateful Widget
Step 4: Create an infinite scrolling ListView
Step 5: Add interactions
Step 6: Navigate to a new page
Step 7: Change the UI using the theme
Note content is free to share, if you need a complete version of notes [click on me] for free!
Chapter 4 Setup and debugging of Flutter development environment
- Installation and debugging of the simulator
- Setup of development environment
Chapter 5 basic Grammar for Dart
1.Hello Dart 2. Data types 3. Set (List, Set, Map) 5. Flow control 6. Operator 7. function
Chapter 6: Use of the Dart Syntax set and Source Code Parsing (II)
List 2.Set 3.Map 4.Queue 5.LinkedList 6. Naming the difference between the constructors from and of and suggestions for using them
Note content is free to share, if you need a complete version of notes [click on me] for free!
Chapter 7 collection Operator Functions and Source Code Analysis for Dart Syntax
This section covers more practical functions that can definitely improve the efficiency of your Flutter development. These are the commonly used Flutter operator functions in collections. This time said the content of the more simple is how to use, and how to achieve the source code.
Iterable 2.forEach usage and source code analysis 3. Map usage and source code analysis 4. Any usage and source code analysis 5
Chapter 8 use of Functions in Dart Syntax (IV)
1. Function parameters
2. Anonymous functions (closures, lambda)
3. Arrow function
4. Local functions
5. Top-level and static functions
6. The main function
Function object
Chapter 9: Object-oriented Basics for Dart Syntax (5)
1. Accessor function setters and getters
2. Variables in object-oriented
constructor
4. Abstract methods, classes, and interfaces
5. Class functions
Note content is free to share, if you need a complete version of notes [click on me] for free!
Chapter 10 object-oriented Inheritance and Mixins in Dart Syntax (6)
In this chapter we continue to explore the focus and difficulty of object orientation in Dart (inheritance and mixins). Mixins are features that are not found in many languages.
This article covers common inheritance in Dart, the form of multiple inheritance in mixins (which is not really multiple inheritance), linearization analysis of mixins, mixins types, and usage scenarios.
Dart Syntax: Type System and Generics (7)
1. Optional type
2. Interface type
3. The generic
4. Specify the type
Chapter 12 Widgets in Flutter
1.Flutter Page – Base Widget 2.Widget 3.StatelessWidget 4.State Lifecycle 5. Based on the widget
Note content is free to share, if you need a complete version of notes [click on me] for free!
The last
At this stage, attempts to explore and accumulate precipitation Flutter technology capabilities and business applications using Flutter technology will be strategically ahead.
The choice of Flutter can be described as “advance can attack, retreat can defend”. Further forward, Flutter application can seamlessly migrate to Fuchsia system in the future, and expand to a wider range of user scenarios by borrowing the energy of Fuchsia system. Taking a step back, Flutter technology itself performs well on Android/iOS compared to other cross-platform technologies.
As the technology evolves, so does the platform itself. In the future, Flutter will evolve towards multi-terminal integration, supporting more terminals (including tablets, laptops, smart devices, etc.).
As a cross-platform UI framework with a self-rendering solution, Flutter is a high level of cross-platform technology, but it needs to improve its engineering capabilities and ecosystem in order to attract more developers.