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