Camera access in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when this Flutter camera preview widget is displayed?

Consider this Flutter widget that shows a camera preview. What will the user see when this widget is rendered?

Flutter

import 'package:camera/camera.dart';
import 'package:flutter/material.dart';

class CameraPreviewWidget extends StatefulWidget {
  final CameraController controller;
  const CameraPreviewWidget({required this.controller, super.key});

  @override
  State<CameraPreviewWidget> createState() => _CameraPreviewWidgetState();
}

class _CameraPreviewWidgetState extends State<CameraPreviewWidget> {
  @override
  Widget build(BuildContext context) {
    if (!widget.controller.value.isInitialized) {
      return const Center(child: CircularProgressIndicator());
    }
    return CameraPreview(widget.controller);
  }
}

A The widget crashes because CameraPreview requires a different controller type.

B The widget shows a static image from the camera roll instead of live feed.

C A loading spinner is shown until the camera is ready, then the live camera feed appears filling the widget area.

D Nothing is shown because the controller is never initialized.

💡 Hint

Think about what happens before the camera is ready and after initialization.

The widget first checks if the camera controller is initialized. If not, it shows a spinner. Once ready, it displays the live camera feed using CameraPreview.

❓ lifecycle

intermediate

What is the correct way to manage the CameraController lifecycle in Flutter?

You create a CameraController in initState. Which method should you override to properly release the camera resources?

A No need to release resources; Flutter handles it automatically.

B Override deactivate() and call controller.dispose() inside it.

C Override didChangeDependencies() and call controller.dispose() inside it.

D Override dispose() and call controller.dispose() inside it.

💡 Hint

Think about cleaning up resources when the widget is removed permanently.

dispose() is called when the widget is permanently removed. You should dispose the CameraController there to free camera resources.

📝 Syntax

advanced

What error does this Flutter camera initialization code produce?

Analyze this snippet initializing a CameraController. What error will it cause?

Flutter

late CameraController controller;

void initCamera() async {
  final cameras = await availableCameras();
  controller = CameraController(cameras.first, ResolutionPreset.high);
  await controller.initialize();
}

@override
void initState() {
  super.initState();
  initCamera();
}

A No error; the camera initializes correctly.

B Runtime error because initCamera is async but not awaited in initState.

C LateInitializationError because controller is used before initialization.

D Syntax error due to missing async keyword in initState.

💡 Hint

Consider what happens when you call an async function without awaiting it in initState.

initCamera is async but called without await in initState, so controller may be used before initialization completes, causing runtime errors.

❓ navigation

advanced

What happens if you navigate away from a screen with an active CameraController without disposing it?

If you push a new screen on top of a camera preview screen but forget to dispose the CameraController, what is the likely outcome?

A The camera continues running in background, causing battery drain and possible app crash.

B The camera automatically stops and releases resources when screen is hidden.

C The app throws a compile-time error preventing navigation.

D Nothing happens; camera resources are managed by the OS.

💡 Hint

Think about resource management and what happens if you don't clean up.

If you don't dispose the CameraController, the camera stays active, wasting battery and possibly causing conflicts or crashes.

🧠 Conceptual

expert

Which Flutter permission handling approach ensures camera access works on both Android and iOS?

You want to request camera permission before initializing the camera. Which approach is best to handle permissions cross-platform?

A Use the permission_handler package to request permission at runtime before camera initialization.

B Only declare camera permission in AndroidManifest.xml and Info.plist; no runtime request needed.

C Initialize the camera directly; the system will prompt for permission automatically.

D Use platform channels to write native code for permission requests on each platform.

💡 Hint

Think about runtime permission requests on modern mobile OSes.

Modern Android and iOS require runtime permission requests. The permission_handler package simplifies this cross-platform.

Practice

1. What is the main purpose of the camera package in Flutter?

easy

A. To manage app navigation between screens

B. To access and control the device camera for taking pictures or videos

C. To play audio files in the app

D. To handle user authentication

Solution

1. Step 1: Understand the package purpose

   The camera package is designed to access device cameras.

2. Step 2: Match purpose with options

   Only To access and control the device camera for taking pictures or videos describes camera control for pictures or videos.

3. Final Answer:

   To access and control the device camera for taking pictures or videos -> Option B

4. Quick Check:

   camera package = device camera access [OK]

Hint: Remember camera package controls device cameras only [OK]

Common Mistakes:

• Confusing camera package with audio or navigation packages
• Thinking it handles user login or authentication
• Assuming it manages app UI layout

2. Which of the following is the correct way to initialize a CameraController in Flutter?

easy

A. CameraController controller = CameraController(camera, ResolutionPreset.high);

B. CameraController controller = new CameraController();

C. CameraController controller = CameraController();

D. CameraController controller = CameraController(camera);

Solution

1. Step 1: Check CameraController constructor requirements

   The constructor requires a CameraDescription and a ResolutionPreset.

2. Step 2: Compare options with correct syntax

   CameraController controller = CameraController(camera, ResolutionPreset.high); correctly passes both parameters.

3. Final Answer:

   CameraController controller = CameraController(camera, ResolutionPreset.high); -> Option A

4. Quick Check:

   Controller needs camera and resolution [OK]

Hint: Always pass camera and resolution to CameraController [OK]

Common Mistakes:

• Omitting resolution preset parameter
• Using empty constructor without parameters
• Forgetting to import camera package

3. Given this Flutter code snippet, what will be the output on the screen?

final cameras = await availableCameras();
final controller = CameraController(cameras[0], ResolutionPreset.medium);
await controller.initialize();
return CameraPreview(controller);

medium

A. A static image from the camera

B. A blank screen with no camera preview

C. A live camera preview from the first available camera

D. An error because controller is not initialized

Solution

1. Step 1: Analyze camera initialization

   The code gets available cameras, creates a controller for the first camera, and initializes it.

2. Step 2: Understand CameraPreview behavior

   After initialization, CameraPreview shows live feed from the camera controller.

3. Final Answer:

   A live camera preview from the first available camera -> Option C

4. Quick Check:

   Initialized controller + CameraPreview = live feed [OK]

Hint: Initialized controller + CameraPreview shows live feed [OK]

Common Mistakes:

• Assuming preview shows static image
• Forgetting to await controller.initialize()
• Thinking preview shows blank without error

4. What is wrong with this Flutter code snippet for camera usage?

final cameras = await availableCameras();
final controller = CameraController(cameras[0], ResolutionPreset.high);
return CameraPreview(controller);

medium

A. The controller is not initialized before use

B. The camera list is empty

C. ResolutionPreset.high is invalid

D. CameraPreview requires a widget key

Solution

1. Step 1: Check controller initialization

   The code creates the controller but does not call initialize() or await it.

2. Step 2: Understand CameraPreview requirements

   CameraPreview needs an initialized controller to display the camera feed properly.

3. Final Answer:

   The controller is not initialized before use -> Option A

4. Quick Check:

   Controller must be initialized before preview [OK]

Hint: Always await controller.initialize() before CameraPreview [OK]

Common Mistakes:

• Skipping controller.initialize() call
• Assuming CameraPreview works without initialization
• Confusing resolution presets with initialization

5. You want to build a Flutter app that takes a picture when a button is pressed and saves it to a file. Which sequence of steps is correct?

hard

A. Call takePicture() before initializing CameraController, then save file

B. Save file first, then initialize CameraController and call takePicture()

C. Show CameraPreview without initializing controller, then call takePicture()

D. Initialize CameraController, show CameraPreview, call takePicture(), save file

Solution

1. Step 1: Initialize and prepare camera

   First, create and initialize the CameraController to access the camera hardware.

2. Step 2: Show live preview and take picture

   Display CameraPreview so user sees camera feed, then call takePicture() on button press.

3. Step 3: Save the captured image file

   After taking picture, save the returned file to storage.

4. Final Answer:

   Initialize CameraController, show CameraPreview, call takePicture(), save file -> Option D

5. Quick Check:

   Init controller -> preview -> takePicture -> save [OK]

Hint: Initialize first, preview, then take and save picture [OK]

Common Mistakes:

• Calling takePicture before initialization
• Skipping preview and confusing flow
• Trying to save before taking picture