In Flutter, images can be handled using the Image
widget. Here are some ways to do it:
1. Loading Local Images
To load a local image, you need to use the AssetBundle
class and specify the path to your image file.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Image.asset('assets/image.jpg'),
),
),
);
}
}
2. Loading Network Images
To load an image from a network URL, you can use the NetworkImage
class.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Image.network('https://example.com/image.jpg'),
),
),
);
}
}
3. Loading Images from a URL with caching
To load an image from a network URL and cache it, you can use the FadeInImage
widget.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: FadeInImage.assetNetwork(
image: 'https://example.com/image.jpg',
placeholder: 'assets/loading.gif', // Optional
),
),
),
);
}
}
4. Handling Image Errors
When loading images, you can use the onError
property to handle any errors.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Image.network(
'https://example.com/image.jpg',
onError: (context, error) => Text('Error loading image'),
),
),
),
);
}
}
5. Compressing Images
If you need to compress images before displaying them in Flutter, you can use the image
package.
import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final image = img.decodeImage(File('assets/image.jpg').readAsBytesSync());
final compressedImage = img.compressExtension(image, quality: 80);
return MaterialApp(
home: Scaffold(
body: Center(
child: Image.memory(compressedImage),
),
),
);
}
}
Remember to handle the permissions and caching for your images based on your app’s specific requirements.
Cached Network Image
You can use the CachedNetworkImage
widget from the cached_network_image
package to load and cache network images.
First, add the cached_network_image
package to your project:
dependencies:
cached_network_image: ^2.0.0
Then, you can use it like this:
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: CachedNetworkImage(
imageUrl: 'https://example.com/image.jpg',
placeholder: CircularProgressIndicator(),
errorWidget: Icon(Icons.error),
),
),
),
);
}
}
Modifying the Image During Rendering
To modify an image during rendering, you can use a combination of widgets and functions. Here are some examples:
Rounded Corners
You can add rounded corners to an image using the ClipOval
widget.
import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final image = img.decodeImage(File('assets/image.jpg').readAsBytesSync());
return MaterialApp(
home: Scaffold(
body: Center(
child: ClipOval(
child: Image.memory(img.encodePng(image)),
),
),
),
);
}
}
Transparency
You can add transparency to an image using the ColorFiltered
widget.
import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final image = img.decodeImage(File('assets/image.jpg').readAsBytesSync());
return MaterialApp(
home: Scaffold(
body: Center(
child: ColorFiltered(
colorFilter: ColorFilter.mode(Colors.white.withOpacity(0.5), BlendMode.screen),
child: Image.memory(img.encodePng(image)),
),
),
),
);
}
}
Other Effects
https://api.flutter.dev/flutter/widgets/ColorFiltered-class.html
You can also add other effects to an image, such as:
- Grayscale:
ColorFiltered(colorFilter: ColorFilter.mode(Colors.black.withOpacity(1), BlendMode.multiply))
- Invert:
ColorFiltered(colorFilter: ColorFilter.mode(Colors.white.withOpacity(0.5), BlendMode.screen))
- Sepia:
ColorFiltered(colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.multiply))
Note that these are just a few examples, and you can experiment with different color filters and blend modes to achieve the desired effect.