YouTipFlutter Images
This section introduces image loading, local resource management, and network image handling in Flutter.
* * *
## Image Widget - Image Display
## Example: Various Image Loading Methods
// Load image from network
Image.network(
'https://example.com/image.png',
width:200,
height:200,
fit: BoxFit.cover,
)
// Load image from local assets
Image.asset('assets/images/logo.png')
// Load image from local file
Image.file(File('path/to/image.png'))
// Image with loading state
Image.network(
'https://example.com/image.png',
loadingBuilder:(context, child, loadingProgress){
if(loadingProgress ==null)return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes!=null
? loadingProgress.cumulativeBytesLoaded/
loadingProgress.expectedTotalBytes!
:null,
),
);
},
)
// Image with error handling
Image.network(
'https://example.com/image.png',
errorBuilder:(context, error, stackTrace){
return const Icon(Icons.error, size:50);
},
)
## Local Resource Management
Configure asset folders in pubspec.yaml:
flutter: assets: - assets/images/ - assets/data.json
## Example: Using Local Resources
// Using local images
class AssetImageExample extends StatelessWidget {
const AssetImageExample({super.key});
@override
Widget build(BuildContext context){
return Column(
children:[
// Using Image.asset to load
const Image(
image: AssetImage('assets/images/logo.png'),
width:100,
),
// Shorthand form
const Image.asset('assets/images/icon.png', width:50),
const SizedBox(height:20),
// Using image fit
Container(
width:200,
height:100,
decoration: BoxDecoration(
image:const DecorationImage(
image: AssetImage('assets/images/bg.jpg'),
fit: BoxFit.cover,
),
border: Border.all(color: Colors.grey),
),
),
],
);
}
}
* * *
## BoxFit Image Adaptation
| Value | Description |
| --- | --- |
| fill | Stretch to fill (may distort) |
| contain | Scale proportionally, maximize fit |
| cover | Scale proportionally, fully cover |
| fitWidth | Scale proportionally, fill width |
| fitHeight | Scale proportionally, fill height |
| none | Center display at original size |
| scaleDown | contain but not exceed original size |
* * *
## CachedNetworkImage - Image Caching
Use the cached_network_image package to implement image caching.
### Add Dependency
dependencies: cached_network_image: ^3.0.0
## Example: CachedNetworkImage
import'package:cached_network_image/cached_network_image.dart';
class CachedImageExample extends StatelessWidget {
const CachedImageExample({super.key});
@override
Widget build(BuildContext context){
return CachedNetworkImage(
imageUrl:'https://example.com/image.png',
// Show while loading
placeholder:(context, url)=>const CircularProgressIndicator(),
// Show on error
errorWidget:(context, url, error)=>const Icon(Icons.error),
// Image fit
fit: BoxFit.cover,
// Width and height
width:200,
height:200,
// Circular image
imageBuilder:(context, imageProvider)=> CircleAvatar(
backgroundImage: imageProvider,
),
);
}
}
> For network images, it is recommended to use CachedNetworkImage, which automatically caches images and improves loading performance.