flutterでオシャレなToggleButtonsを作成する

こんにちは。

flutterにはToggleButtonsクラスが用意されており、トグルボタン自体は簡単に作れますが、UIを変更しようとするとなかなか難しかったです。こちらのサイトを参考に、見た目にオシャレなトグルボタンが作れるようになったのでご紹介したいと思います。ちなみにデフォルトはこんな感じです。

それをこんな感じにします。ポイントは横一列、縦一列にしか作成できないものを縦横に作成している点、両淵にしか角丸にできないものをそれぞれのボタンの間隔を開けて角丸にしている点です。InkWellとGridViewを使用してい実現しています。アイコンの周りのボーダーや色などはBoxDecorationを使用しています。

まずは、呼び出し元を作成します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import 'package:flutter/material.dart';
import '../baseappbar.dart';

class Home extends StatefulWidget {
  @override
  _SettingsState createState() => _SettingsState();
}

class _SettingsState extends State<Home> {

  List<bool> isSelected = [true, false, false, false, false, false];
  List<IconData> iconList = [
    Icons.ac_unit, Icons.call, Icons.cake,Icons.access_alarm, Icons.backspace, Icons.calendar_today,];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BaseAppBar(
        title: Text('Home'),
        appBar: AppBar(),
      ),
      body: iconContent()
    );
  }

18LでBaseAppBarという独自モジュールを利用していますが、それは前に記事にしたので、良かったら以下からどうぞ。

flutterで再利用可能なAppbarを作成する

22LでiconContent()でトグルボタン作成部を呼び出しているので、次の章で作成していきます。

トグルボタンの作成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
iconContent() {
  return Container(
    margin: EdgeInsets.only(top: 20, bottom: 20, left: 20, right: 20),
    height: double.infinity,
    width: double.infinity,
    child: Ink(
      color: Colors.white,
      child: GridView.count(
        primary: true,
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1,
        children: List.generate(isSelected.length, (index) {
          return InkWell(
            onTap: () {
              setState(() {
                isSelected[index] = !isSelected[index];
              });
            },
            child: Ink(
              decoration: BoxDecoration(
                color: isSelected[index] ? Colors.redAccent : Colors.white,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(
                  color: Colors.redAccent,
                  width: 3,
                )
              ),
              child: Icon(iconList[index],size:40,
                  color: isSelected[index] ? Colors.white : Colors.redAccent),
            )
          );
        }),
      ),
    ),
  );
}

10-13Lでボタンの大きさや要素間の間隔などを調整できます。このトグルボタンは複数選択可の状態にしてありますが、１つだけの選択状態にしたい場合は、17LのsetStateを変更します。変更方法はこちらの公式マニュアルを見てもらえばいいかと思います。

選択、非選択で色を反転させるようにしているので、「color: isSelected

\[index\]

? Colors.redAccent : Colors.white,」こんな感じで選択状態を確認しています。

Widget呼び出し元の作成

flutterで再利用可能なAppbarを作成する

トグルボタンの作成