【Flutter】Hello Worldでmain.dartの基本構成をみる

Flutterの「Hello World」でmain.dartの基本構成をみていきます。

【Flutterとは】開発環境構築

Flutterでは、Hello Worldアプリとして、インストール直後に以下のような[+]ボタンをクリックすると数値が増えていくカウントアップアプリが用意されています。

今回はこれを例に「main.dart」の基本構成について紹介します。

【カウントアップアプリ】サンプルコードと解説

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// アプリケーションのルートを設定するウィジェット
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // アプリケーションのテーマ
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// アプリのホームページ
class MyHomePage extends StatefulWidget {

  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      // レイアウトウィジェット(単一の子を受け取り、それを親の真ん中に配置)
      body: Center(
        // // レイアウトウィジェット(子のリストを縦に並べて配置)
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // 末尾のカンマでビルドメソッドの自動フォーマットを改善
    );
  }
} 
概要
class MyApp 「flutter run」でアプリケーションを実行します。アプリケーションに青いツールバーが表示されたら、アプリケーションを終了せず、primarySwatchを「Colors.green」に変更し、「hot reload」を呼び出します。「flutter run」を実行したコンソール、またはFlutter IDEで[hot reload]への変更を保存します。カウンタがゼロにリセットされず、アプリケーションが再起動されないことに注意します。
class MyHomePage これはあなたのアプリケーションのホームページであり、ステートフルであり、外観に影響するフィールドを含むStateオブジェクト(下記に定義)があります。これは、親(この場合はAppウィジェット)によって提供され、Stateのbuildメソッドによって使用される値(この場合はtitle)を保持しますWidgetサブクラスのフィールドは常に「Final」マークされています
class _MyHomePageState setStateの呼び出しは、この状態で何かが変更されたことをFlutterフレームワークに伝えます。これにより、表示が更新された値を反映できるように以下のビルドメソッドが再実行されます。
Widget build setStateが呼び出されるたびに再実行されます。Flutterフレームワークはビルドメソッドの再実行を高速化するように最適化されているので、ウィジェットのインスタンスを個別に変更する必要はなく、更新が必要なものはすべて再構築できます。
return Scaffold App.buildメソッドによって作成されたMyHomePageオブジェクトから値を取得し、それを使ってappbarのタイトルを設定します。
body: Center Centerはレイアウトウィジェットで、単一の子を受け取り、それを親の真ん中に配置します。
child: Column Columnはレイアウトウィジェットでもあり、子のリストを縦に並べて配置しますデフォルトでは、子を横に合わせて縦に並べられ、親と同じ高さになります。各ウィジェットのワイヤーフレームを確認するには、 “debug painting”を呼び出します。Columnには、それ自体のサイズや子の位置を制御するためのさまざまなプロパティがあります。ここではmainAxisAlignmentを使用して子を垂直方向に中央揃えしています;列が垂直であるため(クロス軸は水平になるため)、ここでの主軸は垂直軸です。
関連記事
1 【Flutter入門】iOS、Android、Windowsアプリ開発
flutter
技術雑記

コメント

  1. 松本圭司 より:

    バージョンの問題かも知れませんが、
    class _MyHomePageState extends State {
    としないと
    title: Text(widget.title),
    のtitleが定義されていないとエラーになりました。

タイトルとURLをコピーしました