文字列をenumに変換するケースを考えてみましょう。 やり方としては文字列を受け取ったら、enumの値をそれぞれ文字列に変換して受け取った文字列と突き合わせればよさそうです。 その変換を以下のように書いてみました。 <code>Fruit</code>というenumを作り、そのヘルパーメソッドを定義しています。

enum Fruit { apple, orange, banana }

class FruitHelper {
  static Fruit parseFromString(String value) {
    return Fruit.values.firstWhere((item) {
      return item.toString() == value;
    }, orElse: () => Fruit.apple);
  }
}

void main() {
  print(FruitHelper.parseFromString('Fruit.banana'));
}

使い方は簡単で、<code>parseFromString</code>メソッドに文字列を渡すだけです。 該当するenumが見つかったときはそのenumを返します。 このヘルパーを利用する側からすれば結果的にenumに変換されたように見えるでしょう。 たとえば、enumの値をデータベースやファイルなどに保存したいときなどにenumのままでは保存できません。 数値や文字列として保存することになりますが、そこから復帰させてプログラム内で使う場合はenumとして取り扱い、というニーズは結構あると思います。 こうしたヘルパーを用意しておくと、そうした変換ニーズにも対応できますね。 ちなみに、enumから文字列に変換したいときは<code>toString()</code>を実行すればOKです。 enumから文字列に変換する方はDartに標準で備わっている機能になります。

言語仕様

文字列をenumに変換する

DartPadはただ使ってるだけでも本当に便利なんですが、自分のWebサイトなどお好きなところにコードを埋め込むことができます。 手順はこちらです。<ol><li>Gistにサンプルコードを配置する</li><li>iframe用のURLを作る</li><li>iframeのタグを張る</li></ol> 今回は以下のようなサンプルコードを例に埋め込みを試してみようと思います。<pre><code>void main() {
 var list = [1, 2, 3];
 print(list);
}</code></pre><h2 id="h115dbab19d">Gistにサンプルコードを配置する</h2>Gist上でDartのコードを公開します。 公開設定は「Create secret gist」でも「Create public gist」どちらでも大丈夫です。 <a href="https://flutter-gogo.dev/figures/gist_for_dartpad.png" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/ce25c74bf17441e1841181014f20b5a4/541d3bc141bbb9ff8f9175a9c0a88436.png?w=760&amp;h=476" alt="Gist上にコードをアップしましょう"></a><h2 id="h3783576450">iframe用のURLを作る</h2>Gistで発行されたURLに含まれているidをメモしてiframeのタグを作成します。 今回出来上がったGistのURLはこちらのようになりました。 URLの構成は<code>https://gist.github.com/{GitHubのアカウント名}/{Gistのid}</code>ですね。<pre><code>https://gist.github.com/z-ohnami/df1d10c103743534baf1f0dc59bdda6a</code></pre> iframeのタグは以下のようになります。 idのパラメーターにGistのidを指定してあげればOKです。<pre><code>&lt;iframe src="https://dartpad.dev/embed-dart.html?id=df1d10c103743534baf1f0dc59bdda6a"&gt;&lt;/iframe&gt;</code></pre><h2 id="h01e2a6e40b">iframeのタグを張る</h2>あとはこれをお好きなところに配置すれば完了です。 以下のようにDartPadのHTMLが埋め込まれていると思います。 あなたには先ほどのコードがDartPadを経由した形で見えているでしょうか？

オフィシャルの手順はこちらです！ <a href="https://github.com/dart-lang/dart-pad/wiki/Embedding-Guide" target="_blank" rel="noopener noreferrer">https://github.com/dart-lang/dart-pad/wiki/Embedding-Guide</a>

DartPad

DartPadのコードをiframeで任意のページに埋め込む方法

Dartでは既存のクラスに自分がほしいと思うメソッドを足し込んで機能拡張をすることができます。 例を見ていきましょう。<h2 id="hbdac2a1aac">例) DateTimeクラスに日付の情報のみを取得するメソッドを追加する</h2><code>DateTime</code>は日時を扱うためのクラスですが、時刻の情報は不要で日付だけほしいというケースには対応していません。 そこで、日付のみを取得できるように<code>dateOnly</code>というメソッド(厳密にいうと今回はゲッター)を<code>DateTime</code>クラスに追加してみようと思います。 まずは以下のように<code>extension</code>を定義し、その中に自分が使いたいメソッドを書きます。<pre><code>extension DateTimeExtension on DateTime {
&nbsp; DateTime get dateOnly {
&nbsp;&nbsp;&nbsp; return DateTime(year, month, day, 0, 0, 0);
&nbsp; }
}</code></pre>書き方としては最初の行で<code>extension Extensionの名称</code> on <code>拡張したいクラス名</code> とします。 あとはその中にいつもと同じようにメソッドのコードを書くことができます。 3行目のように<code>year</code>や<code>month</code>など、元々<code>DateTime</code>に備わっているメソッドを利用することができます。 あとは<code>DateTime</code>が存在するところであればどこでも拡張メソッドの<code>dateOnly</code>を呼び出すことができます。<pre><code>print(DateTime.now().dateOnly); // 2022-03-03 00:00:00.000 を取得できる！</code></pre><h2 id="ha43db5fbe9">staticメソッドも追加できる？</h2>staticメソッドも拡張メソッドとして追加できるのでしょうか？ たとえば<code>DateTime.special_method()</code>のようにメソッドを追加できるかというと、それはできないようです。 コード的には以下のように書いてもエラーにはならないようですが<pre><code>extension DateTimeExtension on DateTime {
&nbsp; static int special_method() {
&nbsp;&nbsp;&nbsp; return 1;
&nbsp; }
}</code></pre>使用するときは<code>DateTimeExtension.special_method()</code>としなければ呼び出せないようです。 これだと、普通に自分でクラスを作ってstaticメソッドを作った方がよさそうです。 拡張メソッドは積極的に使い込む機能ではないかもしれませんが、プロジェクト内で高頻度かつ、どこでからも呼び出されるような処理や時刻や文字列などに汎用的に使える便利機能を準備したいケースでは拡張メソッドを使った方が便利になることはありそうですね。

拡張メソッド(Extension Methods)で既存のクラスに機能を追加する

Dartで日付や時刻を取り扱うには、標準で提供されているDateTimeクラスを利用します。 チートシートのように端的にまとめてみました。早速、用途ごとに使い方を見ていきましょう。<h2 id="hdc5e0f4f2e">現在の時刻を取得する</h2>現在の日時を取得するためには<code>now()</code>を使用します。<pre><code>final today = DateTime.now();
print(today);
// 2022-02-21 22:07:35.120 というDateTimeのインスタンスを取得する</code></pre><h2 id="hc2987e7629">任意の時刻を作成する</h2><code>DateTime</code>の引数にお好きな<code>year</code>,<code>month</code>などを指定していくと、任意の時刻のインスタンスを作ることができます。<pre><code>// year, month, day, hour, minute, secondを指定する
final day = DateTime(1867, 11, 9, 11, 30, 30);
print(day); // 1867-11-09 11:30:30.000</code></pre>時刻を省略して日付だけでも可能です。<pre><code>final day = DateTime(1867, 11, 9);
print(day); // 1867-11-09 00:00:00.000</code></pre><h2 id="hd3f4947c40">文字列に変換する</h2>書式にこだわりなく、ただ文字列に変換したいときは<code>toString()</code>をすれば文字列になります。 たとえば一時的に時刻を文字列として保管しておき、後述する<code>parse</code>で読み込んで使うようなケースの場合は有効です。<pre><code>final day = DateTime(1867, 11, 9, 12, 23, 34);
print(day.toString()); // '1867-11-09 12:23:34.000'</code></pre><h2 id="h6d0f960f79">書式を指定して文字列に変換する</h2>取得した日時を任意のフォーマットで文字列に変換するためには、<code>year</code>や<code>hour</code>など<code>DateTime</code>のインスタンスから部分的に切り出して、文字列に当てはめるのが良さそうです。<pre><code>final today = DateTime.now();
print('${today.year}-${today.month}-${today.day} ${today.hour}:${today.minute}:${today.second}');
// 2022-2-21 22:7:35 という文字列が手に入る</code></pre>一桁のときに二桁目をゼロで埋めたいときは以下のように文字列に変換し、<code>padLeft</code>を使うとよいです。 ここでは<code>month</code>のみゼロパディングしています。<pre><code>final today = DateTime.now();
final month = today.month.toString().padLeft(2, '0');
print('${today.year}-$month-${today.day} ${today.hour}:${today.minute}:${today.second}');
// 2022-02-21 22:7:35 という文字列が手に入る</code></pre>もし、他の言語にあるようなYYYYMMDDなど文字列で書式を指定して使いたいような場合は<a href="https://pub.dev/packages/intl" target="_blank" rel="noopener noreferrer">intlというパッケージ</a>をインストールすると同じことがDartでも可能になります。<h2 id="h49c6c171a9">文字列から時間に変換する</h2>所定の文字列から時刻に変換したい、というのもよくあることです。 <code>parse</code>を利用すると文字列から<code>DateTime</code>のインスタンスに変換可能です。<pre><code>final timeText = '1979-11-08 17:35:32';
final time = DateTime.parse(timeText);
print(time.year); // 1979を取得できる</code></pre>変換可能な文字列のパターンは<a href="https://api.flutter.dev/flutter/dart-core/DateTime/parse.html" target="_blank" rel="noopener noreferrer">parseメソッドの仕様ページ</a>に例として記載されています。<h2 id="h625c8788b5">時間の加算・減算をする</h2>ある時間を基準に足し引きも簡単にできます。 例えば今から3日後の日付を取得したいときは<code>add</code>メソッドを使います。<pre><code>final today = DateTime(2021, 2, 2, 11, 30, 30);
final after3Days = today.add(Duration(days: 3));
print(after3Days); // 2021-02-05 11:30:30.000</code></pre><code>Duration(days: 3)</code>みたいな書き方ができるのは大変便利ですね。 <code>days:</code>を<code>hours:</code>にすると3時間後の時間が出てきます。<pre><code>final today = DateTime(2021, 2, 2, 11, 30, 30);
final after3Hours = today.add(Duration(hours: 3));
print(after3Hours); // 2021-02-02 14:30:30.000</code></pre>他にも<code>minutes:</code>や<code>seconds:</code>、<code>milliseconds:</code>、<code>microseconds:</code>まで指定できます。 一方で<code>subtract</code>を使うとある時間を基準に過去の時間を求めることが可能です。<pre><code>final today = DateTime(2021, 2, 2, 11, 30, 30);
final yesterday = today.subtract(Duration(days: 1));
print(yesterday); // 2021-02-01 11:30:30.000</code></pre><h2 id="h82abd27304">時間の差分を取得する</h2>二つの時刻の差分を取得するには<code>difference</code>を使用します。 差分は<code>inDays</code>や<code>inHours</code>といったメソッドを使用することでお好みの時刻の単位を指定して取得することができます。 これはかなり便利ですね。各単位に換算したときに余りが発生したときは切り捨てになります。<pre><code>final time1 = DateTime(2021, 2, 2, 11, 30, 30);
final time2 = DateTime(2021, 2, 4, 12, 35, 30);
final diffTime = time2.difference(time1);

print(diffTime.inDays); // 2
print(diffTime.inHours); // 49
print(diffTime.inMinutes); // 2945
print(diffTime.inSeconds); // 176700</code></pre><h2 id="h791add4976">時間を比較する</h2><code>isAfter</code>や<code>isBefore</code>を使うと、二つの<code>DateTime</code>インスタンスの大小を比較することができます。 どちらが未来日付か？みたいな処理はよくやりますね。<pre><code>final time1 = DateTime(2021, 2, 2, 11, 30, 30);
final time2 = DateTime(2021, 2, 4, 12, 35, 30);

print(time1.isAfter(time2)); // false
print(time1.isBefore(time2)); // true</code></pre><code>DateTime</code>はかなり使いやすく、便利なクラスだと使ってみて思いました。 日付や時刻の処理でやりたいことはほぼ実現できるのではないでしょうか。 <a href="https://api.flutter.dev/flutter/dart-core/DateTime-class.html" target="_blank" rel="noopener noreferrer">オフィシャルの仕様ページ</a>もかなりわかりやすくまとめられています。 このページで紹介していないメソッドもあるので、一度目を通してみるとよいかもしれません。

標準クラス

DateTimeクラスで日付と時刻の処理

<a href="https://pub.dev/packages/emoji_picker_flutter" target="_blank" rel="noopener noreferrer">emoji_picker_flutter</a>のパッケージを使うと、テキストを入力するときなどに絵文字を簡単に選択できるようになります。 以下は絵文字を選択すると、Textの中身として表示するサンプルです。

import 'dart:io';

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

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

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

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

class _MyAppState extends State<MyApp> {
 String emojiLabel = '絵文字がここに表示されます';

 _onEmojiSelected(Emoji emoji) {
 setState(() {
 emojiLabel = "${emoji.name} ${emoji.emoji}";
 });
 }

 _onBackspacePressed() {
 setState(() {
 emojiLabel = '絵文字がここに表示されます';
 });
 }

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 backgroundColor: Colors.white,
 appBar: AppBar(
 title: const Text('絵文字を選択する'),
 ),
 body: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 Text(
 emojiLabel,
 style: const TextStyle(fontSize: 30),
 ),
 const SizedBox(
 height: 40,
 ),
 Builder(builder: (context) {
 return ElevatedButton(
 onPressed: () {
 showModalBottomSheet(
 context: context,
 isScrollControlled: false,
 enableDrag: false,
 builder: (BuildContext context) {
 return SizedBox(
 height: 400,
 child: EmojiPicker(
 onEmojiSelected:
 (Category category, Emoji emoji) {
 _onEmojiSelected(emoji);
 Navigator.pop(context);
 },
 onBackspacePressed: _onBackspacePressed,
 config: Config(
 columns: 7,
 emojiSizeMax:
 32 * (Platform.isIOS ? 1.30 : 1.0),
 verticalSpacing: 0,
 horizontalSpacing: 0,
 initCategory: Category.RECENT,
 bgColor: const Color(0xFFF2F2F2),
 indicatorColor: Colors.blue,
 iconColor: Colors.grey,
 iconColorSelected: Colors.blue,
 progressIndicatorColor: Colors.blue,
 backspaceColor: Colors.blue,
 skinToneDialogBgColor: Colors.white,
 skinToneIndicatorColor: Colors.grey,
 enableSkinTones: true,
 showRecentsTab: true,
 recentsLimit: 28,
 noRecentsText: 'No Recents',
 noRecentsStyle: const TextStyle(
 fontSize: 20, color: Colors.black26),
 tabIndicatorAnimDuration:
 kTabScrollDuration,
 categoryIcons: const CategoryIcons(),
 buttonMode: ButtonMode.MATERIAL)),
 );
 },
 backgroundColor: const Color(0x00000000),
 );
 },
 child: const Padding(
 padding: EdgeInsets.all(8.0),
 child: Text(
 '絵文字を選択',
 style: TextStyle(fontSize: 30),
 ),
 ));
 })
 ],
 ),
 ),
 ),
 );
 }
}

以下のように簡単に絵文字を選択するためのUIを組み込むことが可能です！！ 「絵文字を選択」を押すと・・・ <img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/a3f51f75bc9e43889cb8456aa0c97798/Screenshot_20220503-142623.png?w=400&amp;h=888" alt=""> emoji pickerが出現します！！ <img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/2756f3699d0b41acaa4a100969051050/Screenshot_20220503-142645.png?w=400&amp;h=888" alt=""> 最近使用した絵文字が表示される機能が付いているのもいいですね！

Widget

emoji_picker_flutterを使って、簡単に絵文字を選べるようにする

DropdownButtonを使って時刻を選択するサンプルを作りました。 引数に選択範囲の最小と最大を指定すると、その範囲内に限定した状態で選択できるようになります。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 home: Builder(builder: (context) {
 return Scaffold(
 appBar: AppBar(
 title: const Text('サンプル'),
 centerTitle: true,
 backgroundColor: Colors.green,
 ),
 body: Container(
 color: Colors.green.shade200,
 padding: const EdgeInsets.all(20.0),
 child: Center(
 child: ElevatedButton(
 child: const Text('時間を決める', style: TextStyle(fontSize: 30.0)),
 onPressed: () {
 showDialog(
 context: context,
 builder: (BuildContext context) => const TimePickerDialog(
 minTime: TimeOfDay(hour: 9, minute: 30),
 maxTime: TimeOfDay(hour: 24, minute: 0),
 ));
 },
 ),
 ),
 ),
 );
 }),
 );
 }
}

class TimePickerDialog extends StatefulWidget {
 const TimePickerDialog(
 {Key? key, required this.minTime, required this.maxTime})
 : super(key: key);

 final TimeOfDay minTime;
 final TimeOfDay maxTime;

 @override
 State<TimePickerDialog> createState() => _TimePickerDialogState();
}

class _TimePickerDialogState extends State<TimePickerDialog> {
 int hour = 0;
 int minute = 0;

 @override
 void initState() {
 hour = widget.minTime.hour;
 minute = widget.minTime.minute;
 super.initState();
 }

 @override
 Widget build(BuildContext context) {
 return AlertDialog(
 title: const Text('時間を設定してください'),
 content: Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 DropdownButton(
 items: selectableHours.map<DropdownMenuItem<int>>((int value) {
 return DropdownMenuItem<int>(
 value: value,
 child: Text(
 value.toString(),
 style: const TextStyle(fontSize: 30.0),
 ),
 );
 }).toList(),
 value: hour,
 onChanged: (int? newValue) {
 setState(() {
 hour = newValue!;
 minute = selectableMinMinute;
 });
 }),
 const Text(
 ':',
 style: TextStyle(fontSize: 30.0),
 ),
 DropdownButton(
 items:
 selectableMinutes.map<DropdownMenuItem<int>>((int value) {
 return DropdownMenuItem<int>(
 value: value,
 child: Text(
 value.toString(),
 style: const TextStyle(fontSize: 30.0),
 ),
 );
 }).toList(),
 value: minute,
 onChanged: (int? newValue) {
 setState(() {
 minute = newValue!;
 });
 }),
 ],
 ),
 actions: [
 ElevatedButton(
 child: const Text('Cancel'),
 onPressed: () => Navigator.pop(context),
 ),
 ElevatedButton(
 child: const Text('OK'),
 onPressed: () {
 print('selected time is $hour:$minute');
 },
 ),
 ]);
 }

 List<int> get selectableHours {
 return List<int>.generate((widget.maxTime.hour - widget.minTime.hour + 1),
 (int index) => widget.minTime.hour + index);
 }

 int get selectableMinMinute {
 return widget.minTime.hour == hour ? widget.minTime.minute : 0;
 }

 int get selectableMaxMinute {
 return widget.maxTime.hour == hour ? widget.maxTime.minute : 59;
 }

 List<int> get selectableMinutes {
 return List<int>.generate((selectableMaxMinute - selectableMinMinute + 1),
 (int index) => selectableMinMinute + index);
 }
}

Flutterだと、TimePickerというWidgetを呼び出す方法があります。 通常だとこちらの方が手軽で便利ですが、時刻の選択範囲が0から24時間という欠点があります。 例えば、25時(深夜1時)を選択できるようにしたい、みたいな要件があったときはTimePickerは使えません。 そうしたときはWidgetを駆使して自分で作らないといけないですね。 あとは、TimePickerのグルグルUIを採用したくないときも該当すると思います。 サンプルでは引数をTimeOfDayというFlutter組み込みのクラスで取り扱っていますが、実は25時以降を選べるようにしたいときはこのクラスは使えません。 引数の渡し方も独自に工夫する必要がありそうです。

ドロップダウンで時間選択用のダイアログを作る

Widgetの背景色を繰り返し点滅させるアニメーションを導入してみましょう。 これは<code>AnimationController</code>を使い、Transition系のWidgetを追加することで実現可能です。 まず、コード全体を掲載します。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

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

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
 late AnimationController _animationController;

 final DecorationTween _decorationTween = DecorationTween(
 begin: const BoxDecoration(
 color: Colors.blue,
 ),
 end: BoxDecoration(
 color: Colors.blue.shade100,
 ),
 );

 @override
 void initState() {
 _animationController = AnimationController(
 vsync: this,
 duration: const Duration(milliseconds: 3000),
 )..repeat(reverse: true);
 super.initState();
 }

 @override
 void dispose() {
 _animationController.dispose();
 super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 appBar: AppBar(
 title: const Text('サンプル'),
 ),
 body: Center(
 child: DecoratedBoxTransition(
 decoration: _decorationTween.animate(_animationController),
 child: const SizedBox(
 width: 200,
 height: 200,
 child: Center(
 child: Text('demo'),
 ),
 ),
 ),
 ),
 floatingActionButton: FloatingActionButton(
 child: const Icon(Icons.play_arrow),
 onPressed: () {
 print('aa');
 },
 ),
 ),
 );
 }
}

アニメーションの状態を保持する必要があるため、今回はStatefulWidgetを使います。 最初はアニメーションに必要な変数たちを準備します。 以下のコードを見てください。

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
 late AnimationController _animationController;

 final DecorationTween _decorationTween = DecorationTween(
 begin: const BoxDecoration(
 color: Colors.blue,
 ),
 end: BoxDecoration(
 color: Colors.blue.shade100,
 ),
 );

まず、12行目でクラスの定義を開始しますが、<code>SingleTickerProviderStateMixin</code>を組み込んでいます。 これによりこのクラスの中でアニメーションを取り扱うことが可能になります。 そして<code>AnimationController</code>を状態として保持できるように<code>_animationController</code>変数を用意しています。 15行目から始まる<code>DecorationTween</code>は今回のアニメーションの内容です。 <code>begin:</code>にアニメーション開始時の状態を設定します。逆に<code>end:</code>は終了時の状態ですね。 今回は青色から薄い青に変化していくように設定しました。 そして、<code>_animationController</code>を初期化する処理が必要です。 以下のコードを見てください。

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 3000),
    )..repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }


<code>initState</code>で<code>_animationController</code>の初期化処理をしています。 <code>duration:</code>では再生スピードを指定しますが、今回は3秒にしています。 先ほど15行目で指定したアニメーションを3秒の時間をかけて再生することになります。 <code>begin:</code>の状態から<code>end:</code>の状態に3秒間で変化していきます。 29行目で<code>repeat(reverse: true)</code>としています。 これにより、アニメーションは繰り返し再生されるようになります。 <code>reverse: true</code>にすると、繰り返し方が変わり、再生と逆再生を交互に行うようになります。 今回は背景色をシームレスに点滅させたいため、<code>reverse: true</code>にしています。 35行目はおまじないですね。インスタンスが破棄されるときに<code>_animationController</code>も破棄しています。 最後にアニメーションを仕掛けるところを指定します。 以下のコードを見てください。

        body: Center(
          child: DecoratedBoxTransition(
            decoration: _decorationTween.animate(_animationController),
            child: const SizedBox(
              width: 200,
              height: 200,
              child: Center(
                child: Text('demo'),
              ),
            ),
          ),
        ),

アニメーションを追加する対象は50行目の<code>SizedBox</code>以下になります。 対象を48行目のように<code>DecorateBoxTransition</code>で囲みます。 このとき、49行目のように15行目で定義したアニメーションを紐つけてあげることで、指定したアニメーションが適用されます。 あとはビルドをすると以下のコードのように点滅のアニメーションが再生されるでしょう。

さて、今はアプリが起動した時点でアニメーションが再生されました。 ユーザーが任意の操作をしたタイミングで点滅のアニメーションを追加するにはどうしたらいいでしょうか？ まず、以下のように<code>initState</code>で実行していた<code>repeat(reverse: true)</code>を取り除きます。<pre><code>_animationController = AnimationController(
 vsync: this,
 duration: const Duration(milliseconds: 3000),
);</code></pre>これで勝手にアニメーションが再生されることはなくなりました。 次に<code>floatingActionButton</code>を押した時にアニメーションが再生されるようにしてみます。<pre><code>floatingActionButton: FloatingActionButton(
&nbsp; child: Icon(_animationController.isAnimating
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ? Icons.pause
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : Icons.play_arrow),
&nbsp; onPressed: () {
&nbsp;&nbsp;&nbsp; setState(() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (_animationController.isAnimating) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _animationController.stop();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _animationController.repeat(reverse: true);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; });
&nbsp; },
),</code></pre><code>onPressed:</code>のところにアニメーションの制御を追加しています。 <code>_animationController.isAnimating</code>が<code>true</code>のときはアニメーション再生中です。 そのときはアニメーションをストップするようにしました。 <code>false</code>のとき(初回含む)は逆にアニメーションを再生しないといけません。 ここで、先ほど25行目からはじまる<code>initState</code>で取り除いた<code>repeat(reverse: true)</code>を追加すればOKです。 こうすれば任意のタイミングで繰り返しのアニメーションを有効化・無効化が可能になります。 以下はボタンを追加した場合のサンプルです。

点滅するアニメーションを追加する

ContainerとColumnとRowを使って、コントロールパネル風に画面を組んでみました。 左上にクローズボタン、中央にメインコンテンツ、下部に操作用のボタンがいくつか並ぶような構成です。 <img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/930064f706c240b4af5a14b41fabe419/Screenshot_20220407-235336.png?w=400&amp;h=888" alt=""> 以下はサンプルコード全体になります。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            title: const Text('サンプル'),
            centerTitle: true,
            backgroundColor: Colors.green,
          ),
          body: Container(
            color: Colors.green.shade200,
            padding: const EdgeInsets.all(20.0),
            child: Container(
              decoration: BoxDecoration(
                color: const Color(0x00000000),
                border: Border.all(
                  color: Colors.green,
                  width: 10.0,
                ),
                borderRadius: BorderRadius.circular(32.0),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 10.0, right: 10.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: const [
                        Icon(Icons.close, size: 60.0),
                      ],
                    ),
                  ),
                  Column(
                    children: const [
                      Text(
                        'Happy',
                        style: TextStyle(fontSize: 60.0),
                      ),
                      Text(
                        'Coding !!',
                        style: TextStyle(fontSize: 60.0),
                      ),
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 20.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Icon(
                          Icons.pause,
                          size: 60.0,
                        ),
                        SizedBox(
                          width: 20.0,
                        ),
                        Icon(
                          Icons.check,
                          size: 60.0,
                        ),
                        SizedBox(
                          width: 20.0,
                        ),
                        Icon(
                          Icons.stop,
                          size: 60.0,
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          )),
    );
  }
}


ポイントは31行目の以下のコードです。 今回、30行目から始まるColumnの中にRowが三つあります。 これがあることで、上部、中央、下部のRow同士の間に均等にスペースを入れてくれます。 端末によって、画面の高さが変わりますが、この構成ならあまり変な形にはならないでしょう。<pre><code>mainAxisAlignment: MainAxisAlignment.spaceBetween,</code></pre>

Container,Column,Rowを使ったパネル画面のサンプル

Flutterでラジオボタンを使うときはRadioを使います。 以下、サンプルコードです。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

 @override
 State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 RamenKind yourChoice = RamenKind.miso;

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 appBar: AppBar(
 title: const Text('サンプル'),
 ),
 body: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 RadioButton(
 label: 'みそ',
 groupValue: yourChoice,
 value: RamenKind.miso,
 onChanged: (newValue) => setState(() {
 yourChoice = newValue;
 }),
 ),
 RadioButton(
 label: 'しお',
 groupValue: yourChoice,
 value: RamenKind.sio,
 onChanged: (newValue) => setState(() {
 yourChoice = newValue;
 }),
 ),
 RadioButton(
 label: 'しょうゆ',
 groupValue: yourChoice,
 value: RamenKind.shoYu,
 onChanged: (newValue) => setState(() {
 yourChoice = newValue;
 }),
 ),
 Text('$yourChoiceを選択しています'),
 ],
 ),
 ),
 ),
 );
 }
}

enum RamenKind { miso, sio, shoYu }

class RadioButton extends StatelessWidget {
 const RadioButton({
 Key? key,
 required this.label,
 required this.groupValue,
 required this.value,
 required this.onChanged,
 }) : super(key: key);

 final String label;
 final RamenKind groupValue;
 final RamenKind value;
 final ValueChanged<RamenKind> onChanged;

 @override
 Widget build(BuildContext context) {
 return GestureDetector(
 onTap: () {
 if (value == groupValue) {
 return;
 }
 onChanged(value);
 },
 child: Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 Radio<RamenKind>(
 groupValue: groupValue,
 value: value,
 onChanged: (RamenKind? newValue) {
 onChanged(newValue!);
 },
 ),
 Text(label)
 ],
 ),
 );
 }
}

まず、ラジオボタンの選択肢をenumで定義しておきます。 今回はラーメン3種類にしました。<pre><code>enum RamenKind { miso, sio, shoYu }</code></pre>同じ仕様のラジオボタンを三つ配置することになるため、ラジオボタンをWidgetとして作成して使い回すようにしようと思います。 以下のようにRadioButtonを作成しました。

class RadioButton extends StatelessWidget {
 const RadioButton({
 Key? key,
 required this.label,
 required this.groupValue,
 required this.value,
 required this.onChanged,
 }) : super(key: key);

 final String label;
 final RamenKind groupValue;
 final RamenKind value;
 final ValueChanged<RamenKind> onChanged;

 @override
 Widget build(BuildContext context) {
 return GestureDetector(
 onTap: () {
 if (value == groupValue) {
 return;
 }
 onChanged(value);
 },
 child: Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 Radio<RamenKind>(
 groupValue: groupValue,
 value: value,
 onChanged: (RamenKind? newValue) {
 onChanged(newValue!);
 },
 ),
 Text(label)
 ],
 ),
 );
 }
}

88行目でRadioを使っています。 ラジオボタンを配置する場合、多くのケースではボタンの脇にテキストを置くことになると思います。 しかし、そのままだとテキストをタップしてもボタンを選択したことになりません。 そこで78行目のようにGestureDetectorで囲むことでボタンとテキスト全体がユーザーのタップに反応するようにしました。

ラジオボタンを使う

アプリを開発していると、リリースには含めないけれどデバッグのときだけ特定の処理を行いたい、といったことがよくあります。 たとえば、実行状態把握のために色を一部変えたり文字を出したい、デバッグ用の機能を追加したい etc... Flutterでは以下のようにdart.vm.productの状態から実行中のアプリがデバッグモードか、リリースモードであるかを確認することが可能です。<pre><code>void main() {
&nbsp; if (bool.fromEnvironment('dart.vm.product')) {
&nbsp;&nbsp;&nbsp; print('release');
&nbsp; } else {
&nbsp;&nbsp;&nbsp; print('debug');
&nbsp; }
}</code></pre>

例えば、Flutterのプロジェクトであれば以下のようなヘルパーを用意して、各ソースコードから呼び出して使ってみるのもいいかもしれません。<pre><code>class EnvHelper {
 static bool isDebug() {
 return !const bool.fromEnvironment('dart.vm.product');
 }
}</code></pre>

基盤

デバッグモードかを判断する

画面の横幅と高さを取得するには<code>MediaQuery</code>を使用します。 配置しているWidgetや画像の大きさを固定値ではなく、画面幅に対する比率で設定したときなどに便利です。 以下は、横幅と高さを文字列として表示するサンプルです。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('サンプル'),
        ),
        body: const ScreenInfo(),
      ),
    );
  }
}

class ScreenInfo extends StatelessWidget {
  const ScreenInfo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;

    return Center(
      child: Container(
        color: Colors.teal.shade200,
        width: _screenSize.width * 0.8,
        height: _screenSize.height * 0.4,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('画面の幅は${_screenSize.width}です'),
            Text('画面の高さは${_screenSize.height}です')
          ],
        ),
      ),
    );
  }
}

今回は22行目からはじまる<code>ScreenInfo</code>というWidgetを作成し、そこで画面の幅と高さを表示しています。 以下のコードを見てください。

  @override
  Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;

    return Center(
      child: Container(
        color: Colors.teal.shade200,
        width: _screenSize.width * 0.8,
        height: _screenSize.height * 0.4,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('画面の幅は${_screenSize.width}です'),
            Text('画面の高さは${_screenSize.height}です')
          ],
        ),
      ),
    );

27行目で<code>MediaQuery</code>により<code>_screenSize</code>を取得しています。 あとはそこからを37 - 38行目のように<code>_screenSize.width</code>と<code>_screenSize.height</code>で幅と高さを取得して文字列として表示するようにしています。 また、他にも32 - 33行目のように<code>Container</code>の幅と高さを画面のサイズを基準にしてある一定の割合になるように調整しています。 たとえば32行目のように<code>_screenSize.width * 0.8</code>とすると画面幅を100%としたときに常に80%の大きさで表示されるようになります。 この方法は端末の幅が様々なケースで、ある一定の比率で大きさを固定させたいときに便利ですね。 ちなみに最初は<code>ScreenInfo</code>として切り出さずに<code>MyApp</code>の9行目下のところで<code>MediaQuery</code>で<code>_screenSize</code>を取得するコードを書いていたのですが それだと以下のようなエラーメッセージが出てうまくいきませんでした。<pre><code>No MediaQuery widget ancestor found.</code></pre>どうやら、すくなくともルートのWidgetから最低でも1階層は下のWidgetじゃないと<code>MediaQuery</code>は使えないようです。

画面の横幅と高さを取得する

Flutterでスライダーを使いたいときは、Slider Widgetを使用します。 スライダーはユーザーに数値などの値を設定してもらうときに、より直感的な操作体験を提供してくれます。 ユーザーはスライダーのつまみを左右に動かして調整します。 早速コードを見ていきましょう。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

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

class _MyAppState extends State<MyApp> {
 double _sliderValue = 5.0;

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 appBar: AppBar(
 title: const Text('サンプル'),
 ),
 body: Center(
 child: Padding(
 padding: const EdgeInsets.all(20.0),
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 Text('$_sliderValue'),
 Slider(
 value: _sliderValue,
 min: 0,
 max: 60,
 onChanged: (double value) {
 setState(() {
 _sliderValue = value;
 });
 },
 activeColor: Colors.green, // 「つまみ」より左側の色
 inactiveColor: Colors.green.shade100, // 「つまみ」より右側の色
 thumbColor: Colors.orange, // 「つまみ」の色
 ),
 ],
 ),
 ),
 ),
 ),
 );
 }
}

<code>Slider</code>を配置し、設定を記載していきます。 以下のコードを見てください。

            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('$_sliderValue'),
                Slider(
                  value: _sliderValue,
                  min: 0,
                  max: 60,
                  onChanged: (double value) {
                    setState(() {
                      _sliderValue = value;
                    });
                  },
                  activeColor: Colors.green, // 「つまみ」より左側の色
                  inactiveColor: Colors.green.shade100, // 「つまみ」より右側の色
                  thumbColor: Colors.orange, // 「つまみ」の色
                ),
              ],
            ),

30行目で<code>Slider</code>を配置しています。 <code>value:</code>には<code>Slider</code>とリンクさせる変数を指定します。 今回は<code>_sliderValue</code>としました。 この変数の中身がユーザーの操作に応じて変化します。 ユーザーがスライダーのつまみを動かす度に34行目の<code>onChanged:</code>が実行されます。 そこで<code>_sliderValue</code>に操作後の値を設定し更新しているわけですね。 <code>setState</code>で囲むのを忘れないようにしましょう。 <code>min:</code>と<code>max:</code>には<code>Slider</code>が取り得る値の最小値と最大値を指定しておきます。 また、<code>Slider</code>の色味を変更することが可能です。 39行目から始まる3種類の配色設定を調整することでお好みの色味に変えることが可能です。

さて、ここまでの設定だとSliderはかなり細かい単位まで調整可能な状態ですがアプリによってはそこまで細かく調整できるとかえって都合が悪いことがあります。 決まった単位(たとえば5ずつ増減できる)で<code>Slider</code>を操作するにはどうするかというと<code>divisions:</code>というプロパティを指定します。 以下のようにすると、スライダー全体を5で割った単位でのみスライドできるようになります。 <code>max:</code>が60なので、ひとつメモリで12ずつ変わっていくことになりますね。 <code>label:</code>を指定すると、スライダーがドラッグしている間、ラベルが出現します。以下のように<code>_sliderValue</code>の値を入れておくと、現在の値が吹き出しとして出現し、ゆーざーからすると値が確認しやすくていいですね。<pre><code>value: _sliderValue,
min: 0,
max: 60,
divisions: 5,
label: '$_sliderValue',</code></pre><code>divisions:</code>を使ったパターンも以下のDartPadに掲載してみました。 最小値の<code>min:</code>を0ではなくて5から始まるようにする試みも入れています。 その場合は<code>divisions:</code>の指定に少し工夫が必要です。 まず、(60 ~/ 5)としているのはSliderのつまみを5ずつ動かすようにするためです。 この時点で全部で12に分かれることになりますが、最小値が0ではなくて、5から始まるため1を引いて(60 ~/ 5) - 1としています。

スライダー(Slider)を使う

Flutterでプログレスバーを使うには<code>LinearProgressIndicator</code>を使用します。 プログレスバーを使うと進捗状況をユーザーにわかりやすい形で表現することができます。 時間がかかる処理を進めているときや項目が多いフォームをユーザーが入力しているときなどに利用するとよいでしょう。 今回はボタンを押すことで進捗が進んでいくようにサンプルを作りました。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

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

class _MyAppState extends State<MyApp> {
 double _progressValue = 0;

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 appBar: AppBar(
 title: const Text('サンプル'),
 ),
 body: Center(
 child: Padding(
 padding: const EdgeInsets.all(20.0),
 child: ClipRRect(
 borderRadius: const BorderRadius.all(Radius.circular(30)),
 child: LinearProgressIndicator(
 value: _progressValue,
 minHeight: 40,
 backgroundColor: Colors.grey,
 color: Colors.green.shade800,
 ),
 ),
 ),
 ),
 floatingActionButton: FloatingActionButton(
 child: const Icon(Icons.play_arrow),
 onPressed: () {
 setState(() {
 if (_progressValue == 1.0) {
 _progressValue = 0;
 } else {
 _progressValue += 0.2;
 }
 });
 },
 ),
 ),
 );
 }
}

「進捗」という状態を保持する必要があるため、StatefullWidgetを使用しています。 LinearProgressIndicatorを使っている部分、以下のコードを見てください。

            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(30)),
              child: LinearProgressIndicator(
                value: _progressValue,
                minHeight: 40,
                backgroundColor: Colors.grey,
                color: Colors.green.shade800,
              ),
            ),

28行目でLinearProgressIndicatorを使用しています。 value:に進捗状況を設定します。これは0.0から1.0の間で設定します。 1.0は100%ですね。 今回は_progressValueという変数を設定し、この変数の中身をボタンを押した時に変更するようにしています。 他にもminHeight:やbackgroundColor:、color:で見た目の変更をしています。 たとえば、80%まで進んだら色を変えるみたいなことも可能ですね。 26行目のようにClipRRectで囲むことでプログレスバーを角丸にしています。 これをしないときは、ただの長方形としてプログレスバーが表示されます。 ボタンを押したときの処理も確認しましょう。 以下のコードを見てください。

        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.play_arrow),
          onPressed: () {
            setState(() {
              if (_progressValue == 1.0) {
                _progressValue = 0;
              } else {
                _progressValue += 0.2;
              }
            });
          },
        ),

floatingActionButtonに設定したボタンを押すことで_progressValueの中身を変更するようにしています。 41行目で分岐を入れて、すでに100%に達しているときは0に戻すようにしています。 意外と簡単にできてしまいました。 見た目の変更も簡単にできてしまうので便利に使えると思います。

もうひとつ、ボタンを押すと徐々に進捗が伸びていくパターンも作ってみました。 タイマーアプリなんかで役に立ちそうです。

プログレスバーを使う(LinearProgressIndicator)

Flutterで角が丸い四角形を作るときは<code>Container</code>を利用します。 以下のコードを見てください。

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(16.0),
  ),
),

<code>decoration:</code>に<code>BoxDecoration</code>を設定し、その中に<code>Container</code>の見た目に関する設定を追加しています。 <code>borderRadius:</code>が角丸の設定ですね。 <code>BorderRadius.circular(16.0)</code> としていますが、この16.0を変えることで丸みの度合いを調節することができます。 ちなみに<code>decoration:</code>を使用したときは装飾に関する設定はすべて<code>decoration:</code>の中に書かないと動きません。 <code>color:</code>は本来<code>Container</code>配下でも設定可能ですが、<code>decoration:</code>を指定しているときはそちらに書かないと動作しなくなってしまうようです。

角丸の四角形を作る方法

Flutterで四角形の枠を作りたいときは<code>Container</code>を利用することで実現可能です。 以下のコードを見てください。

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: const Color(0x00000000),
    border: Border.all(
      color: Colors.blue,
      width: 10.0,
    ),
    borderRadius: BorderRadius.circular(32.0),
  ),
),

<code>decoration:</code>に<code>BoxDecoration</code>を設定し、その中に<code>Container</code>の見た目に関する設定を追加しています。 <code>border:</code>が枠線の設定です。 <code>Border.all</code> の中に<code>color:</code>で線の色、<code>width:</code>で線の幅を設定しています。 <code>color:</code>に透明色を指定することで塗りつぶしは無効にしています。 以下のサンプルで16行目の<code>親Container</code>に<code>color:</code>で薄い青色を設定しています。 この色が19行目の<code>Container</code>の枠内にも出ていることから透明になっているのがわかります。

四角形の枠を作る

AppBarのタイトルは途中で改行することが可能です。 以下のようにColumnで囲んであげましょう。 ついでに部分的にTextStyleとかを変更することも可能です。

AppBar(title: Column(
          children: [
            Text(
              '1行目のタイトル',
              style: const TextStyle(
                color: Colors.red,
                fontSize: 14.0,
              ),
            ),
            Text(
              '2行目のタイトル',
              style: const TextStyle(
                color: Colors.white,
              ),
            ),
          ],
      ),
    );

タイトルの中で改行とか、無理なんじゃないかと変な先入観をもっていたのですがやってみたら意外とすんなりとできました！

AppBarのタイトルを複数行で表示する

Flutterでは<code>TimePicker</code>を呼び出すことで簡単に時刻設定機能を導入することが可能です。 早速試してみましょう。サンプルコードはこちらです。

import 'package:flutter/material.dart';

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

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

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

class _MyAppState extends State<MyApp> {
 TimeOfDay? _selectedTime;

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 title: 'Flutter Demo',
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 home: Builder(builder: (context) {
 return Scaffold(
 body: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 _selectedTime == null
 ? const Text(
 '時間を選択してください',
 style: TextStyle(fontSize: 30.0),
 )
 : Text(
 '${_selectedTime!.hour.toString()}:${_selectedTime!.minute.toString()}',
 style: const TextStyle(fontSize: 40.0),
 ),
 const SizedBox(
 height: 40.0,
 ),
 ElevatedButton(
 onPressed: () {
 _selectTime(context);
 },
 child: const Text(
 '選択する',
 style: TextStyle(fontSize: 30.0),
 ),
 )
 ],
 ),
 ),
 );
 }));
 }

 Future _selectTime(BuildContext context) async {
 final int selectedHour = _selectedTime?.hour ?? 9;
 final int selectedMinute = _selectedTime?.minute ?? 30;
 final initialTime = TimeOfDay(hour: selectedHour, minute: selectedMinute);

 final time = await showTimePicker(
 context: context,
 initialTime: initialTime,
 );

 if (time != null) {
 setState(() => _selectedTime = time);
 } else {
 return;
 }
 }
}

アプリを起動して、「選択する」ボタンを押すと<code>TimePicker</code>が出現します。 そこで任意の時刻を設定して「OK」を押すと、<code>TimePicker</code>が閉じてテキスト部分に選択した時刻が反映されるようにしています。 <a href="https://flutter-gogo.dev/images/figures/timepicker.png" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/3ddec71405354130af4492990b0a91f3/timepicker.png?w=600&amp;h=315" alt="TimePickerのサンプル"></a> 今回、選択した時刻を状態として保持しておきたいため、<code>StateFullWidget</code>の中に<code>TimePicker</code>に関連するコードを書いています。 以下のように15行目で状態保持用の変数を設定しています。

class _MyAppState extends State<MyApp> {
 TimeOfDay? _selectedTime;

 @override
 Widget build(BuildContext context) {

<code>TimeOfDay</code>はFlutter標準、時刻用の型です。 この<code>_selectedTime</code>にユーザーが選択した時刻情報を保持するようにします。 ボタンを押した時のコードを見ていきましょう。 以下のコードを見てください。

                  ElevatedButton(
                    onPressed: () {
                      _selectTime(context);
                    },
                    child: const Text(
                      '選択する',
                      style: TextStyle(fontSize: 30.0),
                    ),
                  )

<code>onPressed:</code>にボタンを押した時の処理を書いています。 今回は<code>_selectTime</code>ひとつだけです。このメソッドは<code>lib/main.dart</code>の下部で定義しています。 以下のコードを見てください。

  Future _selectTime(BuildContext context) async {
    final int selectedHour = _selectedTime?.hour ?? 9;
    final int selectedMinute = _selectedTime?.minute ?? 30;
    final initialTime = TimeOfDay(hour: selectedHour, minute: selectedMinute);

    final time = await showTimePicker(
      context: context,
      initialTime: initialTime,
    );

    if (time != null) {
      setState(() => _selectedTime = time);
    } else {
      return;
    }
  }

この59行目から始まるメソッドが今回の心臓部ですね。 64行目で<code>showTimePicker</code>を実行しています。ここを通ると<code>TimePicker</code>が画面に出現します。 今回引数には<code>initialTime</code>を設定しています。ここには最初に<code>TimePicker</code>上で選択している時刻を指定します。 60行目、61行目でやっているようにもし<code>_selectedTime</code>にすでに時刻が設定されている(= 以前に選択している)場合はそちらを初期表示に使用しています。もし<code>_selectedTime</code>に何も設定されていないときはデフォルト値として09:30の値が設定されるようにしています。 そして<code>TimePicker</code>が閉じられると69行目以降の処理が走り出します。 ここで「OK」ボタンをユーザーが押したときは<code>time</code>の変数に新しく選択した時刻情報が格納されています。 これを70行目のように<code>_selectedTime</code>に設定しています。 一方でキャンセルボタンを押したなどで何も変更がなかったときは何もせずに<code>return</code>で終了していることがわかります。 こうして得られた時刻は文字列として画面に表示されます。 少し上に戻ります。以下のコードを見てください。

              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  _selectedTime == null
                      ? const Text(
                          '時間を選択してください',
                          style: TextStyle(fontSize: 30.0),
                        )
                      : Text(
                          '${_selectedTime!.hour.toString()}:${_selectedTime!.minute.toString()}',
                          style: const TextStyle(fontSize: 40.0),
                        ),

31行目で<code>_selectedTime</code>の値の有無を基準にして表示内容を切り分けしています。 <code>TimePicker</code>で時刻が設定された後は、36行目以降が有効になります。 ここでは<code>_selectedTime</code>の情報を文字列として展開しています。 <code>DropdownButton</code>などを使って自力で時刻設定用のUIを作ることもできますが結構手間がかかります。 思わぬ不具合も発生することも考慮すると、既にある部品を採用することを考えてみてもいいかもしれません。

TimePickerで時刻設定する

iOSの実機でFlutterのアプリをデバッグするときはXCodeで設定を変更しておく必要があります。 まず、Flutterのプロジェクト内にある<code>ios/Runner.xcworkspace</code>を開きます。 <a href="https://flutter-gogo.dev/images/ios_debug1.png" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/783b7784da114768b129286443e59458/4618cb7ad4f0cfbd4d6d6ab7cc9069fb.png?w=600&amp;h=402" alt="ios/Runner.xcworkspaceを開きます"></a> その後、左側の「Runner」&gt;「TARGETS配下のRunner」&gt; 「Signing &amp; Capabilities」を選択します。 「Team」のところにご自身のデベロッパーアカウントを設定してください。 あとはXCodeは閉じて大丈夫です。 <a href="https://flutter-gogo.dev/images/ios_debug2.png" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/1511390ee74b4ade9dff19d7722277f0/f973da6965a48d2c6d4ce7d2507ec8ef.png?w=600&amp;h=228" alt="Teamをご自身のAppleアカウントにしてください"></a> これでiPhoneなどをMacに接続してビルドすると実機でデバッグが可能になります。 以下はAndroid Studioの例ですが、起動させる端末を選択してビルドを押せばOKです。 <a href="https://flutter-gogo.dev/images/ios_debug3.png" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/2f6bbd4daf5748538840c38b7353c489/53a740ccfb744d395907d7fa75881dfb.png?w=1022&amp;h=372" alt=""></a> Androidと比べるとちょっと面倒ですが、iOSの実機でデバッグしたい場合はプロジェクトごとに毎回一回はやらないといけないみたいですね。

デバッグ

iOSの実機でデバッグする

ユーザーが別のアプリに切り替えたときや、切り替えてまた戻ってきたときのイベントを捕捉して何か処理をしたいときがあります。 そのようなときは<code>didChangeAppLifecycleState</code>で<code>AppLifecycleState</code>を取得して状態をチェックするとよいです。 例を見ていきましょう。

import 'package:flutter/material.dart';

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

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

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

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
 @override
 void initState() {
 super.initState();
 WidgetsBinding.instance?.addObserver(this);
 }

 @override
 void dispose() {
 WidgetsBinding.instance?.removeObserver(this);
 super.dispose();
 }

 @override
 void didChangeAppLifecycleState(AppLifecycleState state) {
 print('state = $state');
 if (state == AppLifecycleState.inactive) {
 print('entered inactive!');
 } else if (state == AppLifecycleState.resumed) {
 print('entered resumed!');
 } else if (state == AppLifecycleState.paused) {
 print('entered paused!');
 } else if (state == AppLifecycleState.detached) {
 print('entered detached!');
 }
 }

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 title: 'アプリのライフサイクルを確認する',
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 home: const Scaffold(
 body: Center(
 child: Text('Hello!!'),
 ),
 ));
 }
}

まず、ライフサイクルイベントを受け取る準備をする必要があります。 以下のコードを見てください。

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
 @override
 void initState() {
 super.initState();
 WidgetsBinding.instance?.addObserver(this);
 }

 @override
 void dispose() {
 WidgetsBinding.instance?.removeObserver(this);
 super.dispose();
 }

14行目のクラスを定義するところで<code>WidgetsBindingObserver</code>を読み込みます。 あとは18行目のように<code>addObserver</code>メソッドを実行すればライフサイクルイベントを受け取るための準備が完了します。 また、インスタンスが破棄されたときには23行目のようにライフサイクルイベントを監視する設定も<code>removeObserber</code>メソッドで除去しておきましょう。 次はライフサイクルイベントを受け取るコードをみていきましょう。 以下のコードを見てください。

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print('state = $state');
    if (state == AppLifecycleState.inactive) {
      print('entered inactive!');
    } else if (state == AppLifecycleState.paused) {
      print('entered paused!');
    } else if (state == AppLifecycleState.detached) {
      print('entered detached!');
    } else if (state == AppLifecycleState.resumed) {
      print('entered resumed!');
    }
  }

27行目から始まる<code>didChangeAppLifecycleState</code>でアプリのライフサイクルイベントを受け取っています。 パラメーターとして<code>AppLifecycleState</code>の型を持つ<code>state</code>を取得できます。 この状態でアプリをビルドして非表示にしたり、復帰させたりするとデバッグコンソールにそれぞれのstateで指定した文字列が<code>print</code>で表示されます。<pre><code>flutter: state = AppLifecycleState.inactive
flutter: entered inactive!
flutter: state = AppLifecycleState.paused
flutter: entered paused!
flutter: state = AppLifecycleState.inactive
flutter: entered inactive!
flutter: state = AppLifecycleState.resumed
flutter: entered resumed!</code></pre><code>AppLifecycleState</code>の値をざっくり分類すると<code>inactive</code>, <code>paused</code>, <code>detached</code>の三つはアプリが非アクティブになったときに発生するイベントでresumedは非アクティブの状態からアクティブな状態に復帰した(= アプリがフォアグラウンドになった)ときに発生するイベントです。 <code>inactive</code>, <code>paused</code>, <code>detached</code>の分類は<a href="https://docs-flutter-io.firebaseapp.com/flutter/dart-ui/AppLifecycleState-class.html" target="_blank" rel="noopener noreferrer">オフィシャルのドキュメント</a>にも定義されてありますが私には正直なところ難しくてよくわかりませんでした。FlutterやiOS,Androidの仕組みを詳しく理解していないと、ドキュメントだけでは正確に把握することは難しそうです。 実機で動かしてみて発生したイベントを確認し、どのイベントに対応したコードを書くべきかを考えるのがよさそうです。

ライフサイクルイベントを取得する方法

audioplayersパッケージの<code>AudioCache</code>を使って音を鳴らすときに、iOSの場合はミュートにしていても音が鳴ってしまいます。 以下のように<code>isNotification: true</code>というオプションを設定することでミュート時は音が出なくなります。<pre><code>final AudioCache _audio = AudioCache();
_audio.play('good_sound.mp3', isNotification: true);</code></pre>最初、ミュートにしていて音が出たときはビックリしました。 ミュートを踏襲する方をデフォルトにしたほうが仕様的には理想のような気もしますね。

トラブル解消

iOSでミュート時にAudioCacheで音が出てしまう場合の対応

<code>Scaffold</code>の<code>appBar:</code>で指定する<code>AppBar</code>を他のコンポーネントとして切り出そうとして普通の<code>StatelessWidget</code>として作ったものを配置すると、以下のようなメッセージが出てきてビルドができません。 エラー文中の<code>OriginalAppBar</code>はこの記事で定義したコンポーネントです。<pre><code>A value of type 'OriginalAppBar' can't be assigned to a parameter of type 'PreferredSizeWidget?' in a const constructor</code></pre>この解消方法を紹介したいと思います。 まずはコード全体を掲載します。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const Scaffold(
          appBar: OriginalAppBar(),
          body: Center(
            child: Text('AppBarを別クラスに切り出すサンプル'),
          ),
        ));
  }
}

class OriginalAppBar extends StatelessWidget with PreferredSizeWidget {
  const OriginalAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(
        'これはオリジナルAppBarです',
        style: TextStyle(
          color: Colors.grey.shade900,
        ),
      ),
      backgroundColor: const Color(0xFFF9A825),
      centerTitle: true,
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

ポイントは二つあります。 <code>StatelessWidget</code>を継承するときに<code>with PreferredSizeWidget</code>を指定することと、<code>preferredSize</code>のゲッターをオーバーライドすることです。 ひとつひとつ見ていきましょう。 以下のコードを見てください。

class OriginalAppBar extends StatelessWidget with PreferredSizeWidget {
  const OriginalAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

27行目で<code>OriginalAppBar</code>のクラス定義が始まります。 ここで<code>StatelessWidget</code>を継承するときに<code>with PreferredSizeWidget</code>も指定します。 これは<code>AppBar</code>クラス自体でも同様に<code>PreferredSizeWidget</code>を<code>with</code>でMixinしていて、<code>Scaffold</code>が<code>AppBar</code>に該当するWidgetを受け取るには必須の設定になります。 そして、<code>PreferredSizeWidget</code>を読み込んだことで次の設定も必要になります。 コードを見ていきましょう。

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

<code>preferredSize</code>のゲッターを設定する必要があります。 お好みの高さを指定すればよいですが、デフォルトの高さを利用してしまうのがよさそうです。 <code>kToolbarHeight</code>はFlutterに最初から組み込まれている定数で、<code>AppBar</code>のデフォルトの高さになります。 これでAppBarを別のコンポーネントとして切り出すことができました。 定義部分を抜粋するとこんな感じです。

/// The height of the toolbar component of the [AppBar].
const double kToolbarHeight = 56.0;

/// The height of the bottom navigation bar.
const double kBottomNavigationBarHeight = 56.0;

/// The height of a tab bar containing text.
const double kTextTabBarHeight = kMinInteractiveDimension;

<code>AppBar</code>は比較的小さめのWidgetですが、アプリを作り込んでいくとコード量がだいぶ多くなってくると思います。 別のファイルに切り出して管理できるとコードがメンテしやすくなります。 <img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/38ca6162557f4719a433f692f6036d45/Screenshot_20220215-231830-2.png?w=400&amp;h=888" alt="AppBarを別のWidgetとして切り出す方法">

AppBarを別のWidgetに切り出す方法

アプリでタブを画面下部に配置したいケースはよくあることです。 しかし、Flutterが提供しているTabBarは上配置専用で下に移動させることができません。 今回は<code>BottomNavigationBar</code>を利用して下配置のタブ切り替えを実現する方法を紹介します。 まずはコード全体を掲載します。

import 'package:flutter/material.dart';

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

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

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 title: 'タブバー下配置を試す',
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 home: const TabBarScreen(),
 );
 }
}

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

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

class _TabBarScreenState extends State<TabBarScreen> {
 int _currentIndex = 0;

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: const Text('タブバー下配置のサンプル'),
 ),
 body: Center(
 child: Text(
 '$_currentIndex番目の画面',
 style: const TextStyle(fontSize: 40.0),
 ),
 ),
 bottomNavigationBar: BottomNavigationBar(
 items: const <BottomNavigationBarItem>[
 BottomNavigationBarItem(
 icon: Icon(Icons.home),
 label: 'ホーム',
 ),
 BottomNavigationBarItem(
 icon: Icon(Icons.access_time_sharp),
 label: '通知',
 ),
 BottomNavigationBarItem(
 icon: Icon(Icons.build),
 label: '設定',
 ),
 ],
 currentIndex: _currentIndex,
 selectedItemColor: Colors.blue,
 onTap: (index) {
 setState(() {
 _currentIndex = index;
 });
 print('$index番目の画面になりました');
 },
 ),
 );
 }
}

ひとつひとつポイントを見ていきましょう。 まず現在選択しているタブの番号を保持するために31行目で<code>_currentIndex</code>の変数を追加しています。 <code>_currentIndex = 0;</code>ということは一番左端のタブが初期表示されます。 次に下配置するタブのコードを見ていきましょう。 以下のコードを見てください。

bottomNavigationBar: BottomNavigationBar(
 items: const <BottomNavigationBarItem>[
 BottomNavigationBarItem(
 icon: Icon(Icons.home),
 label: 'ホーム',
 ),
 BottomNavigationBarItem(
 icon: Icon(Icons.access_time_sharp),
 label: '通知',
 ),
 BottomNavigationBarItem(
 icon: Icon(Icons.build),
 label: '設定',
 ),
 ],
 currentIndex: _currentIndex,
 selectedItemColor: Colors.blue,
 onTap: (index) {
 setState(() {
 _currentIndex = index;
 });
 print('$index番目の画面になりました');
 },
 ),

45行目の<code>bottomNavigationBar:</code>は<code>Scaffold</code>のパラメーターです。 ここに下配置のタブに関するコードを書いていいます。 まず、<code>BottomnavigationBar</code>でタブ切り替え用の領域全体を定義します。 その中で<code>items:</code>のパラメーターにタブごとの設定を追加しています。 タブは<code>BottomNavigationBarItem</code>が該当し、今回は3種類追加しています。 60行目の<code>currentIndex:</code>に表示するべきタブの番号を指定します。 ここに<code>_currentIndex</code>を設定することで<code>_currentIndex</code>の中身に追従してタブが切り替わってくれます。 では<code>_currentIndex</code>はどこで変更しているか、というと62行目の<code>onTap:</code>です。 ここでタップ時に受け取るindexのパラメーターにユーザーが今選択したタブの番号が入っています。 あとはその<code>index</code>の値を64行目で<code>_currentIndex</code>に設定しています。 ここで値が変わるとその内容が60行目の<code>currentIndex:</code>に伝わってタブが切り替わります。 少し戻りますが、タブごとの表示内容は以下のように切り替えしています。 次のコードを見てください。

      body: Center(
        child: Text(
          '$_currentIndex番目の画面',
          style: const TextStyle(fontSize: 40.0),
        ),
      ),

今回は簡単に文字列のみが切り替わるようにしています。 タブの切り替えに応じて41行目の文字列が変化します。 本来はここで、タブの番号ごとに画面を表示するためのWidgetがあって、それを適宜切り替える、といった処理を書くことになるでしょう。 <code>BottomnavigationBar</code>は下配置が可能ですが、そのまま実装するだけだとTabBarに比べるとアニメーションの演出が少し貧弱です。 リッチなアニメーションを実装したい場合は追加で工夫が必要ですね。 <img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/13ef625c41f94eab84461374feda1486/Screenshot_20220213-103916-2.png?w=400&amp;h=888" alt="タブバーを下配置にするときのサンプル">

BottomNavigationBarで下配置のタブを作る

タブ切り替えをStateful Widgetで実装する方法を紹介します。 Stateful Widgetの場合は<code>DefaultTabController</code>を使わなくてもタブ切り替えを実装することが可能です。 <code>DefaultTabController</code>を使ったケースは<a href="https://flutter-gogo.dev/posts/674879423963" target="_blank" rel="noopener noreferrer">こちら</a>をご覧ください。 まずはサンプルコードの全体をご覧ください。

import 'package:flutter/material.dart';

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

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

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 title: 'タブバーを試す',
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 home: const TabBarScreen(),
 );
 }
}

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

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

class _TabBarScreenState extends State<TabBarScreen>
 with TickerProviderStateMixin {
 late TabController _tabController;

 @override
 void initState() {
 super.initState();
 _tabController = TabController(length: 3, vsync: this);
 }

 @override
 void dispose() {
 _tabController.dispose();
 super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: const Text('タブバーのサンプル'),
 bottom: TabBar(
 controller: _tabController,
 tabs: const [
 Tab(
 icon: Icon(Icons.home),
 text: 'ホーム',
 ),
 Tab(
 icon: Icon(Icons.access_time_sharp),
 text: '通知',
 ),
 Tab(
 icon: Icon(Icons.build),
 text: '設定',
 ),
 ],
 onTap: (index) {
 print('$index番目の画面になりました');
 },
 ),
 ),
 body: TabBarView(
 controller: _tabController,
 children: const [
 Center(
 child: Text(
 'ホーム画面',
 style: TextStyle(fontSize: 40.0),
 ),
 ),
 Center(
 child: Text(
 '通知画面',
 style: TextStyle(fontSize: 40.0),
 ),
 ),
 Center(
 child: Text(
 '設定画面',
 style: TextStyle(fontSize: 40.0),
 ),
 ),
 ],
 ),
 );
 }
}

ひとつひとつポイントを見ていきましょう。 以下の30行目からはじまる<code>_TabBarScreenState</code>のコードを見てください。

class _TabBarScreenState extends State<TabBarScreen>
 with TickerProviderStateMixin {
 late TabController _tabController;

 @override
 void initState() {
 super.initState();
 _tabController = TabController(length: 3, vsync: this);
 }

32行目のところで<code>TabConrtoller</code>の変数を保持しています。 この<code>_tabController</code>がタブの切り替えを制御するクラスです。 Stateless Widgetのケースで使用していた<code>DefaultController</code>の代わりに必要になります。 37行目のように<code>initState</code>の中で<code>TabController</code>の実体を作成しています。 このとき、<code>length:</code>で必要なタブの数を指定します。 この37行目のコードを書くのに必要なのが、31行目で指定している<code>TickerProviderStateMixin</code>です。 タブの切り替え時にアニメーションの演出が入りますが、そのために必要なパラメーターです。 <code>TabController</code>は内部で<code>AnimationController</code>を使用していて、<code>vsync:</code>にアニメーションを動作させるクラスのインスタンスを指定してあげます。この場合は<code>this</code> = <code>_TabBarScreenState</code>ですね。 あとは、タブの具体的な準備です。 以下のコードを見てください。

      appBar: AppBar(
        title: const Text('タブバーのサンプル'),
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(
              icon: Icon(Icons.home),
              text: 'ホーム',
            ),
            Tab(
              icon: Icon(Icons.access_time_sharp),
              text: '通知',
            ),
            Tab(
              icon: Icon(Icons.build),
              text: '設定',
            ),
          ],
          onTap: (index) {
            print('$index番目の画面になりました');
          },
        ),
      ),

<code>AppBar</code>の<code>bottom:</code>の部分にタブバーの具体的な設定を書いていきます。 52行目で<code>_tabController</code>を指定することで、<code>DefaultTabController</code>を使わずにタブ切り替えを実現できます。 また、67行目のように<code>onTap:</code>でタブを切り替えたときのイベントを受け取ることが可能です。 <code>index</code>には切り替え後のタブ番号が設定されてきます。 タブごとの内容表示も必要です。 以下のコードを見てください。

      body: TabBarView(
        controller: _tabController,
        children: const [
          Center(
            child: Text(
              'ホーム画面',
              style: TextStyle(fontSize: 40.0),
            ),
          ),
          Center(
            child: Text(
              '通知画面',
              style: TextStyle(fontSize: 40.0),
            ),
          ),
          Center(
            child: Text(
              '設定画面',
              style: TextStyle(fontSize: 40.0),
            ),
          ),
        ],
      ),

ここでも73行目で<code>_tabController</code>を指定しています。 <code>children:</code>にはタブごとの表示内容を設定します。 今回はサンプルなので、<code>Center</code>と<code>Text</code>のシンプルな内容ですが、 実際にはかなり複雑化すると思います。 タブごとに別のWidgetとして切り出して読み込む形にするのが現実的です。 <code>DefaultTabController</code>を使うパターンよりもコードのネストが1階層減るため見やすくなるのも利点だと思います。 Flutterのコードはただでさえネストが激しくなりがちなので・・ <img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/bbfae5dfb475467c9efb1c824808cc61/Screenshot_20220209-223828-2.png?w=400&amp;h=888" alt="タブバーのサンプル">

StatefullWidgetでタブ切り替えをする

アプリを作っているとタブで画面を切り替える構成にしたい、というのはよくあります。 FlutterはTabBarやTabBarViewを使うことで簡単に実装できます。 このページではStatelessWidgetで実装するパターンを紹介します。 まずはサンプルコードをまるっと掲載します。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'タブバーを試す',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TabBarScreen(),
    );
  }
}

class TabBarScreen extends StatelessWidget {
  const TabBarScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('タブバーのサンプル'),
          bottom: const TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.home),
                text: 'ホーム',
              ),
              Tab(
                icon: Icon(Icons.access_time_sharp),
                text: '通知',
              ),
              Tab(
                icon: Icon(Icons.build),
                text: '設定',
              ),
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            Center(
              child: Text('ホーム画面'),
            ),
            Center(
              child: Text('通知画面'),
            ),
            Center(
              child: Text('設定画面'),
            ),
          ],
        ),
      ),
    );
  }
}

ひとつひとつポイントを見ていきましょう。 まず、最初に28行目のように<code>DefaultTabController</code>で囲んであげます。 <code>initialIndex:</code>で初期表示するタブの番号を指定します。 タブの番号は1から始まります。 <code>length:</code>にはタブの合計数を指定します。

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,

次はタブメニューの部分です。 以下のコードを見てください。

      child: Scaffold(
        appBar: AppBar(
          title: const Text('タブバーのサンプル'),
          bottom: const TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.home),
                text: 'ホーム',
              ),
              Tab(
                icon: Icon(Icons.access_time_sharp),
                text: '通知',
              ),
              Tab(
                icon: Icon(Icons.build),
                text: '設定',
              ),
            ],
          ),
        ),

32行目からはじまる<code>AppBar</code>の<code>bottom:</code>にTabBar Widget を設定しています。 その中の<code>tabs:</code>にTab Widgetを必要な数だけ追加しています。 Tabには<code>icon:</code>と<code>text:</code>でラベルを指定します。どちらか一方でも大丈夫です。 そして、タブで切り替えて表示する中身の部分は <code>TabBarView</code>を使います。 以下のコードを見てください。

        body: const TabBarView(
          children: [
            Center(
              child: Text('ホーム画面'),
            ),
            Center(
              child: Text('通知画面'),
            ),
            Center(
              child: Text('設定画面'),
            ),
          ],
        ),

51行目で<code>body:</code>に<code>TabBarView</code>を設定しています。 その中の<code>children:</code>にタブで切り替えたときに画面を配置していくことになります。 サンプルはシンプルに<code>Center</code>と<code>Text</code>しかありませんが、 ここはアプリごとにぐんぐん変わってくるところですね。 タブを押したときのイベントをコードで受け取りたいような場合は このようにStatelessWidgetで組み上げてしまう方が簡単です。 <img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/bbfae5dfb475467c9efb1c824808cc61/Screenshot_20220209-223828-2.png?w=400&amp;h=888" alt="タブバーのサンプル">

StatelessWidgetでタブ切り替えをする

FlutterのWidgetでは<code>color:</code>や<code>backgroundcolor:</code>で色を指定することが多いです。 よくあるのは<code>Colors.indigo</code>みたいにあらかじめ備わっている定数で設定するパターンですが HTMLのCSSでよくやるように16進で指定することも可能です。 むしろ16進で指定したくなることの方が多いかもしれません。 やり方は以下のように<code>0x</code>をつけて16進のコードを指定するだけです。<pre><code>Color(0xFF3F51B5)</code></pre>最初のFFは透明度の設定で、FFは透過なし。00は透明で見えなくなります。 そのあとにお決まりの16進のコードを書けばOKです。 小文字でも大文字でも大丈夫でした。 サンプルコードは以下です。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          backgroundColor: const Color(0xFFDFF1F0),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                SampleText(
                  text: '16進で設定した場合',
                  color: Color(0xFF3F51B5),
                ),
                SampleText(
                  text: '16進 少し透明にする',
                  color: Color(0x553F51B5),
                ),
                SampleText(
                  text: 'RGBで設定した場合',
                  color: Color.fromRGBO(63, 81, 181, 1.0),
                ),
                SampleText(
                  text: '定数で設定した場合',
                  color: Colors.indigo,
                ),
              ],
            ),
          ),
        ));
  }
}

class SampleText extends StatelessWidget {
  const SampleText({Key? key, required this.text, required this.color})
      : super(key: key);

  final String text;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(
        color: color,
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
      ),
    );
  }
}

これをビルドするとこんな感じです！ 透明度も一緒に設定できるので、慣れてくると楽ですね。 HTMLもむしろこっちの書き方になってもいいのではと思えるくらいです。 <img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/b384f1764da44cb785bbf2b369e29772/Screenshot_20220205-173636.png?w=400&amp;h=888" alt="">

Color Widgetの色を16進で設定する方法

Flutterのアプリケーションをビルドすると 右上に「DEBUG」のラベルが自動で付与されます。 <img src="https://images.microcms-assets.io/assets/fb91009e59de42738ca86057c2507b2e/1326271979a942328b2754eeabefa9a6/e3a8d7b3af7880eca8e42e22002dd1db.png?w=600&amp;h=263" alt="右上のDEBUGラベルを消したい"> これを非表示にするには<code>MaterialApp</code>の設定に以下を追加すればOKです。 <code>debugShowCheckedModeBanner:</code>を<code>false</code>にします。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 以下の行を追加すればOK
      debugShowCheckedModeBanner: false,
      title: '素敵なアプリケーション',

DEBUGのラベルを付けていればテスト環境だと識別しやすいですが、 ちょうど画面上部のデザインや仕様を確認できない場合があります。 ケースバイケースで使い分けていくのがよさそうですね。

右上の「DEBUG」ラベルを非表示にする方法

アプリ開発の定番、TODOアプリをFlutterで作ってみましょう。 TODOアプリを作ってみることで、アプリ開発の基本を広く学習することができます。 状態管理にはRiverpodというパッケージを利用します。<h4 id="h5800f217c3">このレクチャーで学べること</h4><ul><li>データのCRUD(追加・参照・更新・削除)について一連の流れ</li><li>Riverpodの基本的な使い方</li><li>一覧(ListView)の使い方</li><li>一覧で並び替えをする方法(ReorderableListView)</li></ul>

Flutterの記事