app_image_widgets 1.0.0

All-in-one image widget for Flutter. One widget for network, asset, file and memory images with WebP / PNG / JPEG support, smart caching, retries, shimmer / circular / skeleton loaders, person & custo [...]

example/lib/main.dart

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

void main() {
  // Optional global config — set once.
  AppImageConfig.baseUrl = 'https://picsum.photos';
  AppImageConfig.maxRetries = 2;
  AppImageConfig.enableLogs = true;

  runApp(const ExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'app_image_widgets example',
      theme: ThemeData(colorSchemeSeed: Colors.teal, useMaterial3: true),
      home: const DemoPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('app_image_widgets demo')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          const Text('Network + shimmer loader + zoom'),
          const SizedBox(height: 8),
          const AppImage(
            url: 'https://picsum.photos/seed/one/800/500',
            height: 180,
            enableZoom: true,
            loaderType: AppImageLoaderType.shimmer,
            shape: AppImageShape.rounded,
          ),
          const SizedBox(height: 24),
          const Text('Circle avatar + person placeholder + circular loader'),
          const SizedBox(height: 8),
          const Row(
            children: [
              AppImage(
                url: 'https://picsum.photos/seed/avatar/300/300',
                width: 72,
                height: 72,
                shape: AppImageShape.circle,
                loaderType: AppImageLoaderType.circular,
                placeholderType: AppImagePlaceholderType.person,
              ),
              SizedBox(width: 12),
              // Broken url -> person placeholder after retries.
              AppImage(
                url: 'https://example.invalid/broken.jpg',
                width: 72,
                height: 72,
                shape: AppImageShape.circle,
                placeholderType: AppImagePlaceholderType.person,
              ),
            ],
          ),
          const SizedBox(height: 24),
          const Text('Relative url (uses AppImageConfig.baseUrl)'),
          const SizedBox(height: 8),
          const AppImage(
            url: '/seed/relative/800/400',
            height: 160,
            loaderType: AppImageLoaderType.skeleton,
            borderRadius: BorderRadius.all(Radius.circular(20)),
            shape: AppImageShape.rounded,
          ),
          const SizedBox(height: 24),
          const Text('Custom loader + custom placeholder'),
          const SizedBox(height: 8),
          AppImage(
            url: 'https://example.invalid/will-fail.png',
            height: 120,
            maxRetries: 1,
            loaderType: AppImageLoaderType.custom,
            customLoader: const Center(child: Text('Loading…')),
            placeholderType: AppImagePlaceholderType.custom,
            customPlaceholder: Container(
              height: 120,
              color: Colors.red.shade50,
              alignment: Alignment.center,
              child: const Text('Could not load 😢'),
            ),
          ),
        ],
      ),
    );
  }
}