JSON ডেটা Parse এবং Display করা

Flutter এ JSON ডেটা Parse এবং Display করা খুবই সাধারণ কাজ, বিশেষ করে যখন আপনি API থেকে ডেটা ফেচ করে UI তে প্রদর্শন করতে চান। নিচে JSON ডেটা Parse এবং Display করার ধাপগুলো ব্যাখ্যা করা হলো।

JSON ডেটা Parse করার ধাপ:

ধাপ ১: API থেকে JSON ডেটা ফেচ করা:

• Flutter এ HTTP রিকোয়েস্ট পাঠানোর জন্য http প্যাকেজ ব্যবহার করা হয়।
• pubspec.yaml ফাইলে http প্যাকেজ যোগ করুন:

dependencies:
  http: ^0.13.0

ধাপ ২: মডেল ক্লাস তৈরি করা:

• JSON ডেটাকে ডার্ট অবজেক্টে রূপান্তর করার জন্য একটি মডেল ক্লাস তৈরি করা হয়, যা JSON ডেটার কাঠামো অনুযায়ী গঠন করা হয়।

ধাপ ৩: JSON ডেটা ফেচ, Parse এবং Display করা:

• নিচে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো যেখানে JSON ডেটা ফেচ, Parse, এবং Display করা হয়েছে।

Flutter এ JSON ডেটা Parse এবং Display করার উদাহরণ:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter JSON Parsing Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('JSON Parsing Example'),
        ),
        body: UserList(),
      ),
    );
  }
}

// মডেল ক্লাস
class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  // JSON ডেটা থেকে User অবজেক্টে রূপান্তর
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }
}

// ডেটা ফেচ এবং Display করার Widget
class UserList extends StatefulWidget {
  @override
  _UserListState createState() => _UserListState();
}

class _UserListState extends State<UserList> {
  late Future<List<User>> users;

  @override
  void initState() {
    super.initState();
    users = fetchUsers();
  }

  // JSON ডেটা ফেচ এবং Parse করা
  Future<List<User>> fetchUsers() async {
    final response =
        await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));

    if (response.statusCode == 200) {
      // JSON ডেটা Parse করে List<User> তে রূপান্তর করা
      List<dynamic> jsonData = json.decode(response.body);
      return jsonData.map((user) => User.fromJson(user)).toList();
    } else {
      throw Exception('Failed to load users');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<User>>(
      future: users,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        } else if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(snapshot.data![index].name),
                subtitle: Text(snapshot.data![index].email),
              );
            },
          );
        } else {
          return Center(child: Text('No users found'));
        }
      },
    );
  }
}

ধাপে ধাপে বিশ্লেষণ:

ধাপ ১: API থেকে JSON ডেটা ফেচ করা:

• fetchUsers মেথডে http.get ব্যবহার করে API থেকে JSON ডেটা ফেচ করা হয়। এখানে https://jsonplaceholder.typicode.com/users একটি উদাহরণ API ব্যবহার করা হয়েছে, যা ইউজারের JSON ডেটা প্রদান করে।
• যদি রিকোয়েস্ট সফল হয় (স্ট্যাটাস কোড ২০০ হয়), তাহলে JSON ডেটা json.decode দিয়ে Decode করে Dart এর List তে রূপান্তর করা হয়।

ধাপ ২: JSON ডেটা থেকে মডেল অবজেক্ট তৈরি করা:

• User ক্লাসে fromJson মেথড তৈরি করা হয়েছে, যা JSON ডেটা থেকে একটি User অবজেক্ট তৈরি করে।
• jsonData.map((user) => User.fromJson(user)).toList(); লাইনটি JSON ডেটার লিস্ট থেকে User অবজেক্টের লিস্ট তৈরি করে।

ধাপ ৩: JSON ডেটা Display করা:

• FutureBuilder ব্যবহার করে ফেচ করা ডেটা UI তে প্রদর্শন করা হয়েছে।
• snapshot থেকে ডেটা লোডিং স্টেট এবং ডেটার অবস্থা চেক করা হয়েছে:
  • Loading State: CircularProgressIndicator দেখানো হয় যখন ডেটা লোড হচ্ছে।
  • Error State: যদি কোনো ত্রুটি থাকে, তাহলে একটি ত্রুটি বার্তা দেখানো হয়।
  • Data State: ডেটা সফলভাবে লোড হলে ListView.builder ব্যবহার করে প্রতিটি ইউজার ডেটা প্রদর্শন করা হয়।

সংক্ষেপে:

• API থেকে JSON ফেচ করা: http.get ব্যবহার করে JSON ডেটা ফেচ করা হয়।
• মডেল ক্লাস তৈরি করা: JSON ডেটা থেকে Dart অবজেক্টে রূপান্তর করার জন্য একটি মডেল ক্লাস তৈরি করা হয়।
• FutureBuilder ব্যবহার করে UI তে ডেটা প্রদর্শন: FutureBuilder ব্যবহার করে ডেটা লোডিং, ত্রুটি, এবং সফল ডেটা লোডিং হ্যান্ডেল করা হয়।

এই পদ্ধতি ব্যবহার করে Flutter এ সহজেই JSON ডেটা Parse করে UI তে প্রদর্শন করা যায়।