【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),
      ), // 末尾のカンマでビルドメソッドの自動フォーマットを改善
    );
  }
}