Summary - Camera

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);

Exercise 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.

Show example 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);
}

Test yourself

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
- Both work only on Android
- Both require a CameraController
- Both return Future<int>
Show answer

Both return an XFile and are processed via file.path — Both pickImage and takePicture return an XFile; the file path is obtained via file.path and processed the same way.

Process the gallery image

final file = await picker.pickImage(
  source: ImageSource.____,
);
print(file!.path);

Show answer

final file = await picker.pickImage(
  source: ImageSource.gallery,
);
print(file!.path);

Photo screen parts

ImagePicker

Gallery picker
CameraController

Camera controller
pickImage

Picks from gallery
takePicture

Takes a photo

Next lesson: What is the location package?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies