🖼️ 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

💡 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: syedwaleedshah01@gmail.com (or message me on LinkedIn)

Feel free to contribute to this project!