【记录】Flutter 引用本地 json 数据渲染页面

一、目录说明
1、assets 文件为顶级目录
2、在文件中引入 import 'dart:convert';

二、配置说明
1、在 pubspec.yaml 文件中的 flutter: 项下配置 assets: 静态文件。
Tips：这里要注意 - 是要有空格的，并且文件名字只能是 assets

三、使用，关键三步走
1、FutureBuilder
2、DefaultAssetBundle.of(context).loadString('assets/jsonData/index.json')
3、var data = json.decode(snapshot.data.toString());

// ignore: camel_case_types
class myApp extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:"列表",
      home: Scaffold(
        appBar: AppBar(title: Text('列表详情')),
        body: myList()
      ),
    );
  }
}

// ignore: camel_case_types
class myList extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return FutureBuilder(//1
      future:DefaultAssetBundle.of(context).loadString('assets/jsonData/index.json'),//2
      builder: (context,snapshot){
        var data = json.decode(snapshot.data.toString());//3
        List dataList = data['dataList'];//4
        return ListView.builder(
          itemCount: dataList.length,//5
          itemBuilder: (context,index){
            return Container(
              height: 500,
              child: Column(
                children: [
                  Text(
                    '${dataList[index]['name']}',//6 使用渲染每一项
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                      color: Colors.pink
                    ),
                  ),
                  Image.network(
                    '${dataList[index]['image']}',
                    width: 360,
                    height: 380,
                  )
                ],
              ),
            );
          },
        );
      },
    );
  }
}