image_show 0.0.2

image_show: ^0.0.2 copied to clipboard

# image_show

A versatile Flutter widget to display images from network or asset sources, supporting JPG, PNG, and SVG formats with a customizable fallback icon. It uses `flutter_screenutil` for responsive sizing.

---

## ✨ Features

- 📡 Load images from network URLs (`http/https/dio`)
- 📁 Load images from local asset paths
- 🖼️ Supports JPG, PNG, and SVG formats
- 🧩 Customizable fallback icon if image fails to load or is null/empty
- 📱 Responsive sizing using `.h`, `.w` from `flutter_screenutil`
- 🎨 Flexible styling options: height, width, fit, border radius, background color, and border

---

## 🚀 Installation

Add the following to your `pubspec.yaml`:

```yaml
dependencies:
  image_show_widget: ^0.1.0 # Use the latest version
  flutter_svg: ^2.0.10 # Required for SVG support
  flutter_screenutil: ^5.9.0 # Required for responsive sizing

Then run:

flutter pub get

🛠️ Setup #

You must initialize ScreenUtil in your main.dart:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690), // Set your design size
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) {
        return MaterialApp(
          title: 'ImageShow Demo',
          home: child,
        );
      },
      child: const MyHomePage(),
    );
  }
}

📦 Usage #

Import the package:

import 'package:image_show/image_show.dart';

Use the ImageShow widget:

ImageShow(
  imagePath: 'https://your_image_url_or_asset_path',
  width: 100, // Scaled responsively
  height: 100,
  boxFit: BoxFit.cover,
  borderRadius: BorderRadius.circular(8.0),
  defaultIcon: Icons.person,
  defaultIconSize: 50,
  defaultIconColor: Colors.grey,
  backgroundColor: Colors.blueGrey[100],
  border: Border.all(color: Colors.blueGrey, width: 1),
)

🧪 Example #

Column(
  children: [
    ImageShow(
      imagePath: 'https://tinyurl.com/flutter-logo',
      width: 150,
      height: 150,
      borderRadius: BorderRadius.circular(75),
      backgroundColor: Colors.blueGrey[100],
      defaultIcon: Icons.image_not_supported,
      defaultIconColor: Colors.red,
    ),
    SizedBox(height: 20.h),
    ImageShow(
      imagePath: 'assets/my_local_image.png',
      width: 100,
      height: 100,
      boxFit: BoxFit.contain,
    ),
    SizedBox(height: 20.h),
    ImageShow(
      imagePath: null,
      width: 80,
      height: 80,
      defaultIcon: Icons.person,
      defaultIconSize: 60,
      defaultIconColor: Colors.purple,
      backgroundColor: Colors.purple[50],
      borderRadius: BorderRadius.circular(40),
    ),
    SizedBox(height: 20.h),
    ImageShow(
      imagePath: 'https://example.com/non_existent_image.jpg',
      width: 120,
      height: 120,
      defaultIcon: Icons.error_outline,
      defaultIconColor: Colors.orange,
      border: Border.all(color: Colors.orange, width: 2),
    ),
  ],
)

📋 Parameters #

🤝 Contributing #

Contributions are welcome! Feel free to submit a PR or open an issue.

📄 License #

This project is licensed under the MIT License. See the LICENSE file for details.

www.rahulreza.com