Mobiludvikling med Flutter · Lektion

Geolokation og kamera-plugins

Integrer almindelige enhedsfunktioner som geolokationstjenester og kameraadgang ved hjælp af veletablerede Flutter-plugins.

Lektion 2 af 412 trin

Geolokation og kamera-plugins er en gratis Mobiludvikling med Flutter-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Mobiludvikling med Flutter, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Enhedsfunktioner og plugins

Moderne mobilapps har ofte brug for at interagere med enhedens hardware, f.eks. kameraet eller GPS. Flutter gør dette nemt ved hjælp af plugins.

Plugins er særlige pakker, der forbinder Flutter-kode (Dart) med platformspecifik native kode (Android/iOS). De giver din app adgang til enhedens funktioner.

I denne lektion integrerer vi geolokationstjenester og kameraadgang i en Flutter-app ved hjælp af populære og veletablerede plugins.

Adgang til enhedens placering

Hvis du vil hente enhedens placering, bruger vi pluginnet geolocator. Det tilbyder en enkel API til at få adgang til GPS-, Wi-Fi- og mobildata til positionsbestemmelse.

Føj først afhængigheden geolocator til din pubspec.yaml-fil:

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

Kør derefter flutter pub get i din terminal.

Anmodning om placeringstilladelser

Adgang til en brugers placering kræver brugerens udtrykkelige tilladelse. Du skal erklære disse tilladelser i appens native konfigurationsfiler:

Android: Føj ACCESS_FINE_LOCATION og ACCESS_COARSE_LOCATION til AndroidManifest.xml.
iOS: Føj NSLocationWhenInUseUsageDescription til Info.plist, og forklar, hvorfor din app har brug for adgang til placering.

Pluginnet geolocator håndterer derefter anmodningen om disse tilladelser under kørsel.

Oprettelse af en placeringswidget

Lad os oprette en enkel Flutter-appstruktur til visning af placeringsdata. Vi bruger en StatefulWidget til at administrere og opdatere placeringsteksten.

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

Hentning af aktuel position

Lad os nu tilføje logikken fra geolocator til vores _LocationDisplayState. Vi bruger getCurrentPosition til at hente enhedens koordinater.

Husk at håndtere eventuelle problemer med tjenester og tilladelser, før du forsøger at hente placeringen.

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

Optagelse af fotos og videoer

Hvis du vil interagere med enhedens kamera eller fotogalleri, bruger vi pluginnet image_picker. Det giver dig mulighed for at vælge billeder og videoer fra galleriet eller optage nye.

Føj image_picker til din pubspec.yaml:

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

Kør derefter flutter pub get.

Kamera- og galleritilladelser

Ligesom ved geolokation kræver adgang til kamera og galleri bestemte tilladelser. Du skal konfigurere disse i projektets native filer:

Android: Føj tilladelserne CAMERA og READ_EXTERNAL_STORAGE til AndroidManifest.xml.
iOS: Føj NSPhotoLibraryUsageDescription og NSCameraUsageDescription til Info.plist.

Disse beskrivelser forklarer brugeren, hvorfor din app har brug for tilladelserne.

Valg fra galleri

Lad os oprette en ny widget, der viser, hvordan du vælger et billede fra galleriet ved hjælp af image_picker. Vi viser det valgte billede.

Tryk på knappen for at åbne enhedens 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'),
        ),
      ],
    );
  }
}

Optagelse med kameraet

Lad os nu ændre appen, så den også giver mulighed for at tage et foto direkte med enhedens kamera.

Indstillingen ImageSource.camera bruges til dette.

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 brug af plugins

Ved brug af plugins skal du altid tage højde for fejlhåndtering. Pak plugin-kald ind i try-catch-blokke, så scenarier som disse håndteres på en hensigtsmæssig måde:

Brugeren afviser tilladelser.
Placeringstjenester er deaktiveret.
Kameraet er ikke tilgængeligt.

Plugins tilbyder ofte indstillinger som desiredAccuracy for geolocator eller imageQuality for image_picker, så du kan finjustere funktionaliteten og optimere ydeevnen.

Kontrol af plugintilladelser

Du har lært om integration af enhedsfunktioner og vigtigheden af tilladelser. Lad os teste din forståelse.

Besvar den i den interaktive lektion

Opsummering af enhedsfunktioner

Godt klaret! Du har lært at integrere effektive enhedsfunktioner i dine Flutter-apps:

Geolokation: Brug geolocator til at hente enhedens aktuelle position.
Kamera/galleri: Brug image_picker til at vælge billeder fra galleriet eller optage nye fotos.

Husk, hvor vigtigt det er at erklære og anmode om tilladelser til disse funktioner for at sikre en problemfri brugeroplevelse. Fortsæt med at udforske andre plugins for at få adgang til endnu flere enhedsfunktioner!

Gratis at komme i gang

Lær Dart med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 88

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Geolokation og kamera-plugins” gratis?

Ja — alle 3 lektioner i læringssporet Mobiludvikling med Flutter, inklusive “Geolokation og kamera-plugins”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Geolokation og kamera-plugins”?

Integrer almindelige enhedsfunktioner som geolokationstjenester og kameraadgang ved hjælp af veletablerede Flutter-plugins. Du øver dig i Mobiludvikling med Flutter med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Mobiludvikling med Flutter?

Der kræves ingen tidligere erfaring. Mobiludvikling med Flutter på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Geolokation og kamera-plugins”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Mobiludvikling med Flutter-lektion?

Ja. Alle Mobiludvikling med Flutter-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Platform Channels (MethodChannel)
Geolokation og kamera-plugins
Integration af native brugergrænseflader
Tilladelser og sensorer

← Tilbage til Mobiludvikling med Flutter