今天农村老家的天气不太好
外面也在下雨，只能每天坐在老家
打开电脑，看文章，写文章
今天我们将为您提供一个Flutter加载本地JSON文件的教程
欢迎来到
本头条核心宗旨
《恰到好处的技术》的作者。 “恰到好处的技术”是个人维护，每天至少更新一篇Flutter技术文章，实时向大家播放Flutter的最新信息。 如果你也正好关注Flutter这个技术，和我一起学习进步吧。 你的赞扬、收藏和转发是对我最大的支持。 不容易维护。 欢迎关注。从010年到1010年，移动端跨平台开发技术相继问世。 从Facebook家的ReactNative，到阿里家的WEEX，前端技术活跃在移动端的跨平台开发中，技术正好作为Android开发，经历了从Reactjs到Vuejs的持续学习。 然后在2018年，我们的主角变成了Flutter。 这是一个谷歌开源移动端跨平台解决方案，可以帮助您快速开发美丽的移动APP。 希望大家一起学习，一起进步！
技术刚刚好经历
Jon文件数据
[
{
名称： Luke Skywalker，
'高度' : ' 172 '，
'质量' : ' 77 '，
' hair_color': 'blond '，
' skin_color': 'fair '，
' eye _ color ' : '蓝色'，
' birth_year': '19BBY '，
' gender': 'male '，第二代
(、
{
'名称' : ' c-3po '，
'高度' : ' 167 '，
'质量' : ' 75 '，
' hair_color': 'n/a '，
' skin_color': 'gold '，
“颜色”:“黄色”，
' birth _ year ' : ' 112位元组'，
' gender': 'n/a '号战列舰
(、
{
'名称' : ' R2-D2 '，
'高度' : ' 96 '，
'质量' : ' 32 '，
' hair_color': 'n/a '，
“skin _ color”:“白色，蓝色”，
' eye _ color ' : '红色'，
“年”:“33b是”，
' gender': 'n/a '号战列舰
(、
{
名称：日期验证器，
'高度' : ' 202 '，
'质量' : ' 136 '，
' hair _ color ' : '无'，
' skin_color': 'white '，
“颜色”:“黄色”，
' birth _ year ' : ' 41.9位元组'，
' gender': 'male '，第二代
(、
{
“名称”:“Leia Organa”，
'高度' : ' 150 '，
'质量' : ' 49 '，
' hair _ color ' : '浏览'，
“skin _ color”:“光”，
' eye _ color ' : '浏览'，
' birth_year': '19BBY '，
' gender ' : '费梅尔'
(、
{
“名称”:“开放实验室”，
'高度' : ' 178 '，
'质量' : ' 120 '，
' hair _ color ' : '浏览，灰色'，
“skin _ color”:“光”，
' eye _ color ' : '蓝色'，
' birth_year': '52BBY '，
' gender': 'male '，第二代
(、
{
名称： Beru Whitesun Lars，
'高度' : ' 165 '，
'质量' : ' 75 '，
' hair _ color ' : '浏览'，
“skin _ color”:“光”，
' eye _ color ' : '蓝色'，
' birth_year': '47BBY '，
' gender ' : '费梅尔'
(、
{
'名称' : ' r5-D4 '，
'高度' : ' 97 '，
'质量' : ' 32 '，
' hair_color': 'n/a '，
“skin _ color”:“白色，红色”，
' eye _ color ' : '红色'，
' 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这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。