🏄‍♂️

FlutterでListをループして、Widgetを記述したい

2022/01/27に公開

FlutterでListをループして、Widgetを記述する方法をまとめた。

実装

1. map()使うパターン

map()の返り値は、Iterable<String>なので.toList()してやる。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  static const moviesTitles = ['Inception', 'Heat', 'Spider Man'];
  
  
  Widget build(BuildContext context) {
    return Column(
      children: moviesTitles.map((title) => Tab(text: title)).toList(),
    );
  }
}

2. for()使うパターン

個人的には、for()使う方がすっきり書けて好き。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  static const moviesTitles = ['Inception', 'Heat', 'Spider Man'];
  
  
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (final moviesTitle in moviesTitles)
          Text(moviesTitle),
      ],
    );
  }
}

参考

https://stackoverflow.com/questions/49941361/dart-mapping-a-list-list-map
https://stackoverflow.com/questions/55039861/creating-a-list-of-widgets-from-map-with-keys-and-values

Discussion