flutterのwidget内for-in文でindexを利用できるようにする
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構文でごりごり拡張できるので、不便だなと思った点はどんどん拡張しましょう。