Flutter Mobile Development · Lektion

Geolokalisierungs- und Kamera-Plugins

Integrieren Sie gängige Gerätefunktionen wie Geolokalisierungsdienste und Kamerazugriff mithilfe etablierter Flutter-Plugins.

Geolokalisierungs- und Kamera-Plugins ist eine kostenlose Flutter Mobile Development-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Flutter Mobile Development-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Device Features & Plugins

Modern mobile apps often need to interact with device hardware like the camera or GPS. Flutter makes this easy using plugins.

Plugins are special packages that bridge Flutter (Dart) code with platform-specific (Android/iOS) native code. They let your app access device functionalities.

In this lesson, we'll integrate geolocation services and camera access into a Flutter app using popular, well-established plugins.

Accessing Device Location

To get the device's location, we'll use the geolocator plugin. It provides a simple API to access GPS, Wi-Fi, and cellular data for location information.

First, add the geolocator dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  geolocator: ^11.0.0 # Use the latest version

Then run flutter pub get in your terminal.

Requesting Location Permissions

Accessing a user's location requires their explicit permission. You need to declare these permissions in your app's native configuration files:

Android: Add ACCESS_FINE_LOCATION and ACCESS_COARSE_LOCATION to AndroidManifest.xml.
iOS: Add NSLocationWhenInUseUsageDescription to Info.plist, explaining why your app needs location access.

The geolocator plugin will then handle requesting these permissions at runtime.

Building a Location Widget

Let's create a simple Flutter app structure to display location data. We'll use a StatefulWidget to manage and update the location text.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Location App',
      home: Scaffold(
        appBar: AppBar(title: const Text('My Location')),
        body: const Center(
          child: LocationDisplay(),
        ),
      ),
    );
  }
}

class LocationDisplay extends StatefulWidget {
  const LocationDisplay({super.key});

  @override
  State<LocationDisplay> createState() => _LocationDisplayState();
}

class _LocationDisplayState extends State<LocationDisplay> {
  String _locationMessage = 'Fetching location...';

  @override
  Widget build(BuildContext context) {
    return Text(_locationMessage);
  }
}

Fetching Current Position

Now, let's add the geolocator logic to our _LocationDisplayState. We'll use getCurrentPosition to get the device's coordinates.

Remember to handle potential service and permission issues before trying to get the location.

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Location App',
      home: Scaffold(
        appBar: AppBar(title: const Text('My Location')),
        body: const Center(
          child: LocationDisplay(),
        ),
      ),
    );
  }
}

class LocationDisplay extends StatefulWidget {
  const LocationDisplay({super.key});

  @override
  State<LocationDisplay> createState() => _LocationDisplayState();
}

class _LocationDisplayState extends State<LocationDisplay> {
  String _locationMessage = 'Fetching location...';

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

  Future<void> _determinePosition() async {
    bool serviceEnabled;
    LocationPermission permission;

    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      setState(() {
        _locationMessage = 'Location services are disabled.';
      });
      return;
    }

    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        setState(() {
          _locationMessage = 'Location permissions are denied.';
        });
        return;
      }
    }

    if (permission == LocationPermission.deniedForever) {
      setState(() {
        _locationMessage = 'Location permissions denied forever.';
      });
      return;
    }

    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    setState(() {
      _locationMessage =
          'Lat: ${position.latitude}, Lon: ${position.longitude}';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(_locationMessage, textAlign: TextAlign.center),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: _determinePosition,
            child: const Text('Refresh Location'),
          ),
        ],
      ),
    );
  }
}

Capturing Photos & Videos

To interact with the device's camera or photo gallery, we'll use the image_picker plugin. It allows you to pick images/videos from the gallery or capture new ones.

Add image_picker to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.0 # Use the latest version

Then run flutter pub get.

Camera & Gallery Permissions

Similar to geolocation, camera and gallery access require specific permissions. You need to configure these in your native project files:

Android: Add CAMERA and READ_EXTERNAL_STORAGE permissions to AndroidManifest.xml.
iOS: Add NSPhotoLibraryUsageDescription and NSCameraUsageDescription to Info.plist.

These descriptions explain to the user why your app needs these permissions.

Selecting from Gallery

Let's create a new widget to demonstrate picking an image from the gallery using image_picker. We'll display the selected image.

Tap the button to open your device's photo gallery.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Picker App',
      home: Scaffold(
        appBar: AppBar(title: const Text('Pick Image')),
        body: const Center(
          child: ImagePickerDisplay(),
        ),
      ),
    );
  }
}

class ImagePickerDisplay extends StatefulWidget {
  const ImagePickerDisplay({super.key});

  @override
  State<ImagePickerDisplay> createState() => _ImagePickerDisplayState();
}

class _ImagePickerDisplayState extends State<ImagePickerDisplay> {
  File? _image;
  final ImagePicker _picker = ImagePicker();

  Future<void> _pickImage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      setState(() {
        _image = File(image.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _image == null
            ? const Text('No image selected.')
            : Image.file(_image!, height: 200),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: _pickImage,
          child: const Text('Pick Image from Gallery'),
        ),
      ],
    );
  }
}

Capturing with Camera

Now, let's modify our app to also allow taking a photo directly with the device's camera.

The ImageSource.camera option is used for this.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Camera App',
      home: Scaffold(
        appBar: AppBar(title: const Text('Take Photo')),
        body: const Center(
          child: CameraDisplay(),
        ),
      ),
    );
  }
}

class CameraDisplay extends StatefulWidget {
  const CameraDisplay({super.key});

  @override
  State<CameraDisplay> createState() => _CameraDisplayState();
}

class _CameraDisplayState extends State<CameraDisplay> {
  File? _image;
  final ImagePicker _picker = ImagePicker();

  Future<void> _takePhoto() async {
    final XFile? photo = await _picker.pickImage(source: ImageSource.camera);
    if (photo != null) {
      setState(() {
        _image = File(photo.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _image == null
            ? const Text('No photo taken.')
            : Image.file(_image!, height: 200),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: _takePhoto,
          child: const Text('Take Photo with Camera'),
        ),
      ],
    );
  }
}

Robust Plugin Usage

When using plugins, always consider error handling. Wrap plugin calls in try-catch blocks to gracefully manage scenarios like:

User denying permissions.
Location services being disabled.
Camera not being available.

Plugins often provide options, like desiredAccuracy for geolocator or imageQuality for image_picker, to fine-tune behavior and optimize performance.

Plugin Permissions Check

You've learned about integrating device features and the importance of permissions. Let's test your understanding.

Summary of Device Features

Well done! You've learned how to integrate powerful device features into your Flutter apps:

Geolocation: Using geolocator to get the device's current position.
Camera/Gallery: Using image_picker to select images from the gallery or capture new photos.

Remember the importance of declaring and requesting permissions for these features to ensure a smooth user experience. Continue exploring other plugins for even more device capabilities!

Häufig gestellte Fragen

Ist die Lektion „Geolokalisierungs- und Kamera-Plugins“ kostenlos?

Ja — der vollständige Text von „Geolokalisierungs- und Kamera-Plugins“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Flutter Mobile Development-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Geolokalisierungs- und Kamera-Plugins“?

Integrieren Sie gängige Gerätefunktionen wie Geolokalisierungsdienste und Kamerazugriff mithilfe etablierter Flutter-Plugins. Du übst Flutter Mobile Development mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Flutter Mobile Development zu starten?

Keine Vorkenntnisse erforderlich. Flutter Mobile Development auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Geolokalisierungs- und Kamera-Plugins“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Flutter Mobile Development-Lektion Code schreiben und ausführen?

Ja. Jede Flutter Mobile Development-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Flutter Mobile Development