Summary - Camera
- Flutter course
- Advanced
- Lesson 35/69
- 4 min
Combine image_picker and CameraController to make a photo screen.
Photo screen
A photo screen combines image_picker and CameraController. The user uses pickImage to pick from the gallery and CameraController to capture with a live camera. The XFile obtained from both paths is processed the same way via file.path.
final file = await picker.pickImage(source: ImageSource.gallery);
// or
final file = await controller.takePicture();
print(file.path);Practice Write a photo flow
Create an ImagePicker and pick an image with ImageSource.gallery; print its path. Then create a CameraController, initialize it with initialize, capture a photo with takePicture and print its path.
Starter code
enum ImageSource { gallery, camera }
class XFile {
final String path;
XFile(this.path);
}
class ImagePicker {
Future<XFile?> pickImage({required ImageSource source}) async {
return XFile('/tmp/picked.png');
}
}
class CameraDescription {
final String name;
CameraDescription(this.name);
}
enum ResolutionPreset { low, medium, high }
class CameraController {
final CameraDescription camera;
final ResolutionPreset resolution;
CameraController(this.camera, this.resolution);
Future<void> initialize() async {}
Future<XFile> takePicture() async => XFile('/tmp/photo.png');
}
void main() async {
// ImagePicker ile galeriden görsel seç, yazdır
// CameraController oluştur, başlat, fotoğraf çek, yazdır
}Sample solution
enum ImageSource { gallery, camera }
class XFile {
final String path;
XFile(this.path);
}
class ImagePicker {
Future<XFile?> pickImage({required ImageSource source}) async {
return XFile('/tmp/picked.png');
}
}
class CameraDescription {
final String name;
CameraDescription(this.name);
}
enum ResolutionPreset { low, medium, high }
class CameraController {
final CameraDescription camera;
final ResolutionPreset resolution;
CameraController(this.camera, this.resolution);
Future<void> initialize() async {}
Future<XFile> takePicture() async => XFile('/tmp/photo.png');
}
void main() async {
final picker = ImagePicker();
final picked = await picker.pickImage(source: ImageSource.gallery);
print(picked!.path);
final controller = CameraController(
CameraDescription('0'),
ResolutionPreset.high,
);
await controller.initialize();
final file = await controller.takePicture();
print(file.path);
}Expected output
/tmp/picked.png /tmp/photo.png
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the common point between picking from the gallery and capturing with the camera on a photo screen?
- Both return an XFile and are processed via file.path Correct answer
- Both work only on Android
- Both require a CameraController
- Both return Future<int>
Explanation: Both pickImage and takePicture return an XFile; the file path is obtained via file.path and processed the same way.
2 Process the gallery image
final file = await picker.pickImage(
source: ImageSource.____,
);
print(file!.path);final file = await picker.pickImage(
source: ImageSource.gallery,
);
print(file!.path);Explanation: To pick from the gallery you use ImageSource.gallery; camera captures from the camera.
3 Photo screen parts
| Term | Meaning |
|---|---|
ImagePicker |
Gallery picker |
CameraController |
Camera controller |
pickImage |
Picks from gallery |
takePicture |
Takes a photo |