質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.79%

Dartでのmap?の記載方法

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 289

copp

score 11

実現したいこと

Dartでの記載方法が分からないので御教唆ください。

ここに質問の内容を詳しく書いてください。
現在、Flutter(dart)の勉強をしているのですが、
ソースコード body -> ListViewで
1.基本状態 を 2.省略状態 のように記載できると思うのですが
3.基本状態 を 2.のようにリスト部分を追加するだけで修正が可能にに
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Generated App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  var _number1 = {'one', 'two', 'three'};
  var _number2 = {'111': 'one', '222': 'two', '333': 'three'};

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('App Name'),
      ),
      body: Column(
        children: <Widget>[
          ListView(
            shrinkWrap: true,
            // 1. 基本状態
            /*
            children: <Widget>[
              Text('one'),
              Text('two'),
              Text('three'),
            ],
             */
            // 2. 省略状態 (↑で_number1 = {'one', 'two', 'three'};を定義している)
            /*
            children: _number1.map((String numString) {
              return Text(numString);
            }).toList(),
             */
            // 3. 基本状態
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('0'),      // indexから取得予定
                  Text('111'),    // {'111': 'one', '222': 'two', '333': 'three'}から取得予定
                  Text('one'),    // {'111': 'one', '222': 'two', '333': 'three'}から取得予定
                ],
              ),
              Row(
                children: <Widget>[
                  Text('1'),
                  Text('222'),
                  Text('two'),
                ],
              ),
              Row(
                children: <Widget>[
                  Text('2'),
                  Text('333'),
                  Text('three'),
                ],
              ),
              // 4. 省略状態 (↑で_number2 = {'111': 'one', '222': 'two', '333': 'three'};を定義している)
            ],
          ),
        ],
      ),
    );
  }
}

補足情報(FW/ツールのバージョンなど)

dart 2.7.0

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • popobot

    2020/02/19 20:09 編集

    質問はちゃんと書いましょう。

    「(例)PHP(CakePHP)で●●なシステムを作っています。」などの関係ない内容は消してください。

    キャンセル

  • copp

    2020/02/19 20:50

    大変申し訳ございません。
    きちんと記載したのですが1度目の投稿ボタンでは処理が上手くいかず、投稿ボタンを2回押したのが原因だと思われます。
    ただ2度目の投稿ボタンを押す際にさっとしか確認しなかったのが一番の問題なので、今後は注意したいと思います。
    中途半端になっている質問にも答えて頂きありがとうございました。

    キャンセル

回答 1

checkベストアンサー

+1

_number2.entries.map()を使って、MapEntryListに対してmap()すれば可能です。

以下は、keyvalueのみを表示した例です(indexなし)

          ListView(
            shrinkWrap: true,
            children: _number2.entries.map((MapEntry entry) {
              return Row(
                children: <Widget>[
                  Text(entry.key),
                  Text(entry.value),
                ],
              );
            }).toList(),
          ),

そもそも元々のデータはMapであってListではないのでindexがありません。

  var _number2 = {'111': 'one', '222': 'two', '333': 'three'};

もしどうしてもindexも表示したいなら、一旦、asMap()で以下のようなデータに変換した上で、処理すれば可能だと思います。
{0: {'111': 'one'}, 1: {'222': 'two'}, 2: {'333': 'three'}};

実際のコードです

          ListView(
            shrinkWrap: true,
            children:
                _number2.entries.toList().asMap().entries.map((MapEntry entry) {
              return Row(
                children: <Widget>[
                  Text(entry.key.toString()),
                  Text(entry.value.key),
                  Text(entry.value.value),
                ],
              );
            }).toList(),
          ),

一応、検証に使った動くコードも貼っておきます

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Generated App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  var _number2 = {'111': 'one', '222': 'two', '333': 'three'};

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('App Name'),
      ),
      body: Column(
        children: <Widget>[
          ListView(
            shrinkWrap: true,
            children: _number2.entries.map((MapEntry entry) {
              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Text(entry.key),
                  Text(entry.value),
                ],
              );
            }).toList(),
          ),
          ListView(
            shrinkWrap: true,
            children:
                _number2.entries.toList().asMap().entries.map((MapEntry entry) {
              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Text(entry.key.toString()),
                  Text(entry.value.key),
                  Text(entry.value.value),
                ],
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/19 20:40

    詳しいご返答ありがとうございます。
    entries、asMapやMapEntryなど知らない事が沢山あり、すごく勉強になります。

    本当にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る