【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/

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

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でも同じように出力させることができます。)

配列の中の値をとる

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

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);}

データ通信に必要なメソッド-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://flutternyumon.com/how-to-use-map/#isempty

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

fem