【初心者向け】Flutterでカウントアップアプリを作成しよう！

こんにちは、Flutterの世界へようこそ！今日は、Flutterで簡単なカウントアップアプリを作成する方法を学びましょう。このプロジェクトは初心者の方や、プログラミングが初めての小学生にも理解できるように、一歩一歩丁寧に解説していきます。さぁ、一緒に楽しくプログラミングを学んでいきましょう！

アイコン名を入力

・新規プロジェクトは起動できたけど、ボタンの使い方がわからない。
・ウィジェットについての理解ができていない。

こんな疑問に答えます。今回はFlutterのサンプルコードに対してボタンを追加して、機能を追加してみましょう。

解決できること

・ボタンのウィジェットの使用方法がわかる。
・記録した数値を画面に表示して更新することができるようになる。
・ウィジェットの理解が深まる。

では実際にやってみましょう。

Contents

はじめに
ステップバイステップ
1. 1. Flutterプロジェクトの作成
2. 2. カウントアップの基本コード
プログラムの構造の説明
Widgetの説明
まとめ

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円で受講できるチャンスです。エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

はじめに

Flutterは、Googleが開発したモバイルアプリ開発のためのオープンソースフレームワークです。一つのコードベースで、AndroidとiOSの両方のアプリを作成できるのが大きな特徴です。

今回は、ボタンをタップするたびに数値が1ずつ増えるシンプルなカウントアップアプリを作成します。このコードは前回の記事で紹介しているため、もし興味がありましたら下記記事をご参照ください。

さらに、「記録」ボタンと「最後に記録したカウントを表示」ボタンを追加して、アプリの機能を拡張してみましょう。

ステップバイステップ

1. Flutterプロジェクトの作成

まずは、Flutterの開発環境を設定して、新しいプロジェクトを作成します。これは、Flutterの公式ドキュメントや、インターネット上の様々なチュートリアルで詳しく解説されています。

Visual studio codeでCtrol + Shift + pを押すとコマンドパレットが開くので、新しいプロジェクトを作成します。この記事に詳しく書いています。

2. カウントアップの基本コード

以下は、カウントアップ機能を持つアプリの基本的なコードです。このコードをmain.dartファイルに貼り付けて、アプリの基盤を作りましょう。

libフォルダに保存されている“main.dart”ファイルを下記プログラムに書き換えてください。

import 'package:flutter/material.dart'; // Flutterのマテリアルデザインを使用するためのライブラリをインポート

void main() {
  runApp(MyApp()); // MyAppを起動
}

// StatefulWidgetを継承して、状態が変化するウィジェットを作成
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState(); // 状態を管理するクラスを指定
}

// _MyAppStateクラスで、アプリの状態を管理
class _MyAppState extends State<MyApp> {
  int _counter = 0; // カウントを保持する変数
  final List<int> _recordedCounts = []; // 記録されたカウントを保持するリスト

  // カウントアップの処理
  void _incrementCounter() {
    setState(() {
      _counter++; // カウントを1増やす
    });
  }

  // カウントを記録する処理
  void _recordCount() {
    setState(() {
      _recordedCounts.add(_counter); // 現在のカウントをリストに追加
    });
  }

  // 最後に記録されたカウントを表示する処理
  void _showLastRecordedCount() {
    if (_recordedCounts.isNotEmpty) { // リストが空でない場合
      setState(() {
        _counter = _recordedCounts.last; // 最後に記録されたカウントを現在のカウントにセット
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    // アプリのUIを構築
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Counter App'), // アプリのタイトル
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'), // テキスト表示
              Text(
                '$_counter', // 現在のカウントを表示
                style: Theme.of(context).textTheme.headlineMedium, // テキストのスタイルを指定
              ),
              ElevatedButton(
                onPressed: _recordCount, // ボタンが押された時の処理
                child: const Text('Record Count'), // ボタンのテキスト
              ),
              ElevatedButton(
                onPressed: _showLastRecordedCount, // ボタンが押された時の処理
                child: const Text('Show Last Recorded Count'), // ボタンのテキスト
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter, // ボタンが押された時の処理
          tooltip: 'Increment', // ツールチップを表示
          child: const Icon(Icons.add), // アイコンを表示
        ),
      ),
    );
  }
}

では実際に実行してみましょう。

まず、Emulatorを起動しましょう。Ctrl+Shift+pを押して、Flutter: Launch Emulatorを選択してEnter.

自分の環境の携帯が表示されたら、main.dartのRunを押します。

起動すると携帯に画面が表示されます。今回新たに追加した2つのボタンが設置されています。

では＋を押してカウントを5まで増やします。

この状態で、Record Countを選択します。これで5が記録されました。

さらに＋を教えて10までカウントを増やし、Show Last Recorded Countを押します。

すると、数字が記録されたいた5に変化します。

このようにボタンを追加して記録した数字で値を更新することができました。

これで新しい機能とボタンを簡単に追加することができました。では、コードの説明を行います。

プログラムの構造の説明

今回のプログラムはサンプルプログラムにボタンを2つ追加しています。

FlutterではWidgetという概念が重要になります。これらについて説明しいます。

StatefulWidget

StatefulWidgetはFlutterにおいて、状態が変化するウィジェットを作成するための基本的なクラスです。このクラスを使用することで、アプリ内でユーザーのインタラクションやデータの変更に応じてUIを動的に更新することが可能になります。

StatefulWidget自体は不変ですが、その状態を管理するためのStateオブジェクトを持っています。ウィジェットの状態（例えば、ユーザーによって変更されるデータ）はこのStateオブジェクト内に保持されます。ウィジェットの状態が変化すると（例えば、ユーザーが画面上のボタンをタップするなど）、Stateオブジェクトはその変化を反映してウィジェットを再構築（リビルド）します。

StatefulWidgetを使用する際は、少なくとも2つのクラスを定義する必要があります：

StatefulWidgetを継承したクラス：このクラスは、主にウィジェットの構成を定義します。このクラスからcreateStateメソッドを通じて、ウィジェットのStateオブジェクトが生成されます。
Stateを継承したクラス：実際の状態（データ）とウィジェットのUI（buildメソッドによって定義される）を管理します。状態が変化すると、このクラスのsetStateメソッドを呼び出してUIを更新します。

今回のプログラムで使われているMyAppと_MyAppStateのクラスがそれにあたります。

`MyApp`クラス

MyAppクラスはStatefulWidgetを継承しています。これはウィジェット自体の構成を定義する役割を持ち、フレームワークによって状態（State）の保持が必要であることを示しています。しかし、StatefulWidget自体は不変であり、実際の状態を持ちません。その代わりに、Stateオブジェクトを生成するためのcreateState()メソッドを提供します。

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

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

`_MyAppState`クラス

_MyAppStateクラスはState<MyApp>を継承しており、MyAppウィジェットの状態を保持し管理します。実際にウィジェットがどのように表示されるか（UI）、およびウィジェットの動作（例えば、ボタンを押したときの挙動など）を定義します。Stateクラスにはbuild()メソッドが含まれており、ウィジェットのUIを構築するためにフレームワークによって呼び出されます。

class _MyAppState extends State<MyApp> {
  // ここに状態を定義（例: カウンターの値）

  @override
  Widget build(BuildContext context) {
    // ここでウィジェットのUIを構築
  }
}

`build()`メソッド

build()メソッドは、ウィジェットの見た目を記述するために使用されます。このメソッドは、Stateオブジェクトが持つ情報（状態）に基づいてウィジェットツリーを構築し、フレームワークによってウィジェットの描画が必要になるたび（例えば、状態が変化したときや、画面の再描画が必要になったときなど）に呼び出されます。build()メソッドは、BuildContextオブジェクトを引数に取り、Widgetを返します。このメソッド内で定義されたUIがアプリに表示される内容になります。

@override
Widget build(BuildContext context) {
  return Scaffold(
    // ここでScaffoldウィジェットを使ってUIを構築
  );
}

StatefulWidgetとそのStateクラス、そしてbuild()メソッドの関係を理解することは、Flutterで動的なアプリを構築する上で非常に重要です。これにより、アプリの見た目とその挙動を柔軟に制御することができます。

Widgetの説明

Flutterにおけるウィジェットは、アプリのUIを構成する基本的なビルディングブロックです。すべてのUI部品（テキスト、ボタン、画像、レイアウトなど）はウィジェットとして表現されます。ウィジェットは、特定の視覚的要素を描画するだけでなく、インタラクションやレイアウト調整などの役割も持ちます。FlutterアプリのUIは、このようなウィジェットの階層（ツリー）によって構築されます。

Textウィジェット

Textウィジェットは、画面上にテキストを表示するためのシンプルなウィジェットです。テキストの内容、スタイル（フォントサイズ、色、フォントウェイトなど）、テキストを配置する方法（中央揃え、左揃え、右揃え）をカスタマイズすることができます。

例えば下記内容をbuildのbodyに追加します。

const Text(
  'Hello, Flutter!', // 表示したいテキスト
  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.blue), // テキストのスタイルを定義
  textAlign: TextAlign.center, // テキストを中央揃えにする
)

追加されました。

ElevatedButtonウィジェット

ElevatedButtonウィジェットは、マテリアルデザインに基づいた標準的なボタンウィジェットです。押下時に影が表示されることで、ボタンが持ち上がる（浮かび上がる）ように見えることが特徴です。ボタンのラベル（テキストやアイコンなど）、押下時の動作、スタイルをカスタマイズすることができます。

ElevatedButton(
  onPressed: () {
    // ボタンが押された時の動作を定義
  },
  child: Text('Click Me'), // ボタンのラベル
  style: ElevatedButton.styleFrom(primary: Colors.blue), // ボタンの背景色を青に設定
)

FloatingActionButtonウィジェット

FloatingActionButton（FAB）は、画面上に浮かぶように表示される丸いボタンで、主にアプリのメインアクション（例えば、新しい投稿を作成するなど）を促すのに使用されます。FABはScaffoldウィジェットのfloatingActionButtonプロパティに配置することで、画面の下部に配置されます。

FloatingActionButton(
  onPressed: () {
    // ボタンが押された時の動作を定義
  },
  tooltip: 'Increment', // ユーザーが長押しした時に表示されるツールチップ
  child: Icon(Icons.add), // アイコンを表示。ここでは、追加（プラス）アイコンを使用
)

こういう画面が表示できます。

これらのウィジェットを組み合わせることで、テキスト表示、ユーザーのアクションに応じたインタラクション、アプリの主要なアクションの呼び出しなど、豊富なUIを構築することができます。ウィジェットは非常に柔軟性が高く、さまざまなプロパティを通じて細かいカスタマイズが可能です。

まとめ

Flutterでカウントアップアプリを作成する方法を学びました。さらに、ボタンを追加してカウントを記録し、最後に記録したカウントを表示する機能を実装することで、アプリをより便利にしました。プログラミングは、一歩一歩学ぶことで、徐々に複雑なアプリを作成できるようになります。今回学んだことを基に、さらに多くの機能を追加して、自分だけのオリジナルアプリを作ってみましょう！