今天农村老家的天气不是很好
而且外面还下雨了，每天只能坐在老家
打开电脑，看看文章，写写文章
今天我给大家带来一篇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 {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
List data;
@override
Widget 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 file
child: FutureBuilder(
future: DefaultAssetBundle
.of(context)
.loadString('data_repo/starwars_data.json'),
builder: (context, snapshot) {
// decode the JSON
var new_data = json.decode(snapshot.data.toString());
return ListView.builder(
// Build the ListView
itemBuilder: (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这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。
