adaptive_image_loader 1.0.5

adaptive_image_loader: ^1.0.5 copied to clipboard

example/lib/main.dart

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

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

/// Example application demonstrating all features of adaptive_image_loader.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Adaptive Image Loader Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ExampleHomePage(),
    );
  }
}

class ExampleHomePage extends StatefulWidget {
  const ExampleHomePage({super.key});

  @override
  State<ExampleHomePage> createState() => _ExampleHomePageState();
}

class _ExampleHomePageState extends State<ExampleHomePage> {
  String statusMessage = '';

  Future<void> _evictImage(String url) async {
    final success = await AdaptiveImage.evict(url);
    if (!mounted) return;
    setState(() {
      statusMessage = success
          ? 'Successfully evicted from cache!'
          : 'Failed to evict from cache.';
    });
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(statusMessage)),
    );
  }

  @override
  Widget build(BuildContext context) {
    const sampleDriveUrl =
        'https://drive.google.com/file/d/1a2B3c4D5e6F7g8H9i0J_k-L/view';
    const sampleWebUrl = 'https://picsum.photos/400/300';
    const sampleGitHubUrl =
        'https://github.com/flutter/flutter/blob/master/packages/flutter/assets/logo.png';

    return Scaffold(
      appBar: AppBar(
        title: const Text('Adaptive Image Loader'),
        elevation: 2,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          // -----------------------------------------------------------------
          // 1. Google Drive with Edge CDN & Server-Side Resizing
          // -----------------------------------------------------------------
          const SectionTitle('1. Google Drive (Edge CDN + Resizing)'),
          const Text(
            'Automatically resolves to lh3.googleusercontent.com/d/{id}=s400 with 0 redirects.',
            style: TextStyle(color: Colors.grey, fontSize: 13),
          ),
          const SizedBox(height: 8),
          AdaptiveImage.driveImage(
            sampleDriveUrl,
            size: 400,
            width: double.infinity,
            height: 180,
            useCache: true,
            placeholderColor: Colors.grey.shade200,
          ),

          const SizedBox(height: 24),

          // -----------------------------------------------------------------
          // 2. Normal Web Image with Placeholder Color & Fade
          // -----------------------------------------------------------------
          const SectionTitle('2. Web Image with Placeholder Color'),
          const SizedBox(height: 8),
          AdaptiveImage.image(
            sampleWebUrl,
            width: double.infinity,
            height: 180,
            useCache: true,
            placeholderColor: Colors.grey.shade300,
            fadeInDuration: const Duration(milliseconds: 500),
          ),

          const SizedBox(height: 12),
          ElevatedButton.icon(
            onPressed: () => _evictImage(sampleWebUrl),
            icon: const Icon(Icons.cleaning_services),
            label: const Text('Evict Sample Image from Cache'),
          ),

          const SizedBox(height: 24),

          // -----------------------------------------------------------------
          // 3. GitHub & GitLab Direct Raw Loading
          // -----------------------------------------------------------------
          const SectionTitle('3. GitHub Blob to Raw CDN'),
          const Text(
            'Converts github.com/.../blob/... to raw.githubusercontent.com/...',
            style: TextStyle(color: Colors.grey, fontSize: 13),
          ),
          const SizedBox(height: 8),
          AdaptiveImage.gitHubImage(
            sampleGitHubUrl,
            width: double.infinity,
            height: 140,
            fit: BoxFit.contain,
          ),

          const SizedBox(height: 24),

          // -----------------------------------------------------------------
          // 4. Dropbox / Box / OneDrive
          // -----------------------------------------------------------------
          const SectionTitle('4. Dropbox Shared Image'),
          const SizedBox(height: 8),
          AdaptiveImage.dropboxImage(
            'https://www.dropbox.com/s/sample123/image.png?dl=0',
            width: double.infinity,
            height: 140,
            fit: BoxFit.cover,
          ),

          const SizedBox(height: 24),

          // -----------------------------------------------------------------
          // 5. Circle Avatar / Background Image with AdaptiveImageProvider
          // -----------------------------------------------------------------
          const SectionTitle('5. Background Image (AdaptiveImageProvider)'),
          const SizedBox(height: 8),
          const Center(
            child: CircleAvatar(
              radius: 50,
              backgroundImage: AdaptiveImageProvider(
                'https://picsum.photos/200',
                useCache: true,
              ),
            ),
          ),

          const SizedBox(height: 32),
        ],
      ),
    );
  }
}

/// Reusable section header widget.
class SectionTitle extends StatelessWidget {
  final String text;

  const SectionTitle(this.text, {super.key});

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
    );
  }
}