Last year, 2019 was undoubtedly a banner year for Flutter technology.
Every mobile developer has been fascinated by the features and ideas that Flutter brings with it: “rapid development, expressive and flexible UI, native performance”, from superapps to standalone apps, from pure Flutter to hybrid stacks, Developers have been exploring and applying Flutter technology in a variety of scenarios and are facing a variety of challenges.
More and more businesses and teams in Alibaba Group have begun to try Flutter technology stack. From a unique trend leading by Xianyu, now BU businesses such as Taobao Special Edition, Hema, Youku and Feizu have entered the market one after another, and the business application of Flutter has gradually formed a trend in the group.
I was lucky to get a strong promotion of “Flutter advanced Study Notes” produced by Alibaba from a friend. Adhering to the principle that good things should be shared, I will show you today to see if this “Flutter advanced study notes” can also make you get twice the result with half the effort!
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
Advanced study notes are free to share, if necessary,Can I”Lot”Read the download
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
Stateless widgets are immutable, which means their properties cannot be changed – all values are final.
State owned by Stateful Widgets can change during the widget life cycle. Implementing a stateful Widget requires at least two classes:
1. A StatefulWidget class.
2. A State class. The StatefulWidget class itself is constant, but the State class is always present throughout the widget’s life cycle. In this step, you will add a stateful widget-RandomWords, which creates its State class RandomWordsState. The State class will ultimately maintain suggested and preferred word pairs for the widget.
1. Add a stateful RandomWords widget to main.dart. It can also be used anywhere in the file outside of MyApp, but this example puts it at the bottom of the file. The RandomWords Widget has little more than a State class
classRandomWordsextendsStatefulWidget{ @override createState()=>newRandomWordsState(); }Copy the code2. Add the RandomWordsState class. Most of the application’s code is in this class, which holds the state of the RandomWords Widget. This class will keep the generated word pairs that grow infinitely as the user scrolls, as well as favorite word pairs that the user adds or removes from the list by repeatedly clicking the heart-shaped ❤️ icon.
You will build this class step by step. First, create a minimum class by adding highlighted code
class RandomWordsState extends State<RandomWords>{}
Copy the code3. After adding a status class, the IDE will tell you that the class lacks a build method. Next, you’ll add a basic build method that generates word pairs by moving the code that generates them from MyApp to RandomWordsState.
Add the Build method to RandomWordState, as highlighted in the code below
classRandomWordsStateextendsState<RandomWords>{
@override
Widget build(BuildContext context){
final wordPair =new WordPair.random();
returnnew Text(wordPair.asPascalCase);
}}
Copy the code4. Move the code for generating word pairs from MyApp to RandomWordsState with the code highlighted below
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(wordPair.asPascalCase), child:newRandomWords(), ), ), ); }}Copy the codeRestart the application. If you try hot reloading, you might see a warning:
Reloading...
Not all changed program elements ran during view reassembly; consider
restarting.
Copy the codeThis could be a false positive, but considering a reboot ensures that your changes take effect in the application interface. The application should run as before, displaying a word pair each time the application is hot-loaded or saved.
If your application is not working properly, you can use the code in the link below to compare and correct it.
Lib/main dart
Step 4: Create an infinite scrolling ListView
In this step, you extend (inherit) the RandomWordsState class to generate and display a list of word pairs. As the user scrolls, the list displayed in the ListView grows indefinitely. ListView’s builder factory constructor allows you to build a lazy-loaded ListView on demand.
1. Add a _Suggestions list to the RandomWordsState class to hold the suggested word pairs. The variable begins with an underscore (_), and the use of the underscore prefix identifier in the Dart language forces it to be private.
Also, add a biggerFont variable to increase the font size
classRandomWordsStateextendsState<RandomWords>{ final _suggestions =<WordPair>[]; Final _biggerFont = constTextStyle (fontSize: 18.0); . }Copy the codeAdd a _buildSuggestions() function to the RandomWordsState class. This method builds a ListView that displays the suggested word pairs. The ListView class provides a Builder property. The itemBuilder value is an anonymous callback function that takes two arguments – BuildContext and line iterator I. The iterator starts at 0, and each time the function is called, I increments by one and is executed once for each suggested pair of words. This model allows the list of suggested word pairs to grow indefinitely as the user scrolls. Add the following highlighted line:
classRandomWordsStateextendsState<RandomWords>{ ... Widget _buildSuggestions(){returnNew ListView.builder(padding:const edgeinsets.all (16.0), // On even lines, the function adds a ListTile row to the word pair. // On odd lines, the function adds a splitter widget to separate adjacent word pairs. // Note that on a small screen, the splitter line can look a bit labored. ItemBuilder :(context, I){// before each column, add a 1 pixel high Divider widget if(i.iso)returnnew Divider(); // The syntax "I ~/ 2" means I divided by 2, but the return value is integer (rounded down), such as I: 1, 2, 3, 4, 5 // = 0, 1, 1, 2, 2. Final index = I ~/2; If (index >= _suggestion.length){//... It then regenerates 10 word pairs and adds them to the suggestion list _suggestion.addall (generateWordPairs().take(10)); } return_buildRow(_suggestions[index]); }); }}Copy the code3. _buildSuggestions calls _buildRow once for each word pair. This function displays each new word pair in the ListTile, which allows you to generate a prettier display line in the next step. Add a _buildRow function to the RandomWordsState:
classRandomWordsStateextendsState<RandomWords>{ ... Widget _buildRow(WordPair pair){ returnnew ListTile( title:new Text( pair.asPascalCase, style: _biggerFont, ), ); }} 4. Update the Build method with RandomWordsState to use _buildSuggestions() instead of calling the word generator library directly. Changes such as the following highlighted part: classRandomWordsStateextendsState < RandomWords > {... @override Widget build(BuildContext context){ final wordPair =new WordPair.random(); // Delete the two lines returnNew Text(wordpair.aspascalCase); returnnew Scaffold ( appBar:new AppBar( title:new Text('Startup Name Generator'), ), body:_buildSuggestions(), ); }... } \Copy the code5. Update MyApp’s build method. Remove the Scaffold and AppBar instance from MyApp. These will be managed by RandomWordsState, which makes it easier for users to change the route name in the navigation bar as they navigate from one screen to another in the next step. Replace the original build method with the following highlights:
classMyAppextendsStatelessWidget{
@override
Widget build(BuildContext context){
returnnew MaterialApp(
title:'Startup Name Generator',
home:new RandomWords(),
);
}}
Copy the codeRestart the application. You should see a list of word pairs. Scroll down as far as you can, and you’ll continue to see new word pairs.
Have a problem?
If your app doesn’t work, you can use the code in the link below to make corrections.
Lib/main dart
Step 5: Add interactions
In this step, you will add a clickable heart-shaped ❤️ icon for each row. When the user clicks on an item in the list to switch its “favorites” status, the word pair is added to or removed from the “favorites”.
1. Add a _saved Set(collection) to RandomWordsState. This collection stores pairs of words that the user likes (favorites). In this case, Set is better than List because duplicate values are not allowed in Set.
classRandomWordsStateextendsState<RandomWords>{ final _suggestions =<WordPair>[]; final _saved =new Set<WordPair>(); Final _biggerFont = constTextStyle (fontSize: 18.0); . }Copy the code2. Add alreadySaved to the _buildRow method to check that word pairs have not been added to favorites.
Widget _buildRow(WordPair pair){ final alreadySaved = _saved.contains(pair); . }Copy the code3. Also in _buildRow(), add a heart-shaped ❤️ icon to the ListTiles to enable favorites. Next, you can add interactive capabilities to the heart-shaped ❤️ icon. Add the following highlighted line:
Widget _buildRow(WordPair pair){ final alreadySaved = _saved.contains(pair); returnnewListTile( title:newText( pair.asPascalCase, style: _biggerFont, ), trailing:new Icon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Colors.red :null, ), ); }Copy the code4. Restart the application. You can now see the heart-shaped ❤️ icon ️ on each line, but they don’t interact yet. Make the heart-shaped ❤️ icon clickable in _buildRow. If the word entry has been added to the favorites, click it again to remove it from the favorites. When the heart-shaped ❤️ icon is clicked, the function call setState() notifies the frame that the state has changed. Add the following highlighted line:
Widget _buildRow(WordPair pair){ final alreadySaved = _saved.contains(pair); returnnewListTile( title:newText( pair.asPascalCase, style: _biggerFont, ), trailing:newIcon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Colors.red :null, ), onTap:(){ setState((){ if(alreadySaved){ _saved.remove(pair); }else{ _saved.add(pair); }}); }); }Copy the codeTip: In the reactive style framework of Flutter, calling setState() triggers the build() method for the State object, causing updates to the UI to reload your application. You can click on any line to bookmark or remove it. Note that clicking on a line generates an animation of water waves from the heart-shaped ❤️ icon.
Got a problem?
If your application is not working properly, check the code at the link below for a comparison correction.
Lib/main dart
Step 6: Navigate to a new page
In this step, you will add a new page that displays the contents of your favorites (called a route in Flutter). You will learn how to navigate between the main route and the new route (switch pages).
In Flutter, the navigator manages the application’s routing stack. Pushing a route onto the navigator’s stack displays a page updated to that route. Popping a route from the navigator’s stack displays a return to the previous route.
1. Add a list icon to the AppBar in the Build method of RandomWordsState. When the user clicks on the list icon, the new routing page with favorites is displayed on the stack.
Tip: Some widget properties require a single widget (child), while others, such as action, require a set of widgets(children), represented by square brackets [].
Add the icon and its corresponding action to the Build method:
classRandomWordsStateextendsState<RandomWords>{
...
@override
Widget build(BuildContext context){
returnnewScaffold(
appBar:newAppBar(
title:newText('Startup Name Generator'),
actions:<Widget>[
new IconButton(icon:new Icon(Icons.list), onPressed: _pushSaved),
],
),
body:_buildSuggestions(),
);
}
...}
Copy the code2. Add a _pushSaved() method to the RandomWordsState class.
classRandomWordsStateextendsState<RandomWords>{
...
void_pushSaved(){
}}
Copy the codeHot-reload the application, and the list icon will appear in the navigation bar. Now clicking on it doesn’t do anything, because _pushSaved is still empty.
3. When the user clicks the list icon in the navigation bar, create a route and push it into the navigation manager stack. This action switches the page to show the new route.
The content of the new page is built in the Builder property of the MaterialPageRoute, which is an anonymous function.
Add a navigator.push call that pushes the route onto the navigation manager’s stack.
void_pushSaved(){ Navigator.of(context).push( ); }Copy the code4. Add the MaterialPageRoute and builder. Now add the code that generates the ListTile row. ListTile’s divideTiles() method adds a 1-pixel dividing line between each ListTile. The divided variable holds the final list item.
void_pushSaved(){ Navigator.of(context).push( new MaterialPageRoute( builder:(context){ final tiles = _saved.map( (pair){ returnnew ListTile( title:new Text( pair.asPascalCase, style: _biggerFont, ), ); }); final divided = ListTile .divideTiles( context: context, tiles: tiles, ) .toList(); },),); }Copy the code5. The Builder returns a Scaffold containing the application bar for the new routing named “Saved Suggestions”. The body of the new route consists of the ListView containing the ListTiles row; Each line is separated by a dividing line. Add the code highlighted below:
void_pushSaved(){ Navigator.of(context).push( newMaterialPageRoute( builder:(context){ final tiles = _saved.map( (pair){ returnnewListTile( title:newText( pair.asPascalCase, style: _biggerFont, ), ); }); final divided = ListTile .divideTiles( context: context, tiles: tiles, ) .toList(); returnnew Scaffold( appBar:new AppBar( title:new Text('Saved Suggestions'), ), body:new ListView(children: divided), ); },),); }Copy the code5. Hot reload the application. Bookmark some options and click the list icon in the Application bar to display the favorites on the new routing page. Notice that the navigator adds a “Back” button to the app bar. You don’t have to explicitly implement navigator.pop. Click the back button to return to the home route.
Got a problem?
If your application does not work properly, refer to the code at the link below to compare and correct it.
Lib/main dart
Step 7: Change the UI using the theme
In this last step, you will use themes. Themes control the look and feel of your application. You can use the default theme, which depends on the physical device or emulator, or you can customize the theme to suit your brand.
1. You can easily change the theme of your application by configuring the ThemeData class. Your application is currently using the default theme, and you will now change the primary color color to white.
Change the theme of the application to white by highlighting some of the code as follows:
classMyAppextendsStatelessWidget{
@override
Widget build(BuildContext context){
returnnewMaterialApp(
title:'Startup Name Generator',
theme:new ThemeData(
primaryColor: Colors.white,
),
home:newRandomWords(),
);
}}
Copy the code2. Hot reload applications. Notice that the entire background will turn white, including the app bar.
3. As an exercise for readers, use ThemeData to change other aspects of the UI. The Colors class in the Material Library provides many color constants that you can use to quickly and easily experiment with hot overloading.
Got a problem?
If you run into problems, check out the final code for the application in the link below.
Lib/main dart
conclusion
Due to the limited space of this article, this note also covers the construction and debugging of the Flutter development environment, the use of the Dart syntax set and source code parsing, the Dart syntax set operator functions and source code analysis, and more.
