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

image

この記事は、【 可茂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 {
  
  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;

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

  
  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 _stringMap<String, String> _japaneseMlbPlayersbool _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の理解を深めていくのは良い方法だと思うので、やってみてください。

お知らせ

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

お知らせ

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More