【Flutter】プロジェクトを作成してアプリを起動してみよう

Flutterのプロジェクトを作成する

Flutterが取り込まれていれば、以下のようにファイル追加する際に「New Flutter Project」が表示されるので、それを選択する。

新しいプロジェクトを立ち上げたら「Flutter」を選択。
Flutter SDK pathはこちらでダウンロードしたSDKのディレクトリの場所を設定する。

次にプロジェクトの設定をしよう。

いくつか設定していこう。
設定したらcreateボタンを押下しよう。

項目名	内容
Project name	これはその通りプロジェクト名。命名の規則として、英字の大文字は使えない
Description	アプリの概要の説明。今後エラーが発生するリスクもあるので日本語は使わない方がいい。
Organization	団体名。これは自分のドメインを右から書いていったものを記入すると言う暗黙のルールがある。（そういなければならないと言うことではない）

そうすると、自動的に以下のようなディレクトリの構成でプロジェクトが作成される。

そして、実行してみよう。
そうすると、以下のようにデフォルトで記載されているアプリが起動する。

ソースコード

Main部分（アプリ起動時に最初に必ず呼び出されるもの）

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        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.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

詳細

では、一つ一つ見ていこう。

Main関数

Main関数はアプリ起動時に必ず呼ばれるメソッド。
ここは頻繁に処理を実装する箇所ではない。
アプリの画面を表示するためのクラスを呼び出すために存在する。

デフォルトでは、MyAppクラスの画面を表示して起動するようになっている。

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

MyAppクラス

以下では画面のルート部分。つまり、この部分でアプリ全体のテーマやナビゲーションなどの設定ができる。

Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

MyHomePageクラス

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

MyHomePageStateクラス

今回の画面表示のメインとなる部分になる。

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        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.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Scaffold

Scaffoldは以下の部分の実装ができる。

UI部品	内容
AppBar	画面上部に表示するタイトルやアイコンなど
BottomNavigationBar	画面の下部に表示するメニューボタンなど
Drawer	ドロワーメニュー。必要時に左もしくは右側から表示されるメニュー領域
BottomSheet	画面下部から必要時に表示される領域
SnackBar	画面下部などに表示する通知表示領域
FloatingActionButton	画面下部などに表示するショートカットボタン

今回のに当てはめると、AppBarは画面上部のナビゲーション部分の文字列や色を設定している。
bodyは画面の表示内容、FloatingActionButtonは「プラスボタン」が該当する。

Body

Centerは画面の中央にUIを設置するようにするためのもの。

Columnを使用しているが、これは「childrenに設定されているUIを上から順番に並べる」というもの。（ちなみに、左から順番に並べる場合は「Row」を使用する。）
今回の場合だと、上から順に文字列「’You have pushed the button this many times:’」、ボタンを押した回数の文字列と表示している。

MainAxisAlignment.centerで並べる際に中央から設置していく。（並べる際に開始に寄せて並べる場合はMainAxisAlignment.start、終了位置に寄せて並べる場合はMainAxisAlignment.endを設定する。）

floatingActionButtonは右下に固定しているボタンのこと。
onPressedはボタンを押したときに行われる処理。
つまり、以下が呼ばれる

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

setStateは状態が変化したときに再描画を行うようにする。
_counterの値が変わることで以下の部分にも変化が起きる。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    const Text(
      'You have pushed the button this many times:',
    ),
    Text(
      '$_counter',
      style: Theme.of(context).textTheme.headlineMedium,
    ),
  ],
)

$_counterが_counterの内容になっているため、ボタンを押下すると表示している数字が変わる。
また、「$」は文字列の中に変数の値を表示する際に必要なもの。

その他の必要なものは随時別ページで追加していく予定。

参考ページ

CodeZine「FlutterのUIウィジェットを理解するための基本を知ろう！」
Qiita「Flutter: MainAxisAlignmentを理解する」
Zenn「【Flutter】 setState() とは何か」

目次