In this flutter tutorial we will learn how to read json data from assets folder and parse JSON data in flutter. In this application we will read a local json file. We have 3 steps
This Article will cover below flutter JSON questions
Let's get started
Step 1: Create flutter application in Android studio. Refer How to create first Flutter application in android studio
Step 2: Add required json files inside assets folder
Step 3: Define assets inside pubspec.yaml file to access inside application
assets:
- spices.json
- vegetable.json
|
Step 4: Read JSON from assets folder
Now we will use DefaultAssetBundle.of(context).loadString() method to read json file from assets folder
Step 5: From the above method it will return json string, now we need to read data from the json and parse json data and display on UI screen.
await DefaultAssetBundle.of(context).loadString("assets/$file")
.then((s) {
setState(() {
var response = json.decode(s);
List list_telugu = response['telugu'];
List list_english = response['english'];
for (var k = 0; k < list_telugu.length; k++) {
list_items!.add(Items(list_english[k], list_telugu[k]));
}
});
}).catchError((error) {
print(error);
});
|
 |
 |
Complete code
main.dart file
import 'package:flutter/material.dart';
import 'dart:convert';
import '../details.dart';
import 'model/items.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
Size? size;
@override
Widget build(BuildContext context) {
size=MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(
backgroundColor: Colors.pink,
title: Text("Spices & Vegitables"),
),
body: Stack(
children: [
Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.elliptical( size!.width, size!.width),
topRight: Radius.circular(size!.width/2),
topLeft: Radius.circular(size!.width/2),
),
color: Colors.white54
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.count(
mainAxisSpacing: 10,
childAspectRatio: 320/470,
crossAxisCount: 2,
crossAxisSpacing: 5,
children: [
///----------------Item One-----------------------------
InkWell(
onTap:(){
loadDetail(context,1);
},
child: Card(
elevation: 15,
child: Stack(
children: [
Image.asset("spices.png", fit: BoxFit.cover,height: 320,),
Align(
alignment:Alignment.bottomCenter,
child: Container(width:double.infinity,color:Colors.white70,child: Text( "Spices\n View",style: TextStyle(color: Colors.pink,fontSize: 20,fontStyle: FontStyle.italic),textAlign: TextAlign.center )),
),
],
)
),
),
///----------------Item two-----------------------------
InkWell(
onTap:(){
loadDetail(context,2);
},
child: Card(
elevation: 15,
child: Stack(
children: [
Image.asset("dry_fruite.png", fit: BoxFit.cover,height:320,),
Align(
alignment:Alignment.bottomCenter,
child: Container(width:double.infinity,color:Colors.white70,child: Text( "Dry Fruites\n View",style: TextStyle(color: Colors.pink,fontSize: 20,fontStyle: FontStyle.italic) ,textAlign: TextAlign.center )),
),
],
)
),
),
///----------------Item three-----------------------------
InkWell(
onTap:(){
loadDetail(context,3);
},
child: Card(
elevation: 15,
child: Stack(
children: [
Image.asset("vegetables.png", fit: BoxFit.cover,height: 320,),
Align(
alignment:Alignment.bottomCenter,
child: Container(width:double.infinity,color:Colors.white70,child: Text( "Vegetables \n View",style: TextStyle(color: Colors.pink,fontSize: 20,fontStyle: FontStyle.italic),textAlign: TextAlign.center )),
),
],
)
),
),
///----------------Item Four-----------------------------
InkWell(
onTap:(){
loadDetail(context,4);
},
child: Card(
elevation: 15,
child: Stack(
children: [
Image.asset("pulses.png", fit: BoxFit.cover,height: 320,),
Align(
alignment:Alignment.bottomCenter,
child: Container(width:double.infinity,color:Colors.white70,child: Text( "Pulses \n View",style: TextStyle(color: Colors.pink,fontSize: 20,fontStyle: FontStyle.italic,),textAlign: TextAlign.center, )),
),
],
)
),
),
],
),
),
],
),
);
}
loadDetail(BuildContext ctx,position)
{
Navigator.push(ctx, MaterialPageRoute(builder: (_){
return DetailsPage(position);
}));
}
}
|
details.dart
import 'package:flutter/material.dart';
import 'dart:convert';
import 'model/items.dart';
class DetailsPage extends StatefulWidget {
int position;
DetailsPage(this.position);
@override
State createState() {
return DetailsState();
}
}
class DetailsState extends State {
List?list_items;
var imagepath;
@override
void initState() {
// TODO: implement initState
super.initState();
list_items = List.empty(growable: true);
if(this.widget.position==1)
imagepath= "spices.png";
if(this.widget.position==2)
imagepath= "dry_fruite.png";
if(this.widget.position==3)
imagepath= "vegetables.png";
if(this.widget.position==4)
imagepath= "dry_fruite.png";
readData(this.widget.position);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.white70,
appBar: AppBar(
backgroundColor: Colors.pink,
leading: InkWell(child: Icon(Icons.arrow_back,color: Colors.white),
onTap: (){
Navigator.pop(context);
},),
),
body: Stack(
children: [
Container(color: Colors.grey[500],),
Image.asset(imagepath, fit: BoxFit.cover,height: double.infinity,),
Padding(
padding: const EdgeInsets.all(8.0),
child: (list_items!.length==0)?Center(child: CircularProgressIndicator(),):GridView.count(crossAxisCount: 2,
children: [
for(final item in list_items!)
Card(child: Stack(
children: [
Container(color: Colors.white70,),
Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(item.name_telugu,style: TextStyle(color: Colors.pink,fontSize: 18),),
Text(item.name_english,style: TextStyle(color: Colors.pink,fontSize: 18),),
],
),
),
],
),
)
],),
),
],
),
);
}
readData(int which) async
{
String? file;
switch(which)
{
case 1:
file="spices.json";
break;
case 2:
file="dry_fruites.json";
break;
case 3:
file="vegetable.json";
break;
case 4:
file="pulses.json";
break;
}
await DefaultAssetBundle.of(context).loadString("assets/$file")
.then((s) {
setState(() {
var response = json.decode(s);
List list_telugu = response['telugu'];
List list_english = response['english'];
for (var k = 0; k < list_telugu.length; k++) {
list_items!.add(Items(list_english[k], list_telugu[k]));
}
});
}).catchError((error) {
print(error);
});
}
}
|
item.dart model class
import 'package:flutter/material.dart'; class Items{ String name_english; String name_telugu; Items(this.name_english,this.name_telugu); } |
Download code for Read Local JSON file in Flutter
Conclusion: In this flutter application we implemented how to read local json from assets folder and parse local json data.
|
Article Contributed By :
|
|
|
|
|
7374 Views |
|