code smith

開発で日々の生活をもっと楽しく

flutterのwidget内for-in文でindexを利用できるようにする

f:id:gaku3601:20220103151751p:plain Gakuです。
簡単なflutterのtipsを掲載します。

Widget内のfor文

Padding(
   padding: const EdgeInsets.only(left: 40),
   child: Column(
     children: [
        for (String value in stringList) Text(value),
     ],
   ),
), 

このようにfor文を使えばList内の値をforで列挙できて大変便利です。
ですが、この時に

Padding(
   padding: const EdgeInsets.only(left: 40),
   child: Column(
     children: [
        for ((int index, String value) in stringList) Text(value),
     ],
   ),
), 

みたいにindexも表示させたい場面があって、dartはこの構文が使えないのでいろいろ考えてみました。

拡張構文でListを拡張する

dartのExtension構文でListを拡張します。

import 'package:tuple/tuple.dart';

extension IterableExtension<T> on List<T> {
  List<Tuple2<int, T>> get withIndex {
    final list = <Tuple2<int, T>>[];
    asMap().forEach((index, element) {
      list.add(Tuple2(index, element));
    });
    return list;
  }
}

Tupleを利用するのが好きなので、tupleを利用していますが、classで代用しても良いです。
これを定義しておけば、こんな感じでitem1指定でindexをitem2指定で元の値を利用できるようになります。

Padding(
   padding: const EdgeInsets.only(left: 40),
   child: Column(
     children: [
        for (Tuple2<int, String> value in stringList.withIndex) 
          Row(children: [Text(value.item1), Text(value.item2)]),
     ],
   ),
), 

おわりに

dartのExtension構文でごりごり拡張できるので、不便だなと思った点はどんどん拡張しましょう。