flutter 從接口獲取json數據顯示到頁面

如題，在前端，是個很簡單的ajax請求，json的顯示，取值都很方便，換用dart以後，除了層層嵌套寫的有點略難受以外，還有對json的使用比js要麻煩

1. 能夠參照 flutter-go 先封裝一下get和post請求，net_utils.dart

2. 發起請求

import 'package:flutter/material.dart';
import 'package:app/api/main.dart';
import 'package:app/utils/net_utils.dart';
import 'package:fluttertoast/fluttertoast.dart';

class SearchPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SearchPageState();
  }
}

class _SearchPageState extends State<SearchPage> {
  TextEditingController _searchController = new TextEditingController();

  List _lists = [];
  List _histryLists = [];

  @override
  void initState() {
    super.initState();
    this._hotSearch(); // 這裏，在頁面初始化的時候請求列表接口
  }

  void _hotSearch() {

    NetUtils.get('http://localhost:3000/search').then((res) => {  // 這裏get後面是根據前面封裝的請求來寫的，自行替換url和參數
          // print( res['data'])
          setState(() {
            _lists = res['data']; // 把從接口獲取的列表賦值到_list
          })
        });
  }

  void updateSearch(String keyword) { 
      print(keyword); 
      setState(() {
        _searchController.text = keyword;  // 這個點擊搜索把值賦值到input搜索框的
      });
  }

  void _searchMusic(){  // 點擊搜索
    if(_searchController.text==''){
        Fluttertoast.showToast(
          msg: "關鍵詞不能爲空",
          gravity: ToastGravity.CENTER,
          timeInSecForIos: 1,
        );
    }else{
       NetUtils.get(Api.searchApi(), {"keywords":_searchController.text}).then((res) => {
          print(res['result']['songs'])
        });
    }
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextFormField(
          autofocus: true,
          controller: _searchController,
          style:TextStyle(color: Colors.white),
          decoration: InputDecoration.collapsed(
              hintText: "請輸入關鍵詞", 
              hintStyle: TextStyle(color: Colors.white70)),
        ),
        actions: <Widget>[
          //導航欄右側菜單
          IconButton(
              icon: Icon(Icons.search, color: Colors.white),
              onPressed: () {
                _searchMusic();
              }),
        ],
      ),
      body: Container(
          padding: EdgeInsets.all(20),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('歷史記錄'),
                  Icon(IconData(0xe662, fontFamily: 'iconfont')),
                ],
              ),
              SizedBox(
                  width: 350.0,
                  height: 50.0,
                  child: 
                  ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: _histryLists.length,
                    itemBuilder: (BuildContext context, int index) {
                      return GestureDetector(
                        child: Padding(
                          padding: EdgeInsets.all(5.0),
                          child: Chip(
                            label: Text(_histryLists[index]),
                          ),
                        ),
                        onTap: () => {
                          updateSearch(_histryLists[index])
                        },
                      );
                    },
                  )),
              Padding(
                padding: EdgeInsets.only(top: 30, bottom: 20),
                child: Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[Text('熱搜榜')],
                    ),
                    SizedBox(
                      height: 520.0,
                      child: ListView.builder(  // 這裏把從接口請求的列表數據展現到頁面上
                          shrinkWrap: true,
                          itemCount: _lists.length,
                          itemBuilder: (BuildContext context, int index) {
                            return GestureDetector(
                              child: Padding(
                                padding: EdgeInsets.all(10),
                                child: Flex(
                                  direction: Axis.horizontal,
                                  children: <Widget>[
                                    Expanded(
                                        flex: 1,
                                        child: Text(
                                          (index + 1).toString(), 
                                          style: TextStyle(
                                              color: Colors.red, fontSize: 18),
                                        )),
                                    Expanded(
                                      flex: 8,
                                      child: Column(
                                        children: <Widget>[
                                          Align(
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                                _lists[index]['searchWord'],
                                                style: TextStyle(
                                                    color: Colors.grey[900],
                                                    fontSize: 16)),
                                          ),
                                          Align(
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                                _lists[index]['content'],
                                                style: TextStyle(
                                                    color: Colors.grey[500])),
                                          ),
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              ),
                              onTap: () =>
                                  updateSearch(_lists[index]['searchWord']),
                            );
                          }),
                    )
                  ],
                ),
              )
            ],
          )),
    );
  }
}

更多詳細請看：https://github.com/leitingting08/NeteaseCloudMusicFlutter/blob/master/lib/pages/home/search.dart