Summary - Images
- Flutter course
- Beginner
- Lesson 80/99
- 4 min
Combine AssetImage and Image.network to build a gallery.
Summary - Images
The Image family loads images from three main sources: AssetImage for local assets, Image.network for URLs, and Image.file for device files. The fit parameter (BoxFit) controls fitting behavior. Choosing the right source and the right fit matters for both performance and appearance.
Image.asset('assets/a.png', fit: BoxFit.cover)
Image.network('https://x.com/b.png')
Image.file(File('/tmp/c.png'))Practice Build a gallery row with two images
Inside a Row, show both Image.asset('assets/photo.jpg') and Image.network('https://picsum.photos/200'); give each fit: BoxFit.cover.
Starter code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// Bir Row içinde iki görsel göster, ikisine de cover ver
child: null,
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void main() {
print('gallery: 2 images');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
children: [
Image.asset(
'assets/photo.jpg',
fit: BoxFit.cover,
),
Image.network(
'https://picsum.photos/200',
fit: BoxFit.cover,
),
],
),
),
),
);
}
}Expected output
gallery: 2 images
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which constructor is used for an image on a remote server?
- AssetImage
- Image.asset
- Image.network Correct answer
- Image.file
Explanation: For an image on a remote server, Image.network is used; assets and files must be on the device or in the app.
2 Apply cover to a gallery image
Image.network(
'https://picsum.photos/300',
fit: ____,
)Image.network(
'https://picsum.photos/300',
fit: BoxFit.cover,
)Explanation: To fill the gallery frame, use BoxFit.cover; contain leaves gaps.
3 Image family summary
| Term | Meaning |
|---|---|
AssetImage |
Local asset image |
Image.network |
Image from a URL |
Image.file |
Image from the file system |
BoxFit.cover |
Fills the area and crops |