今天农村老家的天气不是很好
而且外面还下雨了，每天只能坐在老家
打开电脑，看看文章，写写文章
今天我给大家带来一篇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 { 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: [ 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这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。
分享到:
閱讀更多 技術剛剛好 的文章
