flutterで動的にウィジェットを作成する方法

こんにちは。

flutterで動的にウィジェットを作成する方法を説明します。他のサイトで見かけたのはボタンを押したら、リストビューにあるテキストボックスがどんどん増える、というものでした。私が今回紹介するのは、親子関係をもつアイコンを用意して、親の選択状態によって子のアイコンを切り替えるというニッチなものです。。

もしリストビューにあるテキストボックスがどんどん増えるものをお探しの場合はコチラのサイトへお進みください。

アイコン準備

最初に色々データを準備します。

 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import 'package:flutter/material.dart';
import '../baseappbar.dart';

class CategoryWidget {
  String text;
  Color color;
  IconData icon;

  CategoryWidget(
      this.text,
      this.color,
      this.icon,
      );
}

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

class _SettingsState extends State<Home> {

  List<CategoryWidget> categorylist = [];
  List<List<IconData>> allIconList = [];
  List<IconData> iconList = [];
  List<bool> isCateSelected = [];
  List<bool> isIconSelected = [];

  @override
  void initState() {
    super.initState();

    categorylist= [
      CategoryWidget('sentiment',Colors.redAccent,Icons.sentiment_satisfied),
      CategoryWidget('food',Colors.pinkAccent,Icons.restaurant_outlined),
      CategoryWidget('sports',Colors.purpleAccent,Icons.sports_soccer_outlined),
      CategoryWidget('hardware',Colors.deepPurpleAccent,Icons.smart_toy_outlined),
      CategoryWidget('vehicle',Colors.indigoAccent,Icons.directions_car_outlined),
    ];
    isCateSelected = List.generate(categorylist.length, (_) => false);
    isCateSelected[0] = true;

    allIconList = [
      [
        Icons.sentiment_satisfied_alt,
        Icons.sentiment_neutral_rounded,
        Icons.sentiment_very_dissatisfied,
        Icons.sentiment_very_dissatisfied_outlined,
        Icons.sentiment_very_satisfied_sharp,

      ],
      [
        Icons.cake_outlined,
        Icons.lunch_dining_outlined,
        Icons.local_cafe_outlined,
        Icons.ramen_dining_outlined,
      ],
      [
        Icons.sports_tennis_outlined,
        Icons.golf_course_outlined,
        Icons.sports_football_outlined,
        Icons.kayaking_outlined,
        Icons.downhill_skiing_outlined,
      ],
      [
        Icons.phone_iphone_outlined,
        Icons.computer_outlined,
        Icons.keyboard_outlined,
        Icons.headphones_outlined,
        Icons.mouse_outlined,
        Icons.watch_outlined,
      ],
      [
        Icons.directions_boat_filled_outlined,
        Icons.directions_subway_outlined,
        Icons.electric_bike_outlined,
      ],
    ];

    iconList = allIconList[0];
    isIconSelected = List.generate(allIconList[0].length, (_) => false);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BaseAppBar(
        title: Text('Home',style: TextStyle(color: Colors.black54)),
        appBar: AppBar(),
      ),
      body: categoryContent()
    );
  }

上部にある親アイコンは「categorylist」子アイコンは「allIconList」に持ちます。親と子はそれぞれListのインデックスで繋がってるものとします。親の選択状態は「isCateSelected」で管理します。ちなみに、親も子もToggleButtonsというWidgetを使用します。ToggleButtonsについては、公式マニュアルもしくは前回の記事を良かったらご覧ください。

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

categoryContent()部分は次の章で作成していきます。

body部分作成

上部部分はListViewで作成していきます。下部部分はGridViewで作成していきます。

 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
int selectCategory=0;
categoryContent() {
  return Container(
    margin: EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
    width: double.infinity,
    child: SingleChildScrollView(
    child:Column(children: <Widget>[
      Ink(
        height: 80,
        color: Colors.white,
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          itemCount: categorylist.length,
          shrinkWrap: true,
          separatorBuilder: (BuildContext context, int index) => const Divider(),
          itemBuilder: (context, index) {
            return Container(
              padding: EdgeInsets.only(left: 8, right: 8),
              child: InkWell(
                onTap: () {
                  setState(() {
                    selectCategory = index;
                    iconList = allIconList[index];
                    isIconSelected = List.generate(allIconList[index].length, (_) => false);
                    for (int buttonIndex = 0; buttonIndex < isCateSelected.length; buttonIndex++) {
                      if (buttonIndex == index) {
                        isCateSelected[buttonIndex] = true;
                      } else {
                        isCateSelected[buttonIndex] = false;
                      }
                    }
                  });
                },
              child: Ink(
                width: 70,
                decoration: BoxDecoration(
                    color: isCateSelected[index] ? categorylist[index].color : Colors.white,
                    // borderRadius: BorderRadius.circular(35),
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: categorylist[index].color,
                      width: 3,
                    )
                ),
                child: Icon(
                    categorylist[index].icon,
                  size:40,
                  color: isCateSelected[index] ? Colors.white : categorylist[index].color
                ),
              )
              ));
          }),
        ),
      Padding(
        padding: const EdgeInsets.all(20.0),
        child: Text(
            categorylist[selectCategory].text,
            style: TextStyle(
                color: Colors.grey[800],
                fontWeight: FontWeight.bold,
                fontSize: 40)
        )
      ),
      Container(
        margin: EdgeInsets.only(top: 20, bottom: 20, left: 20, right: 20),
        height: 200,
        width: double.infinity,
        child: Ink(
          color: Colors.white,
          child: GridView.count(
              primary: true,
              crossAxisCount: 3,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              childAspectRatio: 1,
              children:[
                ..._getIcons(),
              ]
          ),
        ),
      ),
    ]
    )
    )
  );
}

20Lで上部アイコンをonTapされたら、下部アイコンの情報iconListに設定します。isIconSelectedはトグルボタンの状態を全てfalseにしますが、保存したものを読み込むとかしないと実際には使えないですね。54LのPadding部分で上部アイコンが選択された時にそのアイコン名を表示させています。64LのContainer部分で下部アイコンを表示させます。77Lの_getIcons()でアイコンを用意します。

_getIcons()で先ほど作成したiconListでListを作成してreturnします。

 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
List<Widget> _getIcons(){
  List<Widget> iconsFieldsList = [];
  for(int index=0; index<iconList.length; index++){
    iconsFieldsList.add(
        InkWell(
            onTap: () {
              setState(() {
                isIconSelected[index] = !isIconSelected[index];
              });
            },
            child: Ink(
              decoration: BoxDecoration(
                  color: isIconSelected[index] ? categorylist[selectCategory].color : Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(
                    color: categorylist[selectCategory].color,
                    width: 3,
                  )
              ),
              child: Icon(iconList[index],size:40,
                  color: isIconSelected[index] ? Colors.white : categorylist[selectCategory].color),
            )
        )
    );
  }
  return iconsFieldsList;
}