【Flutter】MapをListに変換して、ListViewで表示する

image

Version

  • Flutter 2.8.1
  • Dart 2.14.4

はじめに

今回のコードはカウンターアプリをもとに新しいアプリを作る続きと関連しているので、よかったらそちらも参考にしてみてください。 初心者のうちは、Mapとは,Listとは何か、から始まって、Listから必要な要素を取り出す、Mapから必要なkeyやvalueを取り出す、MapをListに変換する、変換したものをListViewで表示する、等々なかなかスムーズにできないものです。 今回もカウンターアプリのコードを基本にMapデータをlistデータに変換してListViewウイジットで表示するという簡単なアプリを作ってみたので紹介します。

コード全文

まずはコード全文です

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  
  State<StatefulWidget> createState() {
    return ListState();
  }
}

class ListState extends State<MyHomePage> {
  Map<String, String> _japaneseMlbPlayers = {
    'Shohei Ohtani': 'Los Angeles Angels',
    'Yu Darvish': 'San Diego Padres',
    'Kenta Maeda': 'Minnesota Twins',
    'Shogo Akiyama': 'Cincinnati Reds',
    'Yoshi Tsutsugo': 'Pittsburgh Pirates',
    'test1': 'test1',
    'test2': 'test2',
  };
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter = (_counter + 1) % _japaneseMlbPlayers.length;
      print(_counter);
    });
  }

  
  Widget build(BuildContext context) {
    final listJmp = _japaneseMlbPlayers.entries
        .map((e) => JapaneseMlbPlayer(e.key, e.value))
        .toList();

    for (int i = 0; i < listJmp.length; i++) {
      print(listJmp[i].name);
      print(listJmp[i].team);
    }

    return Scaffold(
      appBar: AppBar(
        title: Text("Japanese MLB Player"),
      ),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: ListTile(
              title: _textWidget(listJmp, index, _counter, 'name'),
              subtitle: _textWidget(listJmp, index, _counter, 'team'),
            ),
          );
        },
        itemCount: _japaneseMlbPlayers.length,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class JapaneseMlbPlayer {
  String name;
  String team;

  JapaneseMlbPlayer(this.name, this.team);
}

Widget _textWidget(List list, int index, int counter, String key) {
  if (key == 'name') {
    return Text(
      list[index].name,
      style:
          index == counter ? TextStyle(color: Colors.blue, fontSize: 28) : null,
    );
  }
  if (key == 'team') {
    return Text(
      list[index].team,
      style:
          index == counter ? TextStyle(color: Colors.red, fontSize: 28) : null,
    );
  } else {
    return Text('nothing');
  }
}

コード解説

MapからList への変換

Listを入れるModelクラスとして、JapaneseMlbPlayerを用意します。 <Map型>.entries.map((e) => <Modelクラス>(e.key, e.value)).toList();で、Map からListに変換することができます。

  // リストを入れるModelクラス
  class JapaneseMlbPlayer {
  String name;
  String team;

  JapaneseMlbPlayer(this.name, this.team);
  }

  // Map => List
  final listJmp = _japaneseMlbPlayers.entries
      .map((e) => JapaneseMlbPlayer(e.key, e.value))
      .toList();

  // Listから要素を取り出す
  for (int i = 0; i < listJmp.length; i++) {
    print(listJmp[i].name);
    print(listJmp[i].team);
  }

ListTile表示用_textWidgetを作る

keynameが指定されたとき、teamが指定されたときで分岐させ、indexの値とcounterの値が同じときは、Textの色とサイズが変更される_textWidgetを作成。

Widget _textWidget(List list, int index, int counter, String key) {
  if (key == 'name') {
    return Text(
      list[index].name,
      style:
          index == counter ? TextStyle(color: Colors.blue, fontSize: 28) : null,
    );
  }
  if (key == 'team') {
    return Text(
      list[index].team,
      style:
          index == counter ? TextStyle(color: Colors.red, fontSize: 28) : null,
    );
  } else {
    return Text('nothing');
  }
}

ListTileに,nameteamを表示する

_textWidgetを使って、ListTiletitle:subtitle:nameteamを表示する。

child: ListTile(
        title: _textWidget(listJmp, index, _counter, 'name'),
        subtitle: _textWidget(listJmp, index, _counter, 'team'),
        ),

floatingActionButtonを押すと、Textの色とフォントサイズが順番に変化する

_incrementCounter()を定義し、floatingActionButtonが押されるごとに呼び出される。

  // Listの要素数に応じてカウントする関数
  void _incrementCounter() {
    setState(() {
      _counter = (_counter + 1) % _japaneseMlbPlayers.length;
      print(_counter);
    });
  }

  // ボタンを押すたびに_incrementCounterが呼出されるようにする。
  floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),


まとめ

以上簡単ですが、MapからListへ変換して表示するアプリでした。

参考:https://qiita.com/7_asupara/items/01c29c006556e89f5b17

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (96)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (4)新卒 (4)就活 (4)Dart (4)JavaScript (4)FlutterWeb (3)Prisma (3)NestJS (3)デザイン (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)VSCode (2)設計 (2)線型計画法 (2)事例 (2)画像 (2)Figma (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)アイコン (1)go_router (1)debug (1)Apple Store Connect (1)FlutterGen (1)Image (1)File (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)vscode (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More