image_show 0.0.1

Responsive images, reliable display.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_show/image_show.dart'; // Import your package

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

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

  @override
  Widget build(BuildContext context) {
    // Initialize ScreenUtil here. This is crucial for .h, .w, and .sp extensions
    // used within the ImageShow widget to work correctly.
    // Replace Size(360, 690) with your design size based on your UI/UX specifications.
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) {
        return MaterialApp(
          title: 'ImageShow Example',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          // The child of ScreenUtilInit is typically your app's main content,
          // which will have access to the responsive extensions.
          home: child,
        );
      },
      // Set your initial screen as the child.
      child: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('ImageShow Examples'),
      ),
      body: Center(
        child: SingleChildScrollView(
          // Use SingleChildScrollView to prevent overflow
          padding: EdgeInsets.all(16.w), // Apply responsive padding
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // Example 1: Network Image with specific size and rounded corners
              const Text(
                'Network Image (150x150, Rounded)',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 8.h),
              ImageShow(
                imagePath:
                    'https://tinyurl.com/flutter-logo', // Replace with a valid image URL
                width: 150, // Base width (will be 150.w)
                height: 150, // Base height (will be 150.h)
                borderRadius: BorderRadius.circular(75), // Make it round
                backgroundColor: Colors.blueGrey[100],
                defaultIcon: Icons.image_not_supported,
                defaultIconColor: Colors.red,
                boxFit: BoxFit.cover,
              ),
              SizedBox(height: 30.h), // Responsive spacing
              // Example 2: Asset Image with specific size and contain fit
              // Make sure you have 'assets/my_local_image.png' declared in your pubspec.yaml
              // and the actual file exists at that path.
              const Text(
                'Asset Image (100x100, Contain)',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 8.h),
              ImageShow(
                imagePath:
                    'assets/my_local_image.png', // Replace with your asset path
                width: 100,
                height: 100,
                boxFit: BoxFit.contain,
                backgroundColor: Colors.grey[200],
              ),
              SizedBox(height: 30.h),

              // Example 3: Network SVG Image
              const Text(
                'Network SVG Image (80x80)',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 8.h),
              ImageShow(
                imagePath:
                    'https://upload.wikimedia.org/wikipedia/commons/4/44/Google-flutter-logo.svg', // Example SVG URL
                width: 80,
                height: 80,
                boxFit: BoxFit.contain,
                backgroundColor: Colors.teal[50],
              ),
              SizedBox(height: 30.h),

              // Example 4: Fallback Icon (imagePath is null)
              const Text(
                'Fallback Icon (imagePath is null, 80x80)',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 8.h),
              ImageShow(
                imagePath: null, // No image path provided
                width: 80,
                height: 80,
                defaultIcon: Icons.person,
                defaultIconSize: 60, // Adjust icon size as needed
                defaultIconColor: Colors.purple,
                backgroundColor: Colors.purple[50],
                borderRadius: BorderRadius.circular(
                  40,
                ), // Make the container round
              ),
              SizedBox(height: 30.h),

              // Example 5: Fallback Icon (imagePath is empty string)
              const Text(
                'Fallback Icon (imagePath is empty, 60x60)',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 8.h),
              ImageShow(
                imagePath: '', // Empty image path
                width: 60,
                height: 60,
                defaultIcon: Icons.image,
                defaultIconSize: 40,
                defaultIconColor: Colors.blueGrey,
                backgroundColor: Colors.blueGrey[50],
              ),
              SizedBox(height: 30.h),

              // Example 6: Fallback Icon (failed network image)
              const Text(
                'Fallback Icon (Failed Network Image, 120x120)',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 8.h),
              ImageShow(
                imagePath:
                    'https://example.com/non_existent_image.jpg', // This URL will likely fail
                width: 120,
                height: 120,
                defaultIcon: Icons.error_outline,
                defaultIconColor: Colors.orange,
                border: Border.all(color: Colors.orange, width: 2),
                backgroundColor: Colors.orange[50],
              ),
              SizedBox(height: 30.h),

              // Example 7: Default width (full screen) and default height (100.h)
              const Text(
                'Default Width (Full Screen) & Default Height (100.h)',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 8.h),
              ImageShow(
                imagePath:
                    'assets/background_placeholder.png', // Use an asset or network image
                // width and height are not provided, so defaults apply
                boxFit: BoxFit.cover,
                backgroundColor: Colors.teal[100],
              ),
              SizedBox(height: 30.h),
            ],
          ),
        ),
      ),
    );
  }
}