Flutterでカウンターアプリを作成する

はじめに

こんにちは、エンジニアのkeitaMaxです。

Flutterでカウンターを作ってみようと思います。

前回作成したTop ScreenからCounterページに遷移させて、カウンターを作成しようと思います。

前回の記事

画面遷移

lib/screens/counter/counter.dartというカウンターをする画面のファイルを作成します。

lib/screens/counter/counter.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('CounterScreen')),
      body: const Center(child: Text('Counter Screen')),
    );
  }
}

app_router.dartにルートを追加します。counterにしました。

lib/core/router/app_router.dart

import 'package:flutter_example_app/screens/counter/counter.dart';
import 'package:go_router/go_router.dart';

import '../../screens/second/second.dart';
import '../../screens/top/top.dart';

final appRouter = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      name: 'top',
      builder: (context, state) => const TopScreen(),
    ),
    GoRoute(
      path: '/second',
      name: 'second',
      builder: (context, state) => const SecondScreen(),
    ),
    GoRoute( // 追加
      path: '/counter',
      name: 'counter',
      builder: (context, state) => const CounterScreen(),
    ),
  ],
);

top.dartにもボタンを追加しました。

lib/screens/top/top.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TopScreen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            const Text('Top Screen'),
            TextButton(
              onPressed: () => context.go('/second'),
              child: const Text('Secondへ遷移'),
            ),
            TextButton(
              onPressed: () => context.go('/counter'),
              child: const Text('Counterへ遷移'),
            ),
          ],
        ),
      ),
    );
  }
}

flutter runコマンドを実行して確かめて見てください。

Counterへ遷移ボタンを押すとカウンター画面に遷移するかと思います。

カウンターの機能を作成する

実際にカウンター画面を作っていきます。

Flutter の仕組みでは「状態を持つ Widget」を作るとき StatefulWidget を継承し、createState() でその Widget の状態を管理する State オブジェクトを返す必要があ流らしいので、

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

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  @override
  Widget build(BuildContext context) {
    return()
  }
}

のようにState<CounterScreen> createState() => _CounterScreenState();みたいにするのがいいらしいです。（間違えてたらコメントで教えていただければと思います）

以下のようにカウントアップさせる変数と増やすための関数を作成しました。

  int count = 0;
  void incrementCounter() {
    setState(() => count++);
  }

カウントを表示するために以下のようにTextを表示します。

Text('$count')

カウントアップさせるためのボタンは以下のように作成しました。

TextButton(
  onPressed: incrementCounter,
  child: const Text('カウントアップ'),
),

ここまでのコードは以下のようになります。

import 'package:flutter/material.dart';

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

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int count = 0;

  void incrementCounter() {
    setState(() => count++);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('CounterScreen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text('$count'),
            TextButton(
              onPressed: incrementCounter,
              child: const Text('カウントアップ'),
            ),
          ],
        ),
      ),
    );
  }
}

これをブラウザで見てみると、

このようにボタンを押すとカウントアップする画面を作成することができました。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考

次の記事