parse json in flutter
parse json in flutter

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import 'dart:convert';
import 'dart:convert';
import 'dart:convert';

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

Direct Json Parsing and How to use the data

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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'
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'
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
_InternalLinkedHashMap<String, dynamic> : {name: ProtoCodersPoint, website: protocoderspoint.com}
ProtoCodersPoint
protocoderspoint.com
_InternalLinkedHashMap<String, dynamic> : {name: ProtoCodersPoint, website: protocoderspoint.com} ProtoCodersPoint protocoderspoint.com
_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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class UserData {
String name;
String website;
UserData(Map<String, dynamic> data) {
name = data['name'];
website = data['website'];
}
}
class UserData { String name; String website; UserData(Map<String, dynamic> data) { name = data['name']; website = data['website']; } }
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>.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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}");
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}");
 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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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'];
}
}
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']; } }
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

parse json in flutter
Output of parse json in flutter

Recommended Articles

Android Tutorial on Volley library – How to Fetching JSON Data from URL

flutter generate model from json

2 Comments