import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // このウィジェットは、アプリケーションのルートです。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // これがアプリケーションのテーマです。
        //
        // 「flutter run」でアプリケーションを実行してみてください。
        // アプリケーションに青いツールバーがあることがわかります。次に、アプリを
        // 終了せずに、下の primarySwatch を Colors.green に変更してから、
        // 「ホット リロード」を呼び出します（「flutter run」を実行したコンソールで
        // 「r」を押すか、単に変更を保存します）。
        // カウンターがゼロにリセットされていないことに注意してください。
        // アプリケーションは再起動されません。
        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);

  // このウィジェットは、アプリケーションのホームページです。
  // これはステートフルです。つまり、外観に影響を与えるフィールドを含む State オブジェクト
  // （以下で定義）を持っていることを意味します。

  // このクラスは、状態の構成です。
  // 親（この場合はアプリ ウィジェット）によって提供され、
  // State のビルド メソッドによって使用される値（この場合はタイトル）を保持します。 
  // Widget サブクラスのフィールドは常に「final」とマークされます。

  final String title;

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

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

  void _incrementCounter() {
    setState(() {
      // この setState の呼び出しは、Flutter フレームワークに、
      // この State で何かが変更されたことを伝えます。
      // これにより、以下のビルド メソッドが再実行され、更新された値が表示に反映されます。
      // setState() を呼び出さずに _counter を変更した場合、
      // build メソッドは再度呼び出されないため、何も起こらないように見えます。
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // このメソッドは、たとえば上記の _incrementCounter メソッドによって
    // 行われたように、setState が呼び出されるたびに再実行されます。
    //
    // Flutter フレームワークは、ビルド メソッドの再実行を高速化するように
    // 最適化されているため、ウィジェットのインスタンスを個別に変更するのではなく、
    // 更新が必要なものを再構築するだけで済みます。
    return Scaffold(
      appBar: AppBar(
        // ここでは、App.build メソッドによって作成された MyHomePage オブジェクトから
        // 値を取得し、それを使用して appbar のタイトルを設定します。
        title: Text(widget.title),
      ),
      body: Center(
        // Center はレイアウト ウィジェットです。
        // 1つの子を取得し、親の中央に配置します。
        child: Column(
          // 列もレイアウト ウィジェットです。
          // 子のリストを取り、それらを垂直に配置します。デフォルトでは、
          // 子を水平方向に合わせてサイズを変更し、親と同じ高さにしようとします。
          //
          // 「デバッグ ペインティング」を呼び出します（コンソールで「p」を押し、
          // Android Studio の Flutter Inspector から「Toggle Debug Paint」
          // アクションを選択するか、Visual Studio Code で「Toggle Debug Paint」
          // コマンドを選択します）、各ウィジェットのワイヤーフレームを表示します。
          //
          // Column には、それ自体のサイズ変更方法と子の配置方法を制御するための
          // さまざまなプロパティがあります。
          // ここでは mainAxisAlignment を使用して、子を垂直方向の中央に配置します。
          // ここでの主軸は垂直軸です。
          // これは、列が垂直であるためです（交差軸は水平になります）。
          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),
      ), // この末尾のコンマにより、ビルド メソッドの自動書式設定がより適切になります。
    );
  }
}