Skip to content

[Flutter] Hot Reload (熱重載) 功能介紹

Last Updated on 2021-05-17 by Clay

說到 Flutter，人們的第一印象恐怕普遍都是『啊 Google 開發的！』、『聽說 Dart 很好學呢！』、『可以雙平台一套程式碼就好哦！』—— 抱歉，我想這應該是軟體工程師們聚會才會聊的話題，沒有接觸程式設計（尤其是 App 開發）這一塊的大家可能並沒有聽過這個開發 App 的跨平台程式框架。

但聽說這個框架真的相當好用，我個人目前也在龜速學習中。今天，我想要簡單紀錄一下，關於 Hot Reload (熱重載) 這個方便的功能，也是大家用過 Flutter 之後覺得最棒的功能之一。

如果對於學習 Flutter 有興趣，可以參閱官方的 Tutorial: https://flutter.dev/docs/reference/tutorials

如果想要安裝 Flutter 的環境，可以參考我之前寫過的：《Flutter 學習心得筆記 (0) 下載 Intellij IDEA》。

那麼以下，就開始紀錄關於 Hot Reload 究竟是什麼吧！

Hot Reload

Hot Reload (大部分看見的翻譯都是『熱重載』)，是一個相信寫過程式的人都會覺得非常好用的功能：不用重新編譯程式碼，就可以實時看到你修改程式碼之後的畫面。

這種功能，對於 Debug 或是要加入新功能來講，簡直不能再方便了！

以下，就通過官方 Tutorial 的一段教學，來試試看 Hot Reload 是否真的這麼神奇吧！

首先，我們先 Import 一個經典的 Package 來幫助我們測試，我們開啟專案目錄底下的 pubspec.yaml，在以下這段程式碼：

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



底下加入：

  english_words: ^3.1.0



當然，你的版本號可能跟我的不一樣。版本號可以從這裡查看： https://pub.dev/packages/english_words

填好之後，上方應該會出現 "Package get" 的選項。

點擊之後便會開始取得這個 Package。這個 Package 的功能就跟上面的網站所說的一樣，包含了 5000 個左右的常用英語詞彙供我們任意調用。

完成之後，我們回到 main.dart 來開始撰寫我們測試的程式碼。

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:

這就是我們簡單的程式：在中央 Widget 上隨機直接呈現兩個英文詞彙的組合。

那麼接下來重點來了。

我們無須重新執行程式碼，畢竟每次出現的兩個英文詞彙是隨機的。我們只需要使用 Ctrl + \ (至少在我 Intellij IDEA 是這樣，其他 IDE 我不確定)，就可以進行 Hot Reload。

如果不確定快捷鍵是哪個，也可以直接點選圖示：

就可以進行 Hot Reload 了。

然後神奇的事情發生了，我們不用重新編譯程式碼，就能有新的結果。

Performing hot reload…

Syncing files to device Android SDK built for x86…

Reloaded 0 of 526 libraries in 299ms.

再 Hot Reload 一次。

Performing hot reload…

Syncing files to device Android SDK built for x86…

Reloaded 0 of 526 libraries in 150ms.

我們真的可以看到，每次的呈現結果都不一樣！

那我們來測試最後一件事情吧：是否我們真的動態更改程式碼，就能反應出改變的結果呢？我們首先將

child: new Text(wordPair.asPascalCase),



這行程式碼更改為：

child: new Text(wordPair.asLowerCase),



這一行，並按下 Hot Reload。

Output:

真的直接變成小寫了！

Hot Reload 可以幫助我們在測試程式上節省大量的時間，真的是非常棒的功能。

Tags:

Leave a Reply