Chapter 07無料公開

 05.HelloWorld

kazutxt
kazutxt
2023.04.15に更新

Flutterには、プロジェクトの新規作成を行うと自動でセットアップされるカウンタアプリがあります。このアプリを使って、エミュレータでの動作確認の方法とHelloWorldの文字列を出力させる方法を解説します。

プロジェクトの新規作成

プロジェクトの新規作成は、VSCodeのコマンドパレットからフォルダとプロジェクト名を指定するだけで簡単に行えます。

まず、VSCodeを起動します。

メニューバーの「表示」>「コマンドパレット」を選択します。

コマンドパレットに「flutter」と入力し「Flutter:New Project」を選択します。

「Application」を選択します。

プロジェクトを配置するフォルダを指定します。

プロジェクト名を入力します。今回は「helloworld」と入力しEnterキーで決定します。

初期化処理が自動で行われるので、処理終了後に、プロジェクトの作成が完了したことを確認します。

カウンタアプリの起動

続いて、作成されたプロジェクトを実行してみます。
ひとまず、修正は加えずにそのまま動かします。

メニューバーの「実行」>「デバッグの開始」を選択します。

デスクトップアプリが起動し、右下の「+」ボタンをクリックするたびにカウントが増えていくのが確認できます。

2回クリックすると下図のようになります。

おめでとうございます! 初めてのFlutterアプリが出来上がりました。

なお、デスクトップアプリの停止(デバッグの停止)は、以下のような方法で行います。
・メニューバーの「実行」>「デバッグの停止」を選択する。
・デバッグ中に表示されるメニューの停止アイコンをクリックする(下図)。
・デスクトップアプリの「☓」ボタンをクリックする。

HelloWorld

続いて、プログラマの慣例に倣いHelloWorldをターミナルに出力させてみます。
「lib」フォルダの下に「main.dart」というソースファイルがあります。その中に_incrementCounterというメソッドがありますので、下記のように_count++;の下にprint("HelloWorld");を入れます。

lib/main.dart
void _incrementCounter() {
  setState(() {
    // This call to setState tells the Flutter framework that something has
    // changed in this State, which causes it to rerun the build method below
    // so that the display can reflect the updated values. If we changed
    // _counter without calling setState(), then the build method would not be
    // called again, and so nothing would appear to happen.
    _counter++;
+   print("HelloWorld");
  });
}

保存をするだけで即時反映されますので、再び「+」ボタンをクリックしてみます。
カウンタがインクリメントされると同時に、ターミナルに「HelloWorld」が出力されるようになりました。

プログラムの基本構成

このHelloWorld(カウンタアプリ)のプログラムには、どのようなことが記載されているのかを解説します。
詳細は本書を読んでいけば自然と理解できますので、ここではざっくりとしたイメージをつかんで頂くだけで大丈夫です。
State/StatefulWidget/buildなどの説明していないキーワードがいくつか登場しますが、こちらはChapter2以降で詳しく説明しますので、ひとまず細部は気にしないでください。
プログラムの基本的な構成は下記のようになります。

  1. 「main.dart」ファイルのmain関数がエントリーポイントとなり、ここからプログラムが始まります。
  2. main関数は非常にシンプルで、MyAppを呼び出します。
  3. MyAppはMaterialAppという外枠の構築を行います。画面の中身の部分はMyHomePageを呼び出して作っています。
  4. MyHomePageでは、アプリバー/テキスト/ボタンなどを作ります。
  5. ボタンが押された時のイベントとして_incrementCounterを作り、この中でカウンタのインクリメントとHelloWorldの出力を行っています。

デフォルトで入っているコメント文を削除し、上記の構成に関するコメントを新たに追加したものを掲載します。

lib/main.dart
import 'package:flutter/material.dart';

// 1. エントリーポイントのmain関数
void main() {
  // 2. MyAppを呼び出す
  runApp(const MyApp());
}

// MyAppのクラス
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    // 3. タイトルとテーマを設定する。画面の本体はMyHomePageで作る。
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  // 5. カウンタが押された時のメソッド
  void _incrementCounter() {
    setState(() {
      _counter++;
      print("HelloWorld");
    });
  }

  
  Widget build(BuildContext context) {
    // 4. MyHomePageの画面を構築する部分
    return Scaffold(
      // 画面上部のタイトル部分
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 画面の中央に表示されるテキスト
            const Text(
              'You have pushed the button this many times:',
            ),
            // テキストの下に表示されるカウンタ値
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      // 右下の「+」ボタンに対応するフローティングアクションボタン
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}