flutter jsonの取得・表示

flutterで、localのjsonを元にリスト表示したい時のリファレンスが少ないので投稿いたします。

pubspec.yml;

flutter:
   - assets/json/data.json

例えば下記のdata構造のjsonであるとする。

data.json

[
 {'name': 'namae1'},
 {'name': 'namae2'},
 {'name': 'namae3'},
 {'name': 'namae4'}
]

配列や入れ子に関して、注意が必要なのでこちらを参考にclass構築を行う。

data.dart

class DataList {
  final List<Hobby> datas;

  HobbyList({this.datas});

  factory DataList.fromJson(List<dynamic> json) {
    List<Hobby> datas = new List<Data>();
    datas = json.map((i) => Data.fromJson(i)).toList();

    return DataList(datas: datas);
  }
}

class Data {
  final String name;

  Data({this.name});

  Data.fromJson(Map<String, dynamic> json) 
    : name = json['name'];

  Map<String, dynamic> toJson() => {
    'name': name
  };
}

DefaultAssetBundleかrooBundleかは使い分けていく必要があるとのこと

hoge.dart

import 'package:hobbyapp/utils/data.dart';
import 'dart:convert';
~~
~~
class _Hoge extends State<Hoge> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder(
          future: DefaultAssetBundle.of(context).loadString('{path}/data.json'),
          builder: (context, snapshot) {
            var fugaMap = jsonDecode(snapshot.data);
            QuestList fugas = QuestList.fromJson(fugaMap);
            return ListView.builder(
              itemCount: fugas.datas.length,
              itemBuilder: (BuildContext context, int index) {
                return Text(fugas.datas[index].name);
              },
            );
          },
        )
      )
    );
  }