asset_widget 1.0.0

A powerful and flexible widget for rendering all types of visual assets in a single line of code!

🖼️ Asset Flutter Package

A powerful and flexible widget for rendering all types of visual assets in a single line of code!

Supports:

• ✅ Material Icons
• ✅ Cupertino Icons
• ✅ Asset Images (png, jpg, jpeg, gif)
• ✅ Network Images (png, jpg, jpeg, gif) — with caching
• ✅ File Images (from memory)
• ✅ SVGs (from assets)
• ✅ Lottie animations (from assets or network)

---

✨ Features

• Render different asset types using the same Asset widget
• Support for tap interaction via onTap
• Customize size, color, fit, shape, and border radius
• Display a placeholder widget while loading
• Display a fallback error widget when loading fails
• Automatically determines asset type at runtime
• Built-in network image caching

---

📦 Installation

Add the following to your pubspec.yaml:

dependencies:
  asset_widget: <latest_version>

Then run:

flutter pub get

---

🚀 Usage

Import the package

import 'package:asset_widget/asset.dart';

---

🧩 Examples

Material Icon

Asset(Icons.person, height: 32, color: Colors.blue)

Cupertino Icon

Asset(CupertinoIcons.person, height: 32, color: Colors.red)

---

Image from Assets

Asset('assets/images/image.jpg', height: 100, width: 100)

Image from Network (with caching)

Asset(
  'https://picsum.photos/seed/picsum/600/300',
  height: 150,
  width: 300,
  placeholder: CircularProgressIndicator(),
  errorWidget: Icon(Icons.error),
)

---

GIF from Assets

Asset('assets/giphy.gif', height: 150)

GIF from Network

Asset('https://media2.giphy.com/media/giphy.gif', height: 150)

---

SVG from Assets

Asset(
  'assets/icons/icon.svg',
  height: 64,
  width: 64,
  color: Colors.green,
)

---

Lottie from Assets

Asset('assets/animations/animation.json', height: 120)

Lottie from Network

Asset('https://assets9.lottiefiles.com/packages/lf20_zrqthn6o.json', height: 120)

---

🎨 Customization

All asset types support the following optional parameters:

Parameter	Type	Description
height	double?	Height of the asset
width	double?	Width of the asset
color	Color?	Tint color (applied to icons and SVGs)
placeholder	Widget?	Placeholder while loading
errorWidget	Widget?	Fallback widget on failure
fit	BoxFit (default: fill)	Image fitting behavior
borderRadius	BorderRadiusGeometry?	Rounded corners
shape	BoxShape?	Shape of the container (e.g.,BoxShape.circle)
onTap	void Function()?	Callback when tapped

---

🧪 Bonus Example with Border Radius and Tap Handler

Asset(
  'https://example.com/image.jpg',
  height: 120,
  width: 120,
  borderRadius: BorderRadius.circular(12),
  fit: BoxFit.cover,
  onTap: () => print('Asset tapped!'),
)

---

📁 Supported Asset Types & Detection Logic

The Asset widget intelligently detects the type using runtime checks:

Type	Detection Logic
Material/Cupertino	asset is IconData
Network Image	asset.toString().startsWith('http')
Asset Image	asset.toString().startsWith('assets/')
File Image	Otherwise assumes it's a file path
SVG	asset.endsWith('.svg')
Lottie (asset)	asset.endsWith('.json') and from assets
Lottie (network)	JSON file with http path

---

🧱 Example in a ListView

ListView(
  children: [
    Asset(Icons.home),
    Asset(CupertinoIcons.settings),
    Asset('assets/icon.svg'),
    Asset('assets/sample.jpg'),
    Asset('https://via.placeholder.com/150'),
    Asset('assets/anim.json'),
  ],
)

---

🔧 Dependencies

• flutter_svg
• lottie
• cached_network_image

---

💡 Tip

Use BoxFit.contain, BoxFit.cover, etc., to control how the asset fits inside its container.

---

🧑‍💻 Author

• Made with ❤️ by Syed Waleed Sherazi
• Find Me on: LinkedIn, Github, StackOverflow
• Contact for Business: [e-mail] (or message me on LinkedIn)

Feel free to contribute to this project!