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()),
),
);
}
}
まとめ
このようにmapメソッドは様々な用途で使用できますので他にも紹介していきたいと思います。
Merry Christmas
Flutterラボ
hatchoutschool
Flutter Daily
Flutterに関する記事を日々更新しています (222本)
![【Dart】Stringからint, double, DateTimeに変換する](https://assets.st-note.com/production/uploads/images/34579094/rectangle_large_type_2_57f8b9d22b8edd5dd7bcca6d883ef3fb.jpeg)
【Dart】Stringからint, double, DateTimeに変換する
2020.09.14
![【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ](https://assets.st-note.com/production/uploads/images/34640890/rectangle_large_type_2_9cd3518ec86a8d45eb0db093426082d1.jpeg)
【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18
![【Dart】【Flutter】DateTime型についてのまとめ](https://assets.st-note.com/production/uploads/images/35816882/rectangle_large_type_2_5d153bec6a1387e9a7cd068fa193bae4.jpeg)
【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01
![【Dart】Map型の使い方とよく使うメソッドまとめ](https://assets.st-note.com/production/uploads/images/34593663/rectangle_large_type_2_444b0971465392f471f0be9b1ce9b91b.jpeg)
【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13