今天農村老家的天氣不是很好
而且外面還下雨了，每天只能坐在老家
打開電腦，看看文章，寫寫文章
今天我給大家帶來一篇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這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。
分享到:
閱讀更多 技術剛剛好 的文章
