今天农村老家的天气不是很好而且外面还下雨了，每天只能坐在老家打开电脑，看看文章，写写文章今天我给大家带来一篇Flutter加载本地json文件教程本头条核心宗旨欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！
今天农村老家的天气不是很好
而且外面还下雨了，每天只能坐在老家
打开电脑，看看文章，写写文章
今天我给大家带来一篇Flutter加载本地json文件教程
本头条核心宗旨欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。
技术刚刚好经历近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！
本文核心要点JSON文件数据
[{"name": "Luke Skywalker","height": "172","mass": "77","hair_color": "blond","skin_color": "fair","eye_color": "blue","birth_year": "19BBY","gender": "male"},{"name": "C-3PO","height": "167","mass": "75","hair_color": "n/a","skin_color": "gold","eye_color": "yellow","birth_year": "112BBY","gender": "n/a"},{"name": "R2-D2","height": "96","mass": "32","hair_color": "n/a","skin_color": "white, blue","eye_color": "red","birth_year": "33BBY","gender": "n/a"},{"name": "Darth Vader","height": "202","mass": "136","hair_color": "none","skin_color": "white","eye_color": "yellow","birth_year": "41.9BBY","gender": "male"},{"name": "Leia Organa","height": "150","mass": "49","hair_color": "brown","skin_color": "light","eye_color": "brown","birth_year": "19BBY","gender": "female"},{"name": "Owen Lars","height": "178","mass": "120","hair_color": "brown, grey","skin_color": "light","eye_color": "blue","birth_year": "52BBY","gender": "male"},{"name": "Beru Whitesun lars","height": "165","mass": "75","hair_color": "brown","skin_color": "light","eye_color": "blue","birth_year": "47BBY","gender": "female"},{"name": "R5-D4","height": "97","mass": "32","hair_color": "n/a","skin_color": "white, red","eye_color": "red","birth_year": "unknown","gender": "n/a"},{"name": "Biggs Darklighter","height": "183","mass": "84","hair_color": "black","skin_color": "light","eye_color": "brown","birth_year": "24BBY","gender": "male"},{"name": "Obi-Wan Kenobi","height": "182","mass": "77","hair_color": "auburn, white","skin_color": "fair","eye_color": "blue-gray","birth_year": "57BBY","gender": "male"}]
项目结构如下
项目结构
核心代码
import 'dart:convert';import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: MyApp(),));}class MyApp extends StatefulWidget {@overrideMyAppState createState() => MyAppState();}class MyAppState extends State<MyApp> {List data;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Load local JSON file"),),body: Container(child: Center(// Use future builder and DefaultAssetBundle to load the local JSON filechild: FutureBuilder(future: DefaultAssetBundle.of(context).loadString('data_repo/starwars_data.json'),builder: (context, snapshot) {// decode the JSONvar new_data = json.decode(snapshot.data.toString());return ListView.builder(// Build the ListViewitemBuilder: (BuildContext context, int index) {return Card(child: Column(crossAxisAlignment: CrossAxisAlignment.stretch,children: <Widget>[Text("Name: "new_data[index]['name']),Text("Height: "new_data[index]['height']),Text("Mass: "new_data[index]['mass']),Text("Hair Color: "new_data[index]['hair_color']),Text("Skin Color: "new_data[index]['skin_color']),Text("Eye Color: "new_data[index]['eye_color']),Text("Birth Year: "new_data[index]['birth_year']),Text("Gender: "new_data[index]['gender'])],),);},itemCount: new_data == null ? 0 : new_data.length,);}),),));}}
谢谢观看技术刚刚好的文章，技术刚刚好是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。
