Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@jin112343( jin mizoi)

Flutterの基礎をまとめてみた（３）

Posted at

Flutterのカウンターアプリについて

次は、Flutterで新しいプロジェクトを作ったときに自動で作られる「カウンターアプリ」について見ていきます。

カウンターアプリって何？

スクリーンショット 2024-11-07 14.50.40.jpg

カウンターアプリは、ボタンを押すたびに数字が増える、とてもシンプルなアプリです。Flutterを学ぶときに最初に見ることが多いアプリで、どんなふうにアプリが動くかを知るための良い例です。

例えば、このアプリでは画面の中央に大きな数字が表示されています。そして、その下にあるボタンをタップすると、数字が1つずつ増えていきます。こうすることで、Flutterの基本的な画面作りや、ボタンを押したときにどう動くかなどを学ぶことができます。

カウンターアプリの動き方

Flutterのカウンターアプリでは、ボタンを押すと以下のような動きが見られます：

  1. 画面の真ん中に「0」と書かれた大きな数字があります。
  2. 下のボタンを押すと、この数字が「1」、「2」、「3」…と増えていきます。
  3. この「数字が増える」動きによって、アプリのどこが変わったかを見ながらFlutterの仕組みを理解できます。

どうしてカウンターアプリなの？

カウンターアプリが最初に出てくる理由は、簡単に使えて動きがわかりやすいからです。ボタンを押すと数字が増えるだけなので、Flutterの動きを観察しながら「この部分はこうやって動くんだ」というのを確認できます。

例えば、ボタンを押したときにどのコードが動いているのか、数字がどのように変わっているのかを学ぶことで、アプリの作り方の基本を理解できます。

Flutterのカウンターアプリはシンプルで分かりやすいので、初めてプログラミングを学ぶ人にもぴったりです。次にコードを解説します。
コード一覧です。

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),
      ),
    );
  }
}

Flutterのカウンターアプリのコードを1行ずつ丁寧に説明します。

import 'package:flutter/material.dart';
  • Flutterの「material」というものを使いますよ、という意味です。このmaterialにはアプリを作るためのたくさんの便利な道具が入っています。
void main() {
  runApp(const MyApp());
}
  • main()という部分は、プログラムをスタートさせる場所です。runApp()で、私たちが作るアプリを画面に表示させます。
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  • MyAppという名前のアプリの設計図を作っています。この設計図は「動かない」設計図(StatelessWidget)です。つまり、動かすだけで中身が変わりません。
@override
Widget build(BuildContext context) {
  • buildという部分は、このアプリがどう見えるかを作るところです。ここで画面の見た目を決めます。
  return MaterialApp(
    title: 'Flutter Demo',
  • アプリの画面を作るためにMaterialAppを使います。そして、アプリの名前を「Flutter Demo」としています。
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
  • アプリの色のテーマを決めます。今回は紫色(deepPurple)を使っています。
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}
  • アプリが最初に表示するページをMyHomePageにしています。このページのタイトル（画面の上の部分に表示される文字）を「Flutter Demo Home Page」にしています。
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;
  • 次に、MyHomePageというページを作っています。このページは「動くページ」(StatefulWidget)です。つまり、このページの中身は変わります。
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
  • このページの動き方を決める部分を_MyHomePageStateという名前で作りますよ、という意味です。
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  • ページの中で使う数字を_counterという名前で作ります。この数字は最初は「0」です。
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  • incrementCounterという名前の関数を作ります。ボタンが押されたときに_counterという数字を「1つ」増やします。このとき、画面を新しく作り直して数字が増えたのを見せます。
  @override
  Widget build(BuildContext context) {
    return Scaffold(
  • ページ全体の見た目を作るところです。このScaffoldという部分は、アプリの基本的な枠組みを作ります。
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
  • 画面の一番上にあるバー（AppBar）を作っています。タイトルにはwidget.title、つまり「Flutter Demo Home Page」と表示されます。
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
  • ページの真ん中に色々なものを表示します(Center)。この中に縦に並べる形（Column）で、文字や数字を配置します。
            const Text(
              'You have pushed the button this many times:',
            ),
  • 最初に、「あなたはボタンをこんなにたくさん押しました」というメッセージを表示します。このメッセージは変わらないのでconst（固定された）としています。
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
  • 次に、数字を表示します。この数字は_counterで、ボタンを押すたびに増えていきます。
          ],
        ),
      ),
  • 上にある文字と数字を全部まとめて、画面の真ん中に置きます。
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}
  • 画面の右下にボタンを作ります（floatingActionButton）。このボタンを押すと、_incrementCounterが動いて数字が増えます。ボタンの見た目は「+」のマークです。

まとめ

最後にまとめると以下になります。

import 'package:flutter/material.dart'; // Flutterのmaterialという便利なツールを使います

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, // Material3デザインを使います
      ),
      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; // 数字（カウンター）を保持する変数、最初は0

  void _incrementCounter() {
    // カウンターを増やすための関数
    setState(() {
      // 画面を新しくして変更を反映させる
      _counter++; // カウンターを1増やす
    });
  }

  @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), // ボタンの見た目は「+」のマーク
      ),
    );
  }
}

次回はじゃんけんアプリについて見ていきましょう。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?