จัดการข้อมูล Model และแนวทางการนำมาใช้งาน ใน Flutter

{
   "id":1,
   "title":"Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
   "price":109.95,
   "description":"Your perfect pack for everyday use and walks in the forest. ",
   "category":"men's clothing",
   "image":"https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
   "rating":{
      "rate":3.9,
      "count":120
   }
}

// Data models 
class Product {
  int id;
  String title;
  num price;
  String description;
  String category;
  String image;
  Rating? rating;

  Product({
    required this.id,
    required this.title,
    required this.price,
    required this.description,
    required this.category,
    required this.image,
    this.rating
  });

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json['id'],
      title: json['title'],
      price: json['price'],
      description: json['description'],
      category: json['category'],
      image: json['image'],
      rating: json['rating'] != null ? Rating.fromJson(json['rating']) : null
    );
  }

}

class Rating {
  num? rate;
  int? count;

  Rating({
    this.rate, 
    this.count});

  factory Rating.fromJson(Map<String, dynamic> json) {
    return Rating(
      rate: json['rate'],
      count: json['count']
    );
  }

}

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

import '../models/product_model.dart';
    
class Home extends StatefulWidget {
    static const routeName = '/';
   
    const Home({Key? key}) : super(key: key);
    
    @override
    State<StatefulWidget> createState() {
        return _HomeState();
    }
}
    
class _HomeState extends State<Home> {
  
    // กำนหดตัวแปรข้อมูล products
    late Future<List<Product>> products;
    // ตัว ScrollController สำหรับจัดการการ scroll ใน ListView
    final ScrollController _scrollController = ScrollController();
    
    @override
    void initState() {
      super.initState(); 
      products = fetchProduct();
    }     
  
    Future<void> _refresh() async {
      setState(() {
       products = fetchProduct();
      });
    }
 
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
            ),
            body: Center(
              child: FutureBuilder<List<Product>>( // ชนิดของข้อมูล
                future: products, // ข้อมูล Future
                builder: (context, snapshot) {
                  // มีข้อมูล และต้องเป็น done ถึงจะแสดงข้อมูล ถ้าไม่ใช่ ก็แสดงตัว loading 
                  if (snapshot.hasData) {
                      bool _visible = false; // กำหนดสถานะการแสดง หรือมองเห็น เป็นไม่แสดง
                      if(snapshot.connectionState == ConnectionState.waiting){ // เมื่อกำลังรอข้อมูล
                        _visible = true; // เปลี่ยนสถานะเป็นแสดง
                      } 
                      if(_scrollController.hasClients){ //เช็คว่ามีตัว widget ที่ scroll ได้หรือไม่ ถ้ามี
                        // เลื่อน scroll มาด้านบนสุด
                      _scrollController.animateTo(0, duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                      }
                      return Column(
                          children: [
                            Visibility(
                              child: const LinearProgressIndicator(),
                              visible: _visible,
                            ),
                            Container( // สร้างส่วน header ของลิสรายการ
                              padding: const EdgeInsets.all(5.0),
                              decoration: BoxDecoration(
                                color: Colors.orange.withAlpha(100),
                              ),                  
                              child: Row(                  
                                children: [
                                  Text('Total ${snapshot.data!.length} items'), // แสดงจำนวนรายการ
                                ],
                              ),
                            ),
                            Expanded( // ส่วนของลิสรายการ
                                child: snapshot.data!.isNotEmpty // กำหนดเงื่อนไขตรงนี้
                                ? RefreshIndicator(
                                  onRefresh: _refresh,
                                  child: ListView.separated( // กรณีมีรายการ แสดงปกติ
                                        controller: _scrollController, // กำนหนด controller ที่จะใช้งานร่วม
                                        itemCount: snapshot.data!.length,
                                        itemBuilder: (context, index) {
                                          Product product = snapshot.data![index];
 
                                          Widget card; // สร้างเป็นตัวแปร
                                          card = Card(
                                            margin: const EdgeInsets.all(5.0), // การเยื้องขอบ
                                            child: Column(
                                              children: [
                                                ListTile(
                                                  leading: Image.network(product.image,width: 100.0,),
                                                  title: Text(product.title),
                                                  subtitle: Text('Price: \$ ${product.price}'),
                                                  trailing: Icon(Icons.more_vert),
                                                  onTap: (){
                                                                                                
                                                  },
                                                ),
                                              ],
                                            )
                                          );
                                          return card;
                                        },
                                        separatorBuilder: (BuildContext context, int index) => const SizedBox(),                    
                                  ),
                                )
                                : const Center(child: Text('No items')), // กรณีไม่มีรายการ
                            ),
                          ],
                        );
                  } else if (snapshot.hasError) { // กรณี error
                    return Text('${snapshot.error}');
                  }
                  // กรณีสถานะเป็น waiting ยังไม่มีข้อมูล แสดงตัว loading
                 return const RefreshProgressIndicator();
                },
              ),  
            ),          
        );
    }   
  
}
 
// สรัางฟังก์ชั่นดึงข้อมูล คืนค่ากลับมาเป็นข้อมูล Future ประเภท List ของ Product
Future<List<Product>> fetchProduct() async {
  // ทำการดึงข้อมูลจาก server ตาม url ที่กำหนด
  String url = 'https://fakestoreapi.com/products';
  final response = await http.get(Uri.parse(url));
  
  // เมื่อมีข้อมูลกลับมา
  if (response.statusCode == 200) {
    // ส่งข้อมูลที่เป็น JSON String data ไปทำการแปลง เป็นข้อมูล List<Product
    // โดยใช้คำสั่ง compute ทำงานเบื้องหลัง เรียกใช้ฟังก์ชั่นชื่อ parseProducts
    // ส่งข้อมูล JSON String data ผ่านตัวแปร response.body
    return compute(parseProducts, response.body);
  } else { // กรณี error
    throw Exception('Failed to load product');
  }
}
  
// ฟังก์ชั่นแปลงข้อมูล JSON String data เป็น เป็นข้อมูล List<Product>
List<Product> parseProducts(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<Product>((json) => Product.fromJson(json)).toList();
} 

import '../models/product_model.dart';

String url = 'https://fakestoreapi.com/products';

ListTile(
  leading: Image.network(product.image,width: 100.0,),
  title: Text(product.title),
  subtitle: Text('Price: \$ ${product.price}'),
  trailing: Icon(Icons.more_vert),
  onTap: (){
                                                
  },
),

import 'package:flutter/material.dart';
import '../models/product_model.dart';
 
class Products extends StatefulWidget {
    static const routeName = '/producs';
 
    const Products({Key? key}) : super(key: key);
    
    @override
    State<StatefulWidget> createState() {
        return _ProductsState();
    }
}
 
class _ProductsState extends State<Products> {
 
    @override
    Widget build(BuildContext context) {
        // รับค่า arguments ที่ส่งมาใช้งาน
        final product = ModalRoute.of(context)!.settings.arguments as Product;  

        return Scaffold(
                appBar: AppBar( // เราใช้ appbar แต่จะให้แสดงแต่ปุ่มปิด
                    leading: IconButton( // ใช้ไอคอนปุ่ม
                      onPressed: (){ // เมื่อกด
                        Navigator.of(context).pop(); //ปิดหน้านี้
                      }, 
                      icon: Icon(Icons.close,color: Colors.black),
                    ),
                    backgroundColor: Colors.white,
                    elevation: 0.0,
                ),
                body: Container(
                    child: SingleChildScrollView( //ใช้งาน widget นี้เพื่อป้องกัน error พื้นที่เกินขอบเขต
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Image.network(product.image), // แสดงรูป
                              SizedBox(height: 10.0),
                              Text(product.title, // แสดงชื่อสินค้า
                                style: Theme.of(context).textTheme.headline6,
                              ),
                              SizedBox(height: 5.0),
                              Text('Price: \$ ${product.price}'), // แสดงราคา
                              SizedBox(height: 10.0),
                              Text('Price: ${product.description}'), // แสดงรายละเอียด
                            ],
                        ),
                      ),
                    )
                ),
            );
    }
}

import '../models/product_model.dart';

// รับค่า arguments ที่ส่งมาใช้งาน
final product = ModalRoute.of(context)!.settings.arguments as Product;  

ListTile(
  leading: Image.network(product.image,width: 100.0,),
  title: Text(product.title),
  subtitle: Text('Price: \$ ${product.price}'),
  trailing: Icon(Icons.more_vert),
  onTap: (){
    Navigator.push(
      context, 
      MaterialPageRoute(builder: (context) => Products(), // กำหนด PageRoute
        settings: RouteSettings(
          arguments: product // ส่งค่าไปใน  arguments   
        ),
      ),
    );                                              
  },
),

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

import 'product.dart';
import '../models/product_model.dart';

// สร้างฟังก์ชั่น ที่คืนค่าเป็น route ของ object ฟังก์ชั่นนี้ มี context และ product เป็น parameter
static Route<Object?> _viewProduct(BuildContext context, Product product) {
  return DialogRoute<void>(
          context: context,
          builder: (BuildContext context) => // ใช้ arrow aฟังก์ชั่น
            Dismissible( // คืนค่าเป็น dismissible widget
              direction: DismissDirection.vertical, // เมื่อปัดลงในแนวตั้ง
              key: const Key('key'), // ต้องกำหนด key ใช้ค่าตามนี้ได้เลย
              onDismissed: (_) => Navigator.of(context).pop(), // ปัดลงเพื่อปิด             
              child: Scaffold(
                extendBodyBehindAppBar: true, // แสดงพื้นที่ appbar แยก ให้ขายเต็มจอ
                appBar: AppBar( 
                    leading: IconButton(
                      onPressed: (){
                        Navigator.of(context).pop();
                      }, 
                      icon: Icon(Icons.close,color: Colors.black),
                    ),
                    backgroundColor: Colors.transparent,
                    elevation: 0.0,
                ),
                body: Container(
                    child: SingleChildScrollView(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Image.network(product.image),
                              SizedBox(height: 10.0),
                              Text(product.title,
                                style: Theme.of(context).textTheme.headline6,
                              ),
                              SizedBox(height: 5.0),
                              Text('Price: \$ ${product.price}'),
                              SizedBox(height: 10.0),
                              Text('Price: ${product.description}'),
                            ],
                        ),
                      ),
                    )
                ),
              ),
            ),
        );
}      

// สร้างฟังก์ชั่น ที่คืนค่าเป็น route ของ object ฟังก์ชั่นนี้ มี context และ product เป็น parameter
static Route<Object?> _viewProduct(BuildContext context, Product product) {
  return DialogRoute<void>(
          context: context,
          builder: (BuildContext context) => // ใช้ arrow aฟังก์ชั่น
-----
------
  );
}

ListTile(
  leading: Image.network(product.image,width: 100.0,),
  title: Text(product.title),
  subtitle: Text('Price: \$ ${product.price}'),
  trailing: Icon(Icons.more_vert),
  onTap: (){
    Navigator.of(context).push(_viewProduct(context, product));                                           
  },
),

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

import 'product.dart';
import '../models/product_model.dart';
    
class Home extends StatefulWidget {
    static const routeName = '/';
   
    const Home({Key? key}) : super(key: key);
    
    @override
    State<StatefulWidget> createState() {
        return _HomeState();
    }
}
    
class _HomeState extends State<Home> {
  
    // กำนหดตัวแปรข้อมูล products
    late Future<List<Product>> products;
    // ตัว ScrollController สำหรับจัดการการ scroll ใน ListView
    final ScrollController _scrollController = ScrollController();
    
    @override
    void initState() {
      super.initState(); 
      products = fetchProduct();
    }     
  
    Future<void> _refresh() async {
      setState(() {
       products = fetchProduct();
      });
    }
 
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
            ),
            body: Center(
              child: FutureBuilder<List<Product>>( // ชนิดของข้อมูล
                future: products, // ข้อมูล Future
                builder: (context, snapshot) {
                  // มีข้อมูล และต้องเป็น done ถึงจะแสดงข้อมูล ถ้าไม่ใช่ ก็แสดงตัว loading 
                  if (snapshot.hasData) {
                      bool _visible = false; // กำหนดสถานะการแสดง หรือมองเห็น เป็นไม่แสดง
                      if(snapshot.connectionState == ConnectionState.waiting){ // เมื่อกำลังรอข้อมูล
                        _visible = true; // เปลี่ยนสถานะเป็นแสดง
                      } 
                      if(_scrollController.hasClients){ //เช็คว่ามีตัว widget ที่ scroll ได้หรือไม่ ถ้ามี
                        // เลื่อน scroll มาด้านบนสุด
                      _scrollController.animateTo(0, duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                      }
                      return Column(
                          children: [
                            Visibility(
                              child: const LinearProgressIndicator(),
                              visible: _visible,
                            ),
                            Container( // สร้างส่วน header ของลิสรายการ
                              padding: const EdgeInsets.all(5.0),
                              decoration: BoxDecoration(
                                color: Colors.orange.withAlpha(100),
                              ),                  
                              child: Row(                  
                                children: [
                                  Text('Total ${snapshot.data!.length} items'), // แสดงจำนวนรายการ
                                ],
                              ),
                            ),
                            Expanded( // ส่วนของลิสรายการ
                                child: snapshot.data!.isNotEmpty // กำหนดเงื่อนไขตรงนี้
                                ? RefreshIndicator(
                                  onRefresh: _refresh,
                                  child: ListView.separated( // กรณีมีรายการ แสดงปกติ
                                        controller: _scrollController, // กำนหนด controller ที่จะใช้งานร่วม
                                        itemCount: snapshot.data!.length,
                                        itemBuilder: (context, index) {
                                          Product product = snapshot.data![index];
 
                                          Widget card; // สร้างเป็นตัวแปร
                                          card = Card(
                                            margin: const EdgeInsets.all(5.0), // การเยื้องขอบ
                                            child: Column(
                                              children: [
                                                ListTile(
                                                  leading: Image.network(product.image,width: 100.0,),
                                                  title: Text(product.title),
                                                  subtitle: Text('Price: \$ ${product.price}'),
                                                  trailing: Icon(Icons.more_vert),
                                                  onTap: (){
                                                    Navigator.of(context).push(_viewProduct(context, product));                                           
                                                  },
                                                ),
                                              ],
                                            )
                                          );
                                          return card;
                                        },
                                        separatorBuilder: (BuildContext context, int index) => const SizedBox(),                    
                                  ),
                                )
                                : const Center(child: Text('No items')), // กรณีไม่มีรายการ
                            ),
                          ],
                        );
                  } else if (snapshot.hasError) { // กรณี error
                    return Text('${snapshot.error}');
                  }
                  // กรณีสถานะเป็น waiting ยังไม่มีข้อมูล แสดงตัว loading
                 return const RefreshProgressIndicator();
                },
              ),  
            ),          
        );
    }

    // สร้างฟังก์ชั่น ที่คืนค่าเป็น route ของ object ฟังก์ชั่นนี้ มี context และ product เป็น parameter
    static Route<Object?> _viewProduct(BuildContext context, Product product) {
      return DialogRoute<void>(
              context: context,
              builder: (BuildContext context) => // ใช้ arrow aฟังก์ชั่น
                Dismissible( // คืนค่าเป็น dismissible widget
                  direction: DismissDirection.vertical, // เมื่อปัดลงในแนวตั้ง
                  key: const Key('key'), // ต้องกำหนด key ใช้ค่าตามนี้ได้เลย
                  onDismissed: (_) => Navigator.of(context).pop(), // ปัดลงเพื่อปิด             
                  child: Scaffold(
                    extendBodyBehindAppBar: true, // แสดงพื้นที่ appbar แยก ให้ขายเต็มจอ
                    appBar: AppBar( 
                        leading: IconButton(
                          onPressed: (){
                            Navigator.of(context).pop();
                          }, 
                          icon: Icon(Icons.close,color: Colors.black),
                        ),
                        backgroundColor: Colors.transparent,
                        elevation: 0.0,
                    ),
                    body: Container(
                        child: SingleChildScrollView(
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Image.network(product.image),
                                  SizedBox(height: 10.0),
                                  Text(product.title,
                                    style: Theme.of(context).textTheme.headline6,
                                  ),
                                  SizedBox(height: 5.0),
                                  Text('Price: \$ ${product.price}'),
                                  SizedBox(height: 10.0),
                                  Text('Price: ${product.description}'),
                                ],
                            ),
                          ),
                        )
                    ),
                  ),
                ),
            );
    }        
  
}
 
// สรัางฟังก์ชั่นดึงข้อมูล คืนค่ากลับมาเป็นข้อมูล Future ประเภท List ของ Product
Future<List<Product>> fetchProduct() async {
  // ทำการดึงข้อมูลจาก server ตาม url ที่กำหนด
  String url = 'https://fakestoreapi.com/products';
  final response = await http.get(Uri.parse(url));
  
  // เมื่อมีข้อมูลกลับมา
  if (response.statusCode == 200) {
    // ส่งข้อมูลที่เป็น JSON String data ไปทำการแปลง เป็นข้อมูล List<Product
    // โดยใช้คำสั่ง compute ทำงานเบื้องหลัง เรียกใช้ฟังก์ชั่นชื่อ parseProducts
    // ส่งข้อมูล JSON String data ผ่านตัวแปร response.body
    return compute(parseProducts, response.body);
  } else { // กรณี error
    throw Exception('Failed to load product');
  }
}
  
// ฟังก์ชั่นแปลงข้อมูล JSON String data เป็น เป็นข้อมูล List<Product>
List<Product> parseProducts(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<Product>((json) => Product.fromJson(json)).toList();
}