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

スポンサーリンク

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

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

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

Hot Reload ボタン

ホットリロードの使い方は2つあります。

  • 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

要約すると、ホットリロード機能は変更があったWidgetををビルドし直してUIに反映させる。よって、変更の無いプログラム(Widget)をビルドし直す必要がないので、瞬時にUIを更新できます。

>> 【Flutter】StatelessWidgetとStatefulWidgetの使い方|区別と仕組み

//動画のコード
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,
          ),
        )),
      ),
    );
  }
}
タイトルとURLをコピーしました