Flutterの魅力の一つとしてホットリロードがよくあげられています。
しかし、正直Flutter初心者の私からしてみたらそれってどんな機能だと疑問に思ったので本記事では、Flutterのホットリロードを実際に行ってみます。
ホットリロードを使ってみる
まずは新規プロジェクトを作成して、main.dartの中身を以下のようにしておきます。
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF
home: Scaffold(
body: Center(child: Text("ホットリロードって何?")),
),
);
}
}
この状態でエミュレータを起動して実行ボタンを押下してみると、エミュレータでアプリが起動して以下のような画面が表示されます。
ここからホットリロードを試してみます。
アプリを実行したままの状態でmain.dartを以下のように書き換えてみましょう。
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF
home: Scaffold(
body: Center(child: Text("これがホットリロードだ!!")),
),
);
}
}
main.dartを保存後、エミュレータの画面を確認すると以下のようになっているはずです。
なんとアプリを再起動していないのに表示内容が変わっているという!!
ソースコードを書き換えるだけで、再実行しなくてもアプリの機能が変更されるのがホットリロードです!!
ホットリロードの利点
ホットリロードには以下の利点があります。
- ソースコードを変更後、すぐに動作確認ができる
- デザインだけ変更したい場合の確認が楽になる
まとめ
ホットリロードは微細な変更点を確認するときにすごく便利な機能です。
ホットリロードを有効活用して、スムーズな開発を行いましょう。