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

Feel free to contribute to this project!

Libraries

asset