【Flutter】開発速度爆上げ!ホットリロード機能の使い方と仕組み

【Flutter】開発速度爆上げ!ホットリロード機能の使い方と仕組み
目次

ホットリロード機能とは?

ホットリロード機能とは、プログラムの変更を瞬時にoverride(上書き)し、UIに反映させる機能です。使っているデバイスにもよりますが、ホットリロードを使えば基本、数ミリ秒から数秒の間にUIを更新できます。

ホットリロード機能の使用方法

Hot-Reload-ボタン
ホットリロード機能の使い方
  • IDE上の、ホットリロードボタン(雷マーク)をクリック
  • ショートカットキー(Mac:command + \ , Windows:control + s)

ホットリロード機能の仕組み

Flutter公式ドキュメントではホットリロード機能について次のように記載されています。

Hot reload loads code changes into the VM and re-builds the widget tree, preserving the app state; it doesn’t rerun main() or initState().

引用元:Flutter

要約すると、ホットリロード機能は「main関数」や「initState関数」を再度実行する必要なく、変更があったコードだけをVM(Virtual Machine)やWidgetツリーでビルドし直セルので瞬時にUIを更新できます。

//動画のコード
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(
          title: Text('Flutter App'),
        ),
        body: Center(
            child: Text(
          'Hello World',
          style: TextStyle(
            fontSize: 30,
          ),
        )),
      ),
    );
  }
}

Flutterを学ぶなら「Udemy」または「侍エンジニア塾」

  • 独学でFlutterを学ぶなら「Udemy」
  • プログラミングスクールで学ぶなら「侍エンジニア塾」

Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。

独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。

よかったらシェアしてね!
目次
閉じる