关于flutter:记录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,
                  )
                ],
              ),
            );
          },
        );
      },
    );
  }
}