Flutterラボ リリース3周年記念! プロコースが1ヶ月の料金で2ヶ月間受けられる、実質半額セール (2024年3月17日まで・先着)

Flutterラボの

プレミアム会員になる

【Flutter】map() & toList()メソッドを使用して、Widgetを表示する

2020.12.25


変数宣言

List<String> list = ['Apple', 'Banana', 'Grape'];

この3つのStringを使用して動的にWidgetをしてリスト表示してみましょう。

ループ文を使用して表示する

List<Widget> buildItems(){
   List<Widget> items = [];
   
   list.forEach((String text){
     items.add(Text(text));
   });
   
   return items;
 }

メソッドを呼び出す

Column(
           children: buildItems()),
),


これだとループ文を使用するかつ、メソッド化しているのでコード量が多くなってしまいます。上記のコードを一行で完了させましょう。


mapメソッドを使用する​

Column(children: list.map((String item) => Text(item)).toList())

これだと一行で済みますね。

全コード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     debugShowCheckedModeBanner: false,
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: MyHomePage(title: 'toList() DEMO'),
   );
 }
}

class MyHomePage extends StatefulWidget {
 MyHomePage({Key key, this.title}) : super(key: key);

 final String title;

 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 List<String> list = ['Apple', 'Banana', 'Grape'];
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
           children: list.map((String item) => Text(item)).toList()),
     ),
   );
 }
}

スクリーンショット 2020-12-25 16.23.41

まとめ

このようにmapメソッドは様々な用途で使用できますので他にも紹介していきたいと思います。

Merry Christmas