Home Dart How to parse json data in flutter dart programming

How to parse json data in flutter dart programming

December 29, 2019

2769

Hi Guys, Welcome to Proto Coders Point In this Tutorial we will learn how to parse json data in dart ( flutter ) language.

Before that if you are new in json and want to learn basic of json read this.

What is JSON Data ?

JSON stands for JAVASCRIPT OBJECT NOTATION , it’s an lightweight formated data for storing and transporting data very fast, JSON data are often used when data is to be sent from server to any application. Json is very easy for human being to read as it stored in text format.

refer in detail from below websites:

wikipedia : https://en.wikipedia.org/wiki/JSON

w3schools : https://www.w3schools.com/whatis/whatis_json.asp

JSON in dart ( Flutter )

Dart language has a built-in support for parsing json data.

You can easily convert json data into String using dart:convert library and map it with key: value parse, where keys are string and value are of dynamic objects.

import 'dart:convert';

You need to import dart:convert to convert json data.

Direct Json Parsing and How to use the data

var jsonData = '{ "name" : "ProtoCodersPoint", "website" : "protocoderspoint.com"  }'; //simple json data

var parsedJson = json.decode(jsonData); // need to import convert library

print('${parsedJson.runtimeType} : $parsedJson'); //Display full json Parse

print(parsedJson['name']); //fetch value using key 'name'

print(parsedJson['website']); // fetch value using key 'website'

Then, after Executing the above code you will get output like:

Ok So you can play with the json data using its key index, as you can see i m printing the data using it’s key in above lines of code.

Output

_InternalLinkedHashMap<String, dynamic> : {name: ProtoCodersPoint, website: protocoderspoint.com}
 ProtoCodersPoint
 protocoderspoint.com

JSON Parser using Object Class

Then, Instead of using json Parser directly, it’s better to pass the json data to a class that handles your data from you. This can be done using a constructor in flutter dart.

class UserData {
  String name;
  String website;

  UserData(Map<String, dynamic> data) {
    name = data['name'];
    website = data['website'];
  }
}

Here I have defined an external class that will handle out json parser data, I have made use of Map which has datatypes as Map<String,dynamic>.

 var jsonData = '{ "name" : "Welcome", "website" : "protocoderspoint.com"  }'; //simple json data

 var parsedJson = json.decode(jsonData); // need to import convert library

 UserData userData = UserData(parsedJson); // creating an object and passed parsed JSON data

 print("${userData.name}  Keep learning from ${userData.website}");

Here i have parsed Json data using json.decode and then Created a class object names userData and passed parsed json data to class constructor.

Complete Code of parsing json data in flutter dart programming

Create a Flutter project in android-studio and copy paste the below lines of parse json in flutter code main.dart file

main.dart

import 'package:flutter/material.dart';
import 'dart:convert';

void main() => runApp(MyApp());

String Welcome = "";
String website = " ";

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    var jsonData =
        '{ "name" : "Welcome", "website" : "protocoderspoint.com"  }'; //simple json data

    var parsedJson = json.decode(jsonData); // need to import convert library

    UserData userData = UserData(parsedJson);

    Welcome = userData.name;

    website = userData.website;

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("JSON PARSE DEMO"),
      ),
      body: Center(
        child: Text("${Welcome} keep Learning from ${website}"),
      ),
    );
  }
}

class UserData {
  String name;
  String website;

  UserData(Map<String, dynamic> data) {
    name = data['name'];
    website = data['website'];
  }
}

Output