[Flutter]Convert JSON into Object/Lists

Hidden comment

JSON Serializable使ってみた

JSONとは、オブジェクトを文字列にエンコードしたデータ形式
シリアライズとは、オブジェクトを同じ文字列に変換すること
jsonアノテーションライブラリが提供するアノテーションを元にモデルクラスを生成

user.dartと名付けたモデルクラスを作成

import 'package:json_annotation/json_annotation.dart';
part 'user.g.dart';

@JsonSerializable()
class User {
  String name, lastName, add;
  bool subscription;

  User({this.name,this.lastName,this.add,this.subscription,});

  factory User.fromJson(Map<String,dynamic> data) => _$UserFromJson(data);

  Map<String,dynamic> toJson() => _$UserToJson(this);

}

build_runner走らせるとuser.g.dart ファイルが生成される。

リスト項目が表示されるクラスを作成し、このリスト項目に対して、Text widgetにユーザーリストの項目を定義したfuture generatorのlist view generatorを定義

FutureBuilder<List<User>>(
    future: getData(),
    builder: (context, data) {
      if (data.connectionState != ConnectionState.waiting &&
          data.hasData) {
        var userList = data.data;
        return ListView.builder(
            itemCount: userList.length,
            itemBuilder: (context, index) {
              var userData = userList[index];
              return Container(
                height: 100,
                margin: EdgeInsets.only(top: 30, left: 20, right: 20),
                decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                ),
                padding: EdgeInsets.all(15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      'First Name: ' + userData.name,
                      style: TextStyle(
                          fontWeight: FontWeight.w600,),
                    ),
                  ],
                ),
              );
            });
      } else {
        return Center(
          child: CircularProgressIndicator(),
        );
      }
    })

full code


import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_json_serilization_exm/main.dart';
import 'package:flutter_json_serilization_exm/model/user.dart';

class JsonSerilization extends StatefulWidget {
  @override
  _JsonSerilizationState createState() => _JsonSerilizationState();
}

class _JsonSerilizationState extends State<JsonSerilization> {
  Future<List<User>> getData() async {
    return await Future.delayed(Duration(seconds: 2), () {
      List<dynamic> data = jsonDecode(JSON);
      List<User> users = data.map((data) => User.fromJson(data)).toList();
      return users;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Json Serialization Demo"),
      ),
      body: Container(
        child: FutureBuilder<List<User>>(
            future: getData(),
            builder: (context, data) {
              if (data.connectionState != ConnectionState.waiting &&
                  data.hasData) {
                var userList = data.data;
                return ListView.builder(
                    itemCount: userList.length,
                    itemBuilder: (context, index) {
                      var userData = userList[index];
                      return Container(
                        height: 100,
                        margin: EdgeInsets.only(top: 30, left: 20, right: 20),
                        decoration: BoxDecoration(
                          color: Colors.grey.shade200,
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),
                        padding: EdgeInsets.all(15),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            Text(
                              'First Name: ' + userData.name,
                              style: TextStyle(
                                  fontWeight: FontWeight.w600, fontSize: 15),
                            ),
                            Text(
                              'Last Name: ' + userData.lastName,
                              style: TextStyle(
                                  fontWeight: FontWeight.w600, fontSize: 15),
                            ),
                            Text(
                              'Add: ' + userData.add,
                              style: TextStyle(
                                  fontWeight: FontWeight.w600, fontSize: 15),
                            ),
                          ],
                        ),
                      );
                    });
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            }),
      ),
    );
  }
}

Tsuboi

JSON Serializable使ってみた

JSONとは、オブジェクトを文字列にエンコードしたデータ形式
シリアライズとは、オブジェクトを同じ文字列に変換すること
jsonアノテーションライブラリが提供するアノテーションを元にモデルクラスを生成

user.dartと名付けたモデルクラスを作成

import 'package:json_annotation/json_annotation.dart';
part 'user.g.dart';

@JsonSerializable()
class User {
  String name, lastName, add;
  bool subscription;

  User({this.name,this.lastName,this.add,this.subscription,});

  factory User.fromJson(Map<String,dynamic> data) => _$UserFromJson(data);

  Map<String,dynamic> toJson() => _$UserToJson(this);

}

build_runner走らせるとuser.g.dart ファイルが生成される。

リスト項目が表示されるクラスを作成し、このリスト項目に対して、Text widgetにユーザーリストの項目を定義したfuture generatorのlist view generatorを定義

FutureBuilder<List<User>>(
    future: getData(),
    builder: (context, data) {
      if (data.connectionState != ConnectionState.waiting &&
          data.hasData) {
        var userList = data.data;
        return ListView.builder(
            itemCount: userList.length,
            itemBuilder: (context, index) {
              var userData = userList[index];
              return Container(
                height: 100,
                margin: EdgeInsets.only(top: 30, left: 20, right: 20),
                decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                ),
                padding: EdgeInsets.all(15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      'First Name: ' + userData.name,
                      style: TextStyle(
                          fontWeight: FontWeight.w600,),
                    ),
                  ],
                ),
              );
            });
      } else {
        return Center(
          child: CircularProgressIndicator(),
        );
      }
    })

full code


import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_json_serilization_exm/main.dart';
import 'package:flutter_json_serilization_exm/model/user.dart';

class JsonSerilization extends StatefulWidget {
  @override
  _JsonSerilizationState createState() => _JsonSerilizationState();
}

class _JsonSerilizationState extends State<JsonSerilization> {
  Future<List<User>> getData() async {
    return await Future.delayed(Duration(seconds: 2), () {
      List<dynamic> data = jsonDecode(JSON);
      List<User> users = data.map((data) => User.fromJson(data)).toList();
      return users;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Json Serialization Demo"),
      ),
      body: Container(
        child: FutureBuilder<List<User>>(
            future: getData(),
            builder: (context, data) {
              if (data.connectionState != ConnectionState.waiting &&
                  data.hasData) {
                var userList = data.data;
                return ListView.builder(
                    itemCount: userList.length,
                    itemBuilder: (context, index) {
                      var userData = userList[index];
                      return Container(
                        height: 100,
                        margin: EdgeInsets.only(top: 30, left: 20, right: 20),
                        decoration: BoxDecoration(
                          color: Colors.grey.shade200,
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),
                        padding: EdgeInsets.all(15),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            Text(
                              'First Name: ' + userData.name,
                              style: TextStyle(
                                  fontWeight: FontWeight.w600, fontSize: 15),
                            ),
                            Text(
                              'Last Name: ' + userData.lastName,
                              style: TextStyle(
                                  fontWeight: FontWeight.w600, fontSize: 15),
                            ),
                            Text(
                              'Add: ' + userData.add,
                              style: TextStyle(
                                  fontWeight: FontWeight.w600, fontSize: 15),
                            ),
                          ],
                        ),
                      );
                    });
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            }),
      ),
    );
  }
}