Flutter Local Json Implementation Tutorial For Beginners

 

Flutter Local Json :

Flutter Local Json implementation, usage in flutter app is explained in this part of the tutorial where we add a local json file to the project and fetch the user details and populate it on to the screen using a list.

Local json can also be used as a testing scenarios like mock api while testing the app to check whether the implementation’s in the app features work’s or not, it acts in the same way as live api also its useful in mock testing scenarios.

Also it helps you to structure your app without wasting any time (waiting for the real time Api) and provides you ample time for integrations and can just replace the real time api in place of local json.

The parsing scenario is similar interms of both local and global json file so it can be easily used to avoid multiple api calls when the app is in testing phase like payment, sms gateway integrations where the cost incurred is more.

 

pubspec.yaml :

Add the json file to the pubspec file

assets:
  - assets/user.json

 

 

Flutter local json video tutorial :

Explore the comprehensive tutorial below for detailed insights into the implementation process.

 

user.json :

We’re populating the JSON file in the assets folder with user data containing name, number, and email fields.

[
  {
    "name": "Abhishek",
    "number": "9876543210",
    "email": "abhi@gmail.com"
  },
  {
    "name": "Abc",
    "number": "9876543210",
    "email": "abc@gmail.com"
  },
  {
    "name": "def",
    "number": "9876543210",
    "email": "def@gmail.com"
  },
  {
    "name": "ghi",
    "number": "9876543210",
    "email": "ghi@gmail.com"
  },
  {
    "name": "jkl",
    "number": "9876543210",
    "email": "jkl@gmail.com"
  }
]

 

 

main.dart :

Initialize with the void main() and provide the default class MyApp enclosed inside a MaterialApp

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

 

 

Create a state for the MyApp class extending StatefulWidget so that we can re create the state

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

 

 

Declare a variable

late List data;

 

 

Specify the appBar with title

appBar: AppBar(
  title: Text("Local JSON File"),
),

 

 

With the use of a List Builder populate the data form the json on to the screen according to the position also we will use future builder to fetch the data from local json and populate.

ListView.builder(
  // Build the ListView
  itemBuilder: (BuildContext context, int index) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Text("Name: " + new_data[index]['name']),
            SizedBox(height: 10,),
            Text("Number: " + new_data[index]['number']),
            SizedBox(height: 10,),
            Text("Email: " + new_data[index]['email'])
          ],
        ),
      ),
    );
  },
  itemCount: new_data == null ? 0 : new_data.length,
);

 

 

FullCode :

Here’s the complete code for integrating local JSON into your Flutter app.

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('assets/user.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: Padding(
                      padding: EdgeInsets.all(20.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Text("Name: " + new_data[index]['name']),
                          SizedBox(height: 10,),
                          Text("Number: " + new_data[index]['number']),
                          SizedBox(height: 10,),
                          Text("Email: " + new_data[index]['email'])
                        ],
                      ),
                    ),
                  );
                },
                itemCount: new_data == null ? 0 : new_data.length,
              );
            }
          ),
        ),
      ),
    );
  }
}

 

 

Flutter local json output :

The following screen showcases the implementation of local JSON in flutter.

If you have any questions about this local JSON tutorial, feel free to ask in the comments section below. If you found this tutorial helpful, please like and share for more updates.