Last Updated on 2020-12-03 by Clay
Introduction
If you talk about Flutter, everyone will think of the following features:
- Programming language is Dart
- Developed by Google, the community is actively
- One set of code compilation for multiple platforms
I am currently studying. What I want to share today is a very convenient function in Flutter development: Hot Reload.
And then, we start!
Hot Reload
Hot Reload: If you changed your code and executed the program, you can see your program modified interface in real time.
No more time, no more compile.
This kind of function cannot be more convenient for debugging or adding new functions!
Below, through a section of the official Tutorial, let's try to see if Hot Reload is really so amazing!
First, we first import a classic Package to help us test, we open the pubspec.yaml under the project directory, in the following code:
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
And we add it:
english_words: ^3.1.0
Your version number may be different with me. The version number can be check here: https://pub.dev/packages/english_words
After filling in, the "Package get" option should appear above.
After clicking, you will start to get this Package. The function of this package is the same as the website above, including about 5000 common English words for us to call at will.
And we come back to main.dart to test our code.
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new MaterialApp(
title: 'Import packages test',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Import packages test'),
),
body: new Center(
child: new Text(wordPair.asPascalCase),
),
),
);
}
}
Output:
This is our simple program: a combination of two English vocabularies is directly displayed randomly on the central Widget.
Then the key point comes next.
We don't need to re-execute the code, after all, the two English words that appear each time are random. We only need to use
Ctrl + \(at least in my Intellij IDEA, I am not sure about other IDEs) to perform Hot Reload.
If you are not sure which shortcut key is, you can also directly click the icon:
You can perform Hot Reload.
Then something magical happened. We didn't need to recompile the code to get new results.
Performing hot reload…
Syncing files to device Android SDK built for x86…
Reloaded 0 of 526 libraries in 299ms.
Again.
Performing hot reload…<br>
Syncing files to device Android SDK built for x86…<br>
Reloaded 0 of 526 libraries in 150ms.
We can really see that the results are different every time!
Then let's test the last thing: whether we can really dynamically change the code to reflect the result of the change? We will first change the following line:
child: new Text(wordPair.asPascalCase),
to:
child: new Text(wordPair.asLowerCase),
And press Hot Reload button.
Output:
It really became lowercase directly!
Hot Reload can help us save a lot of time on the test program, it is really a great feature.