Parsing JSON is an essential task in any mobile app, especially when dealing with APIs. In this Flutter tutorial, you will learn how to parse JSON data and display it in a user-friendly list view. We’ll simulate a response, convert it to Dart objects, and show the data using a clean and simple UI.
JSON is short for JavaScript Object Notation, and it’s a standard format for exchanging data between servers and clients. Flutter, using the Dart language, offers a seamless way to decode JSON and bind it with widgets using ListView.builder
.
Let’s break this down into steps:
Step 1: Sample JSON Structure
[
{
"name": "Apple",
"price": 1.5
},
{
"name": "Banana",
"price": 0.75
},
{
"name": "Cherry",
"price": 2.0
}
]
[
{
"name": "Apple",
"price": 1.5
},
{
"name": "Banana",
"price": 0.75
},
{
"name": "Cherry",
"price": 2.0
}
]
Step 2: Create the Model Class (product.dart
)
Product({required this.name, required this.price});
factory Product.fromJson(Map<String, dynamic> json) {
price: (json['price'] as num).toDouble(),
class Product {
final String name;
final double price;
Product({required this.name, required this.price});
factory Product.fromJson(Map<String, dynamic> json) {
return Product(
name: json['name'],
price: (json['price'] as num).toDouble(),
);
}
}
class Product {
final String name;
final double price;
Product({required this.name, required this.price});
factory Product.fromJson(Map<String, dynamic> json) {
return Product(
name: json['name'],
price: (json['price'] as num).toDouble(),
);
}
}
Step 3: JSON Parsing Logic (product_service.dart
)
static String mockJson = '''
{"name": "Apple", "price": 1.5},
{"name": "Banana", "price": 0.75},
{"name": "Cherry", "price": 2.0}
static List<Product> parseProducts() {
final parsed = json.decode(mockJson) as List<dynamic>;
return parsed.map((json) => Product.fromJson(json)).toList();
import 'dart:convert';
import 'product.dart';
class ProductService {
static String mockJson = '''
[
{"name": "Apple", "price": 1.5},
{"name": "Banana", "price": 0.75},
{"name": "Cherry", "price": 2.0}
]
''';
static List<Product> parseProducts() {
final parsed = json.decode(mockJson) as List<dynamic>;
return parsed.map((json) => Product.fromJson(json)).toList();
}
}
import 'dart:convert';
import 'product.dart';
class ProductService {
static String mockJson = '''
[
{"name": "Apple", "price": 1.5},
{"name": "Banana", "price": 0.75},
{"name": "Cherry", "price": 2.0}
]
''';
static List<Product> parseProducts() {
final parsed = json.decode(mockJson) as List<dynamic>;
return parsed.map((json) => Product.fromJson(json)).toList();
}
}
Step 4: Display in UI (main.dart
)
import 'package:flutter/material.dart';
import 'product_service.dart';
class MyApp extends <a href="https://aliendro.id/create-ui-with-statelesswidget-in-dart/">StatelessWidget</a> {
const MyApp({super.key});
Widget build(BuildContext context) {
final products = ProductService.parseProducts();
title: 'JSON Parse Demo',
title: const Text('Product List'),
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
title: Text(product.name),
subtitle: Text('\$${product.price.toStringAsFixed(2)}'),
import 'package:flutter/material.dart';
import 'product.dart';
import 'product_service.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends <a href="https://aliendro.id/create-ui-with-statelesswidget-in-dart/">StatelessWidget</a> {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final products = ProductService.parseProducts();
return MaterialApp(
title: 'JSON Parse Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Product List'),
),
body: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
return ListTile(
title: Text(product.name),
subtitle: Text('\$${product.price.toStringAsFixed(2)}'),
);
},
),
),
);
}
}
import 'package:flutter/material.dart';
import 'product.dart';
import 'product_service.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final products = ProductService.parseProducts();
return MaterialApp(
title: 'JSON Parse Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Product List'),
),
body: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
return ListTile(
title: Text(product.name),
subtitle: Text('\$${product.price.toStringAsFixed(2)}'),
);
},
),
),
);
}
}
✅ External Reference
For more advanced data modeling in Flutter, check Flutter.dev’s JSON guide.
Post Views: 31