カウンターアプリから新しいアプリを作る(初心者向け)

この記事は、【 可茂IT塾 Advent Calendar 2021 】の19日目の記事です。

Version

• Flutter 2.6.0
• Dart 2.14.4

カウンターアプリをもとに新しいアプリを作る

カウンターアプリは、Android Studioで新規のFlutter Projectを作成するとはじめに作成されるアプリです。初心者はこのアプリを理解しながらFlutterの勉強を進めていくのがよいと思います。 今回は、カウンターアプリを使って組み込み型(Built-in Types)を操作します。組み込み型とは、あらかじめそのプログラミング言語で定められた型やメソッドです。 Dartではnumbers,String,booleans,Lists,Mapsなどがあります。 今回は、カウンターアプリをもとにFloatingActionButtonを押すと、カウンターが表示されるとともに、そのカウンターに応じてList型やMap型のメソッドが実行されるアプリを作ります。

参考：Dart2 language guide

コード全文

まずはコード全文です

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  String _string = 'イヌ サル キジ タヌキ キツネ';
  Map<String, String> _japaneseMlbPlayers = {
    'Shohei Ohtani': 'Los Angeles Angels',
    'Yu Darvish': 'San Diego Padres',
    'Kenta Maeda': 'Minnesota Twins',
    'Shogo Akiyama': 'Cincinnati Reds',
    'Yoshi Tsutsugo': 'Pittsburgh Pirates',
  };
  bool _isChecked = false;

  void _incrementCounter() {
    setState(() {
      _counter++;
      _isChecked = !_isChecked;
    });
  }

  @override
  Widget build(BuildContext context) {
    int _fiveCounter = (_counter + 5) % 5;
    List _splitString = _string.split(' ');

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(color: Colors.blue),
            ),
            Text(
              '_counter: $_counter',
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              '_fiveCounter: $_fiveCounter',
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              _string,
              style: TextStyle(color: Colors.blue),
            ),
            Text(
              '${_splitString[_fiveCounter]}',
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              _japaneseMlbPlayers.toString(),
              style: TextStyle(color: Colors.blue),
            ),
            Text(
              '${_japaneseMlbPlayers.keys.elementAt(_fiveCounter)}',
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              '${_japaneseMlbPlayers.values.elementAt(_fiveCounter)}',
              style: Theme.of(context).textTheme.headline5,
            ),
            Checkbox(value: _isChecked, onChanged: null),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

コード解説

state 初期値として String _string、Map<String, String> _japaneseMlbPlayers、bool _isCheckedを定義する。

  int _counter = 0;
  String _string = 'イヌ サル キジ タヌキ キツネ';
  Map<String, String> _japaneseMlbPlayers = {
    'Shohei Ohtani': 'Los Angeles Angels',
    'Yu Darvish': 'San Diego Padres',
    'Kenta Maeda': 'Minnesota Twins',
    'Shogo Akiyama': 'Cincinnati Reds',
    'Yoshi Tsutsugo': 'Pittsburgh Pirates',
  };
  bool _isChecked = false;

setStateで、_counter++;はそのまま使う。_isChecked = !_isChecked;で、_isCheckedのbool値を反転させる。

setState(() {
      _counter++;
      _isChecked = !_isChecked;
    });

Widgetの中で、_counter++の数値に応じて0〜4をカウントするint変数_fiveCounterと、_stringをスペースで区切ってList化したList _splitStringを定義。

  int _fiveCounter = (_counter + 5) % 5;
  List _splitString = _string.split(' ');

Widgetで以下を表示させる。 $_counter => 1 ずつ増えるカウンター。 $_fiveCounter => _counterの値をもとに 0〜4 を繰り返すカウンター。 ${_splitString[_fiveCounter]}, => List _splitStringから_fiveCounterに応じて順番に取り出した要素。 ${_japaneseMlbPlayers.keys.elementAt(_fiveCounter)} => Mapから_fiveCounterに応じて順番に取り出したkey。 ${_japaneseMlbPlayers.values.elementAt(_fiveCounter)} => Mapから_fiveCounterに応じて順番に取り出したvalue。 Checkbox => value: の false と true がonPressedごとに反転する

  Text('_counter: $_counter',),
  Text('_fiveCounter: $_fiveCounter',),
  Text('${_splitString[_fiveCounter]}'),
  Text('${_japaneseMlbPlayers.keys.elementAt(_fiveCounter)}',),
  Checkbox(value: _isChecked, onChanged: null),

まとめ

カウンターアプリは基本なので、これを少しずつ変えながらFlutterの理解を深めていくのは良い方法だと思うので、やってみてください。