flutter json_annotation和json_serializable處理json資料序列化

學富五車發表於2020-09-30
FlutterJSON

flutter json_annotation和json_serializable處理json資料序列化

  • 導包

dependencies:
  json_annotation: ^2.4.0
 
dev_dependencies:
  fluttertoast: ^2.0.3
  json_serializable: ^3.0.0
  build_runner: ^1.6.0

  • 建立Author實體類(舉例子,新建檔案author.dart)

  • author.dart

import 'package:json_annotation/json_annotation.dart';

part 'author.g.dart';

@JsonSerializable() //註解
class Author {
    String name;
    String title;
    int id;
    Author({this.name, this.title, this.id});

    factory Author.fromJson(Map<String, dynamic> json) => _$AuthorFromJson(json);

    Map<String, dynamic> toJson(Author instance) => _$AuthorToJson(instance);
}

效果圖:

 

這裡有幾點需要注意的

1、當我們初次建立Author.dart的時候，需要加入    part 'Author.g.dart';  雖然系統會提示報錯，但是不必緊張，這個我們一會生成Author.g.dart檔案所必須的條件，我們暫時不要管它報不報錯

2、在需要轉換的實體dart類前 加入@JsonSerializable()註解，表示需要json序列話處理

3、fromJson()  方法和 toJson（）方法的寫法是固定模式的，大家按模板修改就行

接下來我們就該見證奇蹟的發生了

我們cd到專案的根目錄，然後使用  flutter packages pub run build_runner build  這條指令去生成Author.g.dart檔案

修改圖如下:

然後我們就會在Author.dart的下面發現一個Author.g.dart檔案，到此結束，我們開始驗證是否有效

  • 編寫測試類

import 'package:flutter/material.dart';
import '../model/author.dart';


class NoticePage extends StatefulWidget{
    @override
    _NoticePageState createState() => _NoticePageState();
}

class _NoticePageState extends State<NoticePage>{
    void _getData() async {
        var obj = {"name":"whisky", "title":'阿發生的發生阿斯蒂芬暗示法按時', "id":2020};
        var c = Author.fromJson(obj);
        print("作者的名字是："+c.name);
        print("作者的名字是："+c.title);
        print('${c.id}');
        print('${c.id.runtimeType}');
        print(c);
    }

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

    @override
    Widget build(BuildContext context){
        final _main = Container(
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.all(30),
            child: Column(
                children: [
                    Text('notice')
                ],
            ),
        );
        return Scaffold(
            appBar: AppBar(
                centerTitle: true,
                title: Text('我的訊息',style: TextStyle(color: Colors.white)),
            ),
            body: _main,
        );
    }
}

列印結果:

 

 

測試完成,謝謝大家!!!

 

相關文章