free geoip
25

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…

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.

Parse JSON in Flutter

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[
{
"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 } ]
[
  {
    "name": "Apple",
    "price": 1.5
  },
  {
    "name": "Banana",
    "price": 0.75
  },
  {
    "name": "Cherry",
    "price": 2.0
  }
]

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

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

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

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

rysasahrial

Leave a Reply

Your email address will not be published. Required fields are marked *