Flutterの理解を深める - わかりにくい理由

Flutterの使い方をいろいろ調べてもなんだかわかりにくいですね。

わかりにくい理由はいろいろ使い方の説明をしてあるけど、書き方がいろいろ、表現がいろいろあるからです。

例えば、

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

こんな書き方

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

この場合はMyApp()を別で書いて読み込ませます。

または

void main() {
  runApp(
    MaterialApp(
      title: 'Passing Data',
      home: TodosScreen(
        todos: List.generate(
          20,
          (i) => Todo(
            'Todo $i',
            'A description of what needs to be done for Todo $i',
          ),
        ),
      ),
    ),
  );
}

という感じでMyApp()の中身も全部書いてしまう場合。

などどれでも良いのですが、わかってくれば特に問題ないかもしれませんが、ちょっとややこしいような気がします。最初は?がつくと思います。

頭の中の整理が必要です。

基本は

Building user interfaces with Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

この基本構造にwidgetを読み込ませて使います。

サンプルでよく見かけるものとして

import 'package:flutter/material.dart';

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _increment,
          child: const Text('Increment'),
        ),
        const SizedBox(width: 16),
        Text('Count: $_counter'),
      ],
    );
  }
}

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Counter(),
        ),
      ),
    ),
  );
}

実行するとボタンを押せば真ん中に表示されている数字がカウントアップされるというものです。この基本構造は

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Counter(),
        ),
      ),
    ),
  );
}

の部分となります。他で作られたコードがここに集約され実行されます。どのアプリでもこの構造が基本となるのでここをしっかりと理解することが大事かなと思います。

別のところで読み込ませるほうがわかりやすいことが多いのでです。基本の構造さえ理解していれば迷うことはないと思いますが、少し触らないとわからなくなりがちです。