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

🧪 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:

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

Feel free to contribute to this project!