【Flutter/Dart】Mapクラスの基本的な使い方/基礎から実践

最終更新日

FlutterをやっているとMapクラスを使用することになると思いますが、いまいち理解できそうになかったのでまとめました。

基礎から実践までサンプルがあります。動かない場合はコメントください。

動かすにはDartpadを使用してください。

Mapクラスとは

公式サイト

https://api.flutter.dev/flutter/dart-core/Map-class.html

Mapを使えば、value(データ)にkey(valueが格納される場所の名前)を紐付けて格納し、紐づけられたvalueを1つの固まり(コレクション)として操作できます。また収納したvalueを後で置き換えたり、追加したり、削除したりと自由にvalueを操作できます。

上のイラストは、3つのvalueがそれぞれkeyで紐づけられているMapをイメージしたものです。リンゴのイラスト(value)は、「リンゴ」のkeyで紐づけられています。よってMapから格納されたリンゴのイラストを取得するには「リンゴ」のkeyを使って取得します。

https://flutternyumon.com/how-to-use-map/

公式ページはこちらです。

注意

Mapに格納できる値の数は二つまでです。二つ以上格納しようとエラーになります。

Error: A set or map literal requires exactly one or two type arguments, respectivel

訳:

エラー。セットまたはマップリテラルは、それぞれ正確に1つまたは2つの型引数を必要とします。

List・Set・Mapの違い

List・Set・Mapの違いは下記の表のようになっています。

違い/型ListSetMap
宣言[]{}{}
要素重複要素を持てる重複要素を持てない重複要素を持てない
順序順序付きコレクションデフォルトは順序付きデフォルトは順序付き

基本の使い方

空のMapを定義

//基本的なMap
var Map名 = Map<キーの型, 値の型>();

//例型を宣言したMap
var fruit = <String, String>();

Mapに値を入れる

//基本的な宣言
var Map名 = {
  キー1: 値1,
  キー2: 値2,
  キー3: 値3,
};

//変数に入れる
var ages = {
  'Alex': 18,
  'Ben': 15,
  'Charlie': 25,
};

サンプル

基本的にMapクラスを使うときには、以下のようにvalue:keyとして変数に格納して保存します。

出力する際は、オブジェクトにアクセスしforchなどで全てを取り出し、printで出力することができます。(forでも同じように出力させることができます。)

サンプル②

値を一つづつ取り出す

値を一つづつ取り出すには、mapのキーを[]に指定します。

void main(){

Map<String, String> map = {
'name': 'alex',
'age': '20'
};
print(map['name']);
  }

//出力
//alex

配列の中の値をとる

このようにすればピンポイントで配列の値をとることができます。

void main(){
  var ages = {
  'Alex': 18,
  'Ben': 15,
  'Charlie': 25,
};
print(ages['Alex']);
  }

配列の中の値を書き換える

このようなすればピンポイントで配列の中の値を書き換えることができます。

void main(){
  var ages = {
  'Alex': 18,
  'Ben': 15,
  'Charlie': 25,
};

ages['Alex'] = 30;
print(ages['Alex']); 
  }

Mapのプロパティ

ちなみに、Mapを使うときにキーのみ、値のみを格納することはできません

空の値を格納したい場合はNullを指定してください。

isEnpty

このプロパティをつかえは変数の中に値が格納されているかどうかを確かめることができます。

void main(){
  Map<String, int> ages = {
  'Alex': 18,
  'Ben': 15,
  'Charlie': 25,
};
print(ages.isEmpty); 
  }

length

このプロパティを使えば変数に格納されている値の数を確かめることができます。

void main(){
  Map<String, int> ages = {
  'Alex': 18,
  'Ben': 15,
  'Charly': 25,
};
print(ages.length);
  }

Mapのメソッド

form

公式サイト

https://api.flutter.dev/flutter/dart-core/Map/Map.from.html

void main(){
  final planets = <num, String>{1: 'Mercury', 2: 'Venus', 3: 'Earth', 4: 'Mars'};
final mapFrom = Map<int, String>.from(planets);
print(mapFrom);
  }

addAll

基本マップに別のマップをくっつけます。出力時には両方の値が格納されています。

void main(){
  var ages = {
  'Alex': 18,
  'Ben': 15,
  'Charly': 25,
};

var Dakota = {'Dakota':24};

ages.addAll(Dakota);
print(ages);}
Mapを結合する

Mapを結合するには、

  1. addAll
  2. ..
addAll

先程のサンプルを参照してください。

..
//map1とmap2を結合した新しいMapを 
var merge = {}..addAll(map1)..addAll(map2);
 //map1とmap2を結合
var merge = {
    ...map1,
    ...map2,
}

https://www.choge-blog.com/programming/dartmapmerge/

結合するMapで同じキーが存在した場合は、後に追加された方のキーの値が優先されます。

データ通信に必要なメソッド-toJSON

通信をする際には、データをjson形式にしてやり取りする必要があります。

そこで使うのが、エンコード処理toJSONメソッドです。

公式サイトさ

https://api.flutter.dev/flutter/services/TextEditingValue/toJSON.html

使い方

型 toJson() => {名前つき引数:データ};

サンプル

Map<String, dynamic> toJSON() {
  return <String, dynamic>{
    'text': text,
    'selectionBase': selection.baseOffset,
    'selectionExtent': selection.extentOffset,
    'selectionAffinity': selection.affinity.toString(),
    'selectionIsDirectional': selection.isDirectional,
    'composingBase': composing.start,
    'composingExtent': composing.end,
  };
}
void main(){
print(Map);
}

実践

複数の戻り値を用意する

https://halzoblog.com/multiple-return/

注意まとめ

  • 値を入れない場合はnullを入れましょう
  • 検索をする際は型の順序が合うようにする
  • 統合する場合はキーが同じたと後から入れた値に上書きされてしまいます

参考

https://stackoverflow.com/questions/69504330/the-argument-type-void-functionmapstring-bool-cant-be-assigned-to-the-pa

https://flutternyumon.com/how-to-use-map/#isempty

Freepik – jp.freepik.com によって作成された map ベクトル