Slackコミュニティに

無料で参加する

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

Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)