Mobilutveckling med Flutter · Lektion

Geolokalisering och kamer pluginer

Integrera vanliga enhetsfunktioner som geolokaliseringstjänster och kameraåtkomst med etablerade Flutter-pluginer.

Lektion 2 av 412 steg

Geolokalisering och kamer pluginer är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Enhetsfunktioner och plugins

Moderna mobilappar behöver ofta interagera med enhetens maskinvara, till exempel kamera eller GPS. Flutter gör detta enkelt med hjälp av plugins.

Plugins är särskilda paket som fungerar som en brygga mellan Flutter- (Dart-)kod och plattformsspecifik native-kod (Android/iOS). De ger appen åtkomst till enhetens funktioner.

I den här lektionen integrerar vi geolokaliseringstjänster och kameraåtkomst i en Flutter-app med hjälp av populära och väletablerade plugins.

Åtkomst till enhetens plats

För att hämta enhetens plats använder vi pluginet geolocator. Det tillhandahåller ett enkelt API för att få platsinformation från GPS, Wi-Fi och mobilnät.

Lägg först till beroendet geolocator i filen pubspec.yaml:

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

Kör sedan flutter pub get i terminalen.

Begär platsbehörigheter

Åtkomst till en användares plats kräver användarens uttryckliga tillstånd. Du måste deklarera dessa behörigheter i appens native-konfigurationsfiler:

Android: Lägg till ACCESS_FINE_LOCATION och ACCESS_COARSE_LOCATION i AndroidManifest.xml.
iOS: Lägg till NSLocationWhenInUseUsageDescription i Info.plist och förklara varför appen behöver åtkomst till platsen.

Pluginet geolocator hanterar sedan begäran om dessa behörigheter under körning.

Skapa en platswidget

Vi skapar en enkel Flutter-appstruktur för att visa platsdata. Vi använder en StatefulWidget för att hantera och uppdatera platstexten.

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

Hämta aktuell position

Nu lägger vi till logiken för geolocator i vår _LocationDisplayState. Vi använder getCurrentPosition för att hämta enhetens koordinater.

Kom ihåg att hantera eventuella problem med tjänster och behörigheter innan du försöker hämta platsen.

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'),
          ),
        ],
      ),
    );
  }
}

Ta foton och spela in videor

För att interagera med enhetens kamera eller fotogalleri använder vi pluginet image_picker. Det gör det möjligt att välja bilder och videor från galleriet eller ta nya.

Lägg till image_picker i din pubspec.yaml:

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

Kör sedan flutter pub get.

Behörigheter för kamera och galleri

Precis som vid geolokalisering kräver åtkomst till kamera och galleri särskilda behörigheter. Du måste konfigurera dessa i projektets native-filer:

Android: Lägg till behörigheterna CAMERA och READ_EXTERNAL_STORAGE i AndroidManifest.xml.
iOS: Lägg till NSPhotoLibraryUsageDescription och NSCameraUsageDescription i Info.plist.

De här beskrivningarna förklarar för användaren varför appen behöver behörigheterna.

Välj från galleriet

Vi skapar en ny widget som visar hur du väljer en bild från galleriet med hjälp av image_picker. Den valda bilden visas.

Tryck på knappen för att öppna enhetens fotogalleri.

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'),
        ),
      ],
    );
  }
}

Ta bilder med kameran

Nu ändrar vi appen så att det även går att ta ett foto direkt med enhetens kamera.

Alternativet ImageSource.camera används för detta.

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 användning av plugins

När du använder plugins bör du alltid tänka på felhantering. Omge pluginanrop med try-catch-block för att hantera situationer som dessa på ett bra sätt:

Användaren nekar behörigheter.
Platstjänster är inaktiverade.
Kameran är inte tillgänglig.

Plugins tillhandahåller ofta alternativ, till exempel desiredAccuracy för geolocator eller imageQuality för image_picker, för att finjustera beteendet och optimera prestandan.

Testa pluginbehörigheter

Du har lärt dig hur du integrerar enhetsfunktioner och hur viktiga behörigheter är. Nu testar vi dina kunskaper.

Besvara frågan i den interaktiva lektionen

Sammanfattning av enhetsfunktioner

Bra jobbat! Du har lärt dig att integrera kraftfulla enhetsfunktioner i dina Flutter-appar:

Geolokalisering: Använd geolocator för att hämta enhetens aktuella position.
Kamera/galleri: Använd image_picker för att välja bilder från galleriet eller ta nya foton.

Kom ihåg hur viktigt det är att deklarera och begära behörigheter för dessa funktioner, så att användarupplevelsen blir smidig. Fortsätt att utforska andra plugins för att få tillgång till ännu fler enhetsfunktioner!

Gratis att börja

Lär dig Dart med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Geolokalisering och kamer pluginer” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”Geolokalisering och kamer pluginer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad lär jag mig i ”Geolokalisering och kamer pluginer”?

Integrera vanliga enhetsfunktioner som geolokaliseringstjänster och kameraåtkomst med etablerade Flutter-pluginer. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?

Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Geolokalisering och kamer pluginer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?

Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Plattformskanaler (MethodChannel)
Geolokalisering och kamer pluginer
Integration av inbyggda användargränssnitt
Behörigheter och sensorer

← Tillbaka till Mobilutveckling med Flutter