รู้จักและใช้งาน AsyncValue ใน Flutter Riverpod เบื้องต้น ตอนที่ 2

final productAsyncValue = ref.watch(productProvider);

return productAsyncValue.when(
  data: (products) => Text('Loaded ${products.length} products'),
  loading: () => CircularProgressIndicator(),
  error: (error, stackTrace) => Text('Error: $error'),
);

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// Data models 
class Product {
  int id;
  String title;
  num price;
  DateTime accessDate;
 
  Product({
    required this.id,
    required this.title,
    required this.price,
    required this.accessDate,
  });
 
}
// ตัวอย่างการกำหนด
final productProvider = FutureProvider<List<Product>>((ref) async {
  print("debug: run provider");
  List<Product> productAll = [
    Product(id: 1, title: "Product 1", price: 100, accessDate: DateTime.now()),
    Product(id: 2, title: "Product 2", price: 300, accessDate: DateTime.now()),
    Product(id: 3, title: "Product 3", price: 500, accessDate: DateTime.now()),
  ];
  // จำลองการดึงข้อมูลจาก API หน่่วงเวลา 2 วินาที
  await Future.delayed(const Duration(seconds: 2));
  return productAll;
});

class Home extends ConsumerStatefulWidget {
  static const routeName = '/home';

  const Home({Key? key}) : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends ConsumerState<Home> {

  @override
  Widget build(BuildContext context) {
    final productAsyncValue = ref.watch(productProvider);
    print("debug: build");
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        ),
      ),
      body: productAsyncValue.when(
        data: (products) { // เมื่อมีข้อมูลสินค้ากลับมา วนลูปสร้าง widget
          return ListView.builder(
            itemCount: products.length,
            itemBuilder: (context, index) {
              final product = products[index];
              return ListTile(
                title: Text(product.title),
                subtitle: Text('$${product.price}'),
                trailing: Text('${product.accessDate.toString().substring(0,19)}'),
              );
            },
          );
        },
        loading: () => Center(child: CircularProgressIndicator()),
        error: (error, stackTrace) => Center(child: Text('Error: $error')),
      ),
    );
  }
}

final productAsyncValue = ref.watch(productProvider);

actions: [
  IconButton(
    onPressed: () {
      ref.refresh(productProvider.future);
    },
    icon: Icon(Icons.refresh_outlined),
  ),
],  

body: RefreshIndicator(
        onRefresh: () async {
          ref.refresh(productProvider.future);
        },
        child: productAsyncValue.when(
......

final configProvider = FutureProvider<Configuration>((ref) async {
  final content = json.decode(
    await rootBundle.loadString('assets/configurations.json'),
  ) as Map<String, Object?>;

  return Configuration.fromJson(content);
});  

final activityProvider = FutureProvider((ref) async {
  // Using package:http, we fetch a random activity from the Bored API.
  final response = await http.get(Uri.https('boredapi.com', '/api/activity'));
// Using dart:convert, we then decode the JSON payload into a Map data
  final json = jsonDecode(response.body) as Map<String, dynamic>;
  // Finally, we convert the Map into an Activity instance.
  return Activity.fromJson(json);
});

// Data models 
class Product {
  int id;
  String title;
  num price;
  DateTime accessDate;

  Product({
    required this.id,
    required this.title,
    required this.price,
    required this.accessDate,
  });

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json['id'] as int,
      title: json['title'] as String,
      price: json['price'] as num,
      accessDate: DateTime.parse(json['accessDate'] as String),
    );
  }
}

List<Product> parseProducts(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<Product>((json) => Product.fromJson(json)).toList();
}  

// ตัวอย่างการกำหนด
final productProvider = FutureProvider<List<Product>>((ref) async {
  print("debug: run provider");
  const urlApi = "https://www.ninenik.com/demo/api/simpleproduct";
  final response = await http.get(Uri.parse(urlApi));
  return parseProducts(response.body);

});

import 'package:riverpod/riverpod.dart';

// สร้าง DataModel สำหรับข้อมูลของคุณ
class MyData {
  final String name;
  MyData(this.name);
}

// สร้าง AsyncNotifier พร้อมกับ try-catch เพื่อจัดการข้อผิดพลาด
class MyDataNotifier extends AsyncNotifier<MyData> {
  @override
  Future<MyData> build() async {
    return await fetchData();
  }

  // ฟังก์ชันสำหรับดึงข้อมูล
  Future<MyData> fetchData() async {
    try {
      // จำลองการดึงข้อมูลจาก API
      await Future.delayed(Duration(seconds: 2)); // จำลองการหน่วงเวลา

      // ตัวอย่างการดึงข้อมูลที่อาจเกิดข้อผิดพลาด
      if (DateTime.now().second % 2 == 0) {
        throw Exception('Failed to fetch data');
      }

      return MyData('Example Data'); // ส่งคืนข้อมูลตัวอย่าง
    } catch (error) {
      // จัดการข้อผิดพลาด
      print('Error occurred: $error');
      // คุณสามารถโยนข้อผิดพลาดต่อหรือคืนค่าอื่นที่เป็นการสำรองก็ได้
      throw Exception('Unable to load data: $error');
    }
  }
}

// สร้าง provider สำหรับ MyDataNotifier
final myDataProvider = AsyncNotifierProvider<MyDataNotifier, MyData>(() {
  return MyDataNotifier();
});