cached_future_builder_plus 0.0.2

A Flutter widget that extends FutureBuilder with intelligent caching capabilities.

example/lib/main.dart

import 'package:dio/dio.dart';
import 'package:example/comparison_example.dart';
import 'package:flutter/material.dart';
import 'package:cached_future_builder_plus/cached_future_builder_plus.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CachedFutureBuilderPlus Examples',
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),
      home: const CachedFutureBuilderExample(),
    );
  }
}

class CachedFutureBuilderExample extends StatelessWidget {
  const CachedFutureBuilderExample({super.key});

  Future<Map<String, dynamic>?> _fetchTodo() async {
    try {
      final response = await Dio().get(
        'https://jsonplaceholder.typicode.com/todos/1',
        options: Options(headers: {'Content-Type': 'application/json'}),
      );
      return response.data;
    } catch (e) {
      debugPrint('Error: $e');
      return null;
    }
  }

  Widget _buildSkeletonLine({required double width, required double height}) {
    return SizedBox(width: width, height: height, child: ShimmerEffect());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example App'),
        backgroundColor: Colors.white,
        foregroundColor: Colors.black87,
        elevation: 0,
      ),
      backgroundColor: Colors.grey[50],
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.05),
                    blurRadius: 10,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Basic Example',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                      color: Colors.grey[800],
                    ),
                  ),
                  const SizedBox(height: 16),
                  CachedFutureBuilderPlus<Map<String, dynamic>?>(
                    cacheKey: 'todo:1',
                    cachePolicy: CachePolicy.cacheThenNetwork,
                    initialData: null,
                    future: _fetchTodo(),
                    builder: (context, snapshot) {
                      if (snapshot.connectionState == ConnectionState.waiting) {
                        return SizedBox(
                          height: 54,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              _buildSkeletonLine(width: 200, height: 20),
                              const SizedBox(height: 8),
                              _buildSkeletonLine(width: 150, height: 16),
                            ],
                          ),
                        );
                      }
                      final data = snapshot.data;
                      if (data == null) {
                        return const Text('No data available');
                      }
                      return SizedBox(
                        height: 54,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Title: ${data['title']}',
                              style: const TextStyle(fontSize: 16),
                            ),
                            const SizedBox(height: 8),
                            Text(
                              'Completed: ${data['completed']}',
                              style: const TextStyle(fontSize: 16),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),

            const SizedBox(height: 24),

            SizedBox(
              width: double.infinity,
              child: ElevatedButton.icon(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => const ComparisonExample(),
                    ),
                  );
                },
                icon: const Icon(Icons.compare_arrows),
                label: const Text('View Comparison'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue[400],
                  foregroundColor: Colors.white,
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}