Permissions handling in Flutter - Mini App: Build & Ship

Build: Permissions Screen

This screen asks the user for camera permission and shows the current permission status.

Target UI

Permissions Screen

[Request Camera Permission]

Status: Unknown

Add a button labeled 'Request Camera Permission'.

When tapped, request camera permission from the user.

Display the current permission status below the button.

Handle permission granted, denied, and permanently denied states.

Use the 'permission_handler' package.

Starter Code

Flutter

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

class PermissionsScreen extends StatefulWidget {
  @override
  State<PermissionsScreen> createState() => _PermissionsScreenState();
}

class _PermissionsScreenState extends State<PermissionsScreen> {
  String _status = 'Unknown';

  void _requestPermission() async {
    // TODO: Request camera permission and update _status
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Permissions Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _requestPermission,
              child: Text('Request Camera Permission'),
            ),
            SizedBox(height: 20),
            Text('Status: $_status'),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

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

class PermissionsScreen extends StatefulWidget {
  @override
  State<PermissionsScreen> createState() => _PermissionsScreenState();
}

class _PermissionsScreenState extends State<PermissionsScreen> {
  String _status = 'Unknown';

  void _requestPermission() async {
    final status = await Permission.camera.request();
    String newStatus;
    if (status.isGranted) {
      newStatus = 'Granted';
    } else if (status.isDenied) {
      newStatus = 'Denied';
    } else if (status.isPermanentlyDenied) {
      newStatus = 'Permanently Denied';
    } else {
      newStatus = 'Unknown';
    }
    setState(() {
      _status = newStatus;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Permissions Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _requestPermission,
              child: Text('Request Camera Permission'),
            ),
            SizedBox(height: 20),
            Text('Status: $_status'),
          ],
        ),
      ),
    );
  }
}

We use the permission_handler package to ask for camera permission.

When the button is pressed, _requestPermission runs. It requests camera permission and waits for the result.

Based on the result, we update the _status string to show if permission is granted, denied, or permanently denied.

Calling setState refreshes the screen to show the new status.

Final Result

Completed Screen

Permissions Screen

[Request Camera Permission]

Status: Granted

User taps 'Request Camera Permission' button.

App asks for camera permission from the system.

Status text updates to 'Granted', 'Denied', or 'Permanently Denied' based on user choice.

Stretch Goal

Add a button to open app settings if permission is permanently denied.

💡 Hint

Use Permission.camera.openAppSettings() to open settings.