image_show 0.0.2

A customizable Flutter widget to show images from network or assets with SVG, PNG, JPG support, fallback icon, and responsive design.

---

# 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

Parameter	Type	Description	Default	Required
imagePath	String?	Path to image (URL or asset). Shows default icon if invalid.	null	❌
height	double?	Height scaled with .h. Defaults to 100.h.	null	❌
width	double?	Width scaled with .w. Defaults to full screen width.	null	❌
boxFit	BoxFit?	How to fit the image inside the container.	BoxFit.cover	❌
borderRadius	BorderRadius?	Corner radius of the image container.	BorderRadius.zero	❌
defaultIcon	IconData	Fallback icon if image is null or fails.	Icons.person	❌
defaultIconSize	double	Size of the fallback icon.	50.0	❌
defaultIconColor	Color	Color of the fallback icon.	Colors.grey	❌
backgroundColor	Color?	Background color of the container.	null	❌
border	BoxBorder?	Optional border around the image.	null	❌

---

🤝 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