Flutterでmapメソッドを使ってWidgetを生成してみた

Flutterでmapメソッドを使い、Widgetを生成できることがわかりましたので、この記事にソースコードを残しておこうと思います。

実際のソースコード

以下のソースコードでは、親戚の種類を配列の総数に応じ、ラジオボタンを生成する仕組みを作っていきます。

配列を定義

class Sample extends StatelessWidget {
  final List<String> _relativeType = [
    'おとうさん',
    'おかあさん',
    'おじいちゃん',
    'おばあちゃん',
    'おじさん',
    'おばさん',
  ];

  ...

ここでは、実際にラジオボタンとして生成したい文言を配列に格納しております。

配列をmapメソッドで取り出す

  ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                alignment: Alignment.topLeft,
                margin: const EdgeInsets.only(top: 81, left: 35, right: 35),
                child: const Text(
                  '親戚一覧',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontSize: 24,
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 80, left: 50, right: 50),
                child: Column(
                  children: _relativeType.map((String e) =>
                    ListTile(
                      title: Text(
                        e,
                        style: const TextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: 21,
                        ),
                      ),
                      leading: Radio(
                        value: e,
                        groupValue: _relatedWithChild,
                        onChanged: (String value) => setState(() { _relatedWithChild = value; }),
                      ),
                    )
                  ).toList(),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  ...

ここでは主に中間あたりのコードを見てほしいのですが、先ほど定義した配列に対して、mapメソッドを使っており、
配列ごとに文言と値の異なるラジオボタンを生成しております。

これでFlutterでmapメソッドを使い、Widgetを複数生成することができました。

全体のソースコード

下記に、今回の全体ソースコードを記述させていただきます。

class Sample extends StatelessWidget {
  final List<String> _relativeType = [
    'おとうさん',
    'おかあさん',
    'おじいちゃん',
    'おばあちゃん',
    'おじさん',
    'おばさん',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                alignment: Alignment.topLeft,
                margin: const EdgeInsets.only(top: 81, left: 35, right: 35),
                child: const Text(
                  '親戚一覧',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontSize: 24,
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 80, left: 50, right: 50),
                child: Column(
                  children: _relativeType.map((String e) =>
                    ListTile(
                      title: Text(
                        e,
                        style: const TextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: 21,
                        ),
                      ),
                      leading: Radio(
                        value: e,
                        groupValue: _relatedWithChild,
                        onChanged: (String value) => setState(() { _relatedWithChild = value; }),
                      ),
                    )
                  ).toList(),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}