今天農村老家的天氣不是很好

而且外面還下雨了，每天隻能坐在老家

打開電腦，看看文章，寫寫文章

今天我給大家帶來一篇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這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!