Parse JSON and Display in Flutter App

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
  }
]

Step 2: Create the Model Class (product.dart)

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)

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.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.