image_multi_type 1.0.0 
image_multi_type: ^1.0.0 copied to clipboard
Flutter package for displaying images from network, assets, SVG, files, or widgets with caching and error handling.
example/lib/main.dart
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image_multi_type/image_multi_type_pakage.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Multi Type Example',
theme: ThemeData(
primarySwatch: Colors.blue,
useMaterial3: true,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _currentIndex = 0;
final List<Widget> _pages = [
const BasicExamplesPage(),
const CircleExamplesPage(),
const RoundExamplesPage(),
const AdvancedExamplesPage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Image Multi Type Examples'),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.image),
label: 'Basic',
),
BottomNavigationBarItem(
icon: Icon(Icons.circle),
label: 'Circle',
),
BottomNavigationBarItem(
icon: Icon(Icons.rounded_corner),
label: 'Round',
),
BottomNavigationBarItem(
icon: Icon(Icons.rounded_corner),
label: 'Advanced',
),
],
),
);
}
}
class BasicExamplesPage extends StatelessWidget {
const BasicExamplesPage({super.key});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Basic ImageMultiType Examples',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
// Network Image
_buildExampleCard(
title: 'Network Image',
description: 'Loading image from internet with caching',
child: ImageMultiType(
url: 'https://picsum.photos/300/200?random=1',
height: 200,
width: 300,
fit: BoxFit.cover,
),
code: '''ImageMultiType(
url: 'https://picsum.photos/300/200?random=1',
height: 200,
width: 300,
fit: BoxFit.cover,
)''',
),
// Asset Image (placeholder)
_buildExampleCard(
title: 'Asset Image',
description: 'Loading image from assets folder',
child: Container(
height: 200,
width: 300,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(8),
),
child: const Center(
child: Text(
'Asset Image\n(Add image to assets/images/)',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey),
),
),
),
code: '''ImageMultiType(
url: 'assets/images/logo.png',
height: 200,
width: 300,
)''',
),
// SVG Asset (placeholder)
_buildExampleCard(
title: 'SVG Asset',
description: 'Loading SVG from assets with color tinting',
child: Container(
height: 200,
width: 300,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(8),
),
child: const Center(
child: Text(
'SVG Asset\n(Add SVG to assets/icons/)',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey),
),
),
),
code: '''ImageMultiType(
url: 'assets/icons/icon.svg',
height: 200,
width: 300,
color: Colors.blue,
)''',
),
// Icon
_buildExampleCard(
title: 'Icon',
description: 'Displaying Flutter icons with custom size and color',
child: ImageMultiType(
url: Icons.favorite,
height: 100,
width: 100,
color: Colors.red,
),
code: '''ImageMultiType(
url: Icons.favorite,
height: 100,
width: 100,
color: Colors.red,
)''',
),
// Custom Widget
_buildExampleCard(
title: 'Custom Widget',
description: 'Using any Flutter widget as image source',
child: ImageMultiType(
url: Container(
height: 200,
width: 300,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.blue, Colors.purple],
),
borderRadius: BorderRadius.circular(8),
),
child: const Center(
child: Text(
'Custom Widget',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
),
),
code: '''ImageMultiType(
url: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.purple],
),
),
child: Text('Custom Widget'),
),
)''',
),
],
),
);
}
Widget _buildExampleCard({
required String title,
required String description,
required Widget child,
required String code,
}) {
return Card(
margin: const EdgeInsets.only(bottom: 20),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
Text(
description,
style: TextStyle(color: Colors.grey[600]),
),
const SizedBox(height: 16),
Center(child: child),
const SizedBox(height: 16),
Container(
width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(8),
),
child: Text(
code,
style: const TextStyle(fontFamily: 'monospace', fontSize: 12),
),
),
],
),
),
);
}
}
class CircleExamplesPage extends StatelessWidget {
const CircleExamplesPage({super.key});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Circle Image Examples',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
// Different sizes
_buildExampleCard(
title: 'Different Sizes',
description: 'Circle images with various sizes',
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CircleImageWidget(
url: 'https://picsum.photos/100/100?random=2',
size: 60,
),
CircleImageWidget(
url: 'https://picsum.photos/100/100?random=3',
size: 80,
),
CircleImageWidget(
url: 'https://picsum.photos/100/100?random=4',
size: 100,
),
],
),
code: '''CircleImageWidget(
url: 'https://picsum.photos/100/100?random=2',
size: 60,
)''',
),
// With background color
_buildExampleCard(
title: 'With Background Color',
description: 'Circle images with custom background colors',
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CircleImageWidget(
url: 'https://picsum.photos/100/100?random=5',
size: 80,
color: Colors.blue[100],
),
CircleImageWidget(
url: 'https://picsum.photos/100/100?random=6',
size: 80,
color: Colors.green[100],
),
CircleImageWidget(
url: 'https://picsum.photos/100/100?random=7',
size: 80,
color: Colors.purple[100],
),
],
),
code: '''CircleImageWidget(
url: 'https://picsum.photos/100/100?random=5',
size: 80,
color: Colors.blue[100],
)''',
),
// With margin and padding
_buildExampleCard(
title: 'With Margin and Padding',
description: 'Circle images with custom spacing',
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CircleImageWidget(
url: 'https://picsum.photos/100/100?random=8',
size: 80,
margin: const EdgeInsets.all(8),
color: Colors.red[100],
),
CircleImageWidget(
url: 'https://picsum.photos/100/100?random=9',
size: 80,
padding: const EdgeInsets.all(4),
color: Colors.orange[100],
),
],
),
code: '''CircleImageWidget(
url: 'https://picsum.photos/100/100?random=8',
size: 80,
margin: EdgeInsets.all(8),
color: Colors.red[100],
)''',
),
],
),
);
}
Widget _buildExampleCard({
required String title,
required String description,
required Widget child,
required String code,
}) {
return Card(
margin: const EdgeInsets.only(bottom: 20),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
Text(
description,
style: TextStyle(color: Colors.grey[600]),
),
const SizedBox(height: 16),
Center(child: child),
const SizedBox(height: 16),
Container(
width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(8),
),
child: Text(
code,
style: const TextStyle(fontFamily: 'monospace', fontSize: 12),
),
),
],
),
),
);
}
}
class RoundExamplesPage extends StatelessWidget {
const RoundExamplesPage({super.key});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Round Image Examples',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
// Different border radius
_buildExampleCard(
title: 'Different Border Radius',
description: 'Rounded images with various corner radius',
child: Column(
children: [
RoundImageWidget(
url: 'https://picsum.photos/300/150?random=10',
height: 100,
width: 300,
radios: 8,
),
const SizedBox(height: 16),
RoundImageWidget(
url: 'https://picsum.photos/300/150?random=11',
height: 100,
width: 300,
radios: 16,
),
const SizedBox(height: 16),
RoundImageWidget(
url: 'https://picsum.photos/300/150?random=12',
height: 100,
width: 300,
radios: 32,
),
],
),
code: '''RoundImageWidget(
url: 'https://picsum.photos/300/150?random=10',
height: 100,
width: 300,
radios: 8,
)''',
),
// Different sizes
_buildExampleCard(
title: 'Different Sizes',
description: 'Rounded images with various dimensions',
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
RoundImageWidget(
url: 'https://picsum.photos/100/100?random=13',
height: 80,
width: 80,
radios: 16,
),
RoundImageWidget(
url: 'https://picsum.photos/100/100?random=14',
height: 100,
width: 150,
radios: 16,
),
RoundImageWidget(
url: 'https://picsum.photos/100/100?random=15',
height: 120,
width: 80,
radios: 16,
),
],
),
code: '''RoundImageWidget(
url: 'https://picsum.photos/100/100?random=13',
height: 80,
width: 80,
radios: 16,
)''',
),
// With color tinting
_buildExampleCard(
title: 'With Color Tinting',
description: 'Rounded images with color overlay',
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
RoundImageWidget(
url: 'https://picsum.photos/100/100?random=16',
height: 80,
width: 80,
radios: 16,
color: Colors.blue.withValues(alpha: 0.3),
),
RoundImageWidget(
url: 'https://picsum.photos/100/100?random=17',
height: 80,
width: 80,
radios: 16,
color: Colors.green.withValues(alpha: 0.3),
),
RoundImageWidget(
url: 'https://picsum.photos/100/100?random=18',
height: 80,
width: 80,
radios: 16,
color: Colors.red.withValues(alpha: 0.3),
),
],
),
code: '''RoundImageWidget(
url: 'https://picsum.photos/100/100?random=16',
height: 80,
width: 80,
radios: 16,
color: Colors.blue.withValues(alpha:)(0.3),
)''',
),
],
),
);
}
Widget _buildExampleCard({
required String title,
required String description,
required Widget child,
required String code,
}) {
return Card(
margin: const EdgeInsets.only(bottom: 20),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
Text(
description,
style: TextStyle(color: Colors.grey[600]),
),
const SizedBox(height: 16),
Center(child: child),
const SizedBox(height: 16),
Container(
width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(8),
),
child: Text(
code,
style: const TextStyle(fontFamily: 'monospace', fontSize: 12),
),
),
],
),
),
);
}
}
class AdvancedExamplesPage extends StatelessWidget {
const AdvancedExamplesPage({super.key});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Advanced Examples',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
// Error handling
_buildExampleCard(
title: 'Error Handling',
description: 'Custom error images and fallbacks',
child: Column(
children: [
// Set custom error image
ElevatedButton(
onPressed: () {
setImageMultiTypeErrorImage(
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.red[100],
borderRadius: BorderRadius.circular(8),
),
child: const Column(
children: [
Icon(Icons.error, color: Colors.red, size: 32),
SizedBox(height: 8),
Text('Custom Error', style: TextStyle(color: Colors.red)),
],
),
),
);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Custom error image set!')),
);
},
child: const Text('Set Custom Error Image'),
),
const SizedBox(height: 16),
// Test with invalid URL
ImageMultiType(
url: 'https://invalid-url-that-will-fail.com/image.jpg',
height: 150,
width: 300,
fit: BoxFit.cover,
),
],
),
code: '''// Set custom error image
setImageMultiTypeErrorImage(
Container(
decoration: BoxDecoration(
color: Colors.red[100],
borderRadius: BorderRadius.circular(8),
),
child: Icon(Icons.error, color: Colors.red),
),
);
// Use with invalid URL to see error handling
ImageMultiType(
url: 'https://invalid-url.com/image.jpg',
height: 150,
width: 300,
)''',
),
// File from bytes
_buildExampleCard(
title: 'File from Bytes',
description: 'Display images from byte data',
child: ImageMultiType(
url: Uint8List.fromList([
0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A,
// This is just a placeholder - not a real PNG
]),
height: 150,
width: 300,
fit: BoxFit.cover,
),
code: '''ImageMultiType(
url: Uint8List.fromList([...]),
height: 150,
width: 300,
fit: BoxFit.cover,
)''',
),
// Async file loading
_buildExampleCard(
title: 'Async File Loading',
description: 'Loading images asynchronously',
child: ImageMultiType(
url: Future.delayed(
const Duration(seconds: 2),
() => Uint8List.fromList([
0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A,
// This is just a placeholder - not a real PNG
]),
),
height: 150,
width: 300,
fit: BoxFit.cover,
),
code: '''ImageMultiType(
url: Future.delayed(
Duration(seconds: 2),
() => Uint8List.fromList([...]),
),
height: 150,
width: 300,
)''',
),
// Mixed content
_buildExampleCard(
title: 'Mixed Content Grid',
description: 'Combining different image types in a grid',
child: GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
children: [
ImageMultiType(
url: 'https://picsum.photos/150/150?random=19',
height: 150,
width: 150,
fit: BoxFit.cover,
),
ImageMultiType(
url: Icons.star,
height: 150,
width: 150,
color: Colors.amber,
),
ImageMultiType(
url: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.pink, Colors.purple],
),
borderRadius: BorderRadius.circular(8),
),
child: const Center(
child: Text(
'Custom',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
),
ImageMultiType(
url: 'https://picsum.photos/150/150?random=20',
height: 150,
width: 150,
fit: BoxFit.cover,
),
],
),
code: '''GridView.count(
crossAxisCount: 2,
children: [
ImageMultiType(url: 'https://picsum.photos/150/150?random=19'),
ImageMultiType(url: Icons.star, color: Colors.amber),
ImageMultiType(url: Container(...)),
ImageMultiType(url: 'https://picsum.photos/150/150?random=20'),
],
)''',
),
],
),
);
}
Widget _buildExampleCard({
required String title,
required String description,
required Widget child,
required String code,
}) {
return Card(
margin: const EdgeInsets.only(bottom: 20),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
Text(
description,
style: TextStyle(color: Colors.grey[600]),
),
const SizedBox(height: 16),
child,
const SizedBox(height: 16),
Container(
width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(8),
),
child: Text(
code,
style: const TextStyle(fontFamily: 'monospace', fontSize: 12),
),
),
],
),
),
);
}
}Metadata
1
likes
0
points
78
downloads
Publisher
unverified uploader
Weekly Downloads
Metadata
Flutter package for displaying images from network, assets, SVG, files, or widgets with caching and error handling.
Repository (GitHub)
View/report issues
Documentation
License
unknown (license)
Dependencies
cached_network_image, flutter, flutter_cache_manager, flutter_svg
