Mobilutvikling med Flutter · leksjon

Geolokasjons- og kameramoduler

Integrer vanlige enhetsfunksjoner som geolokasjonstjenester og kameratilgang ved hjelp av veletablerte Flutter-moduler.

Leksjon 2 av 412 trinn

Geolokasjons- og kameramoduler er en gratis leksjon i Mobilutvikling med Flutter på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mobilutvikling med Flutter, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Enhetsfunksjoner og programtillegg

Moderne mobilapper trenger ofte å samhandle med maskinvare på enheten, for eksempel kameraet eller GPS. Flutter gjør dette enkelt ved hjelp av programtillegg.

Programtillegg er spesielle pakker som bygger bro mellom Flutter- (Dart-)kode og plattformspesifikk (Android/iOS) native kode. De gir appen tilgang til funksjoner på enheten.

I denne leksjonen integrerer vi geolokasjonstjenester og kameratilgang i en Flutter-app ved hjelp av populære og velprøvde programtillegg.

Få tilgang til enhetens posisjon

For å hente enhetens posisjon bruker vi programtillegget geolocator. Det tilbyr et enkelt API for å hente posisjonsinformasjon fra GPS, Wi-Fi og mobilnett.

Legg først til avhengigheten geolocator i filen pubspec.yaml:

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

Kjør deretter flutter pub get i terminalen.

Be om posisjonstillatelser

Tilgang til en brukers posisjon krever uttrykkelig tillatelse fra brukeren. Du må deklarere disse tillatelsene i appens native konfigurasjonsfiler:

Android: Legg til ACCESS_FINE_LOCATION og ACCESS_COARSE_LOCATION i AndroidManifest.xml.
iOS: Legg til NSLocationWhenInUseUsageDescription i Info.plist, og forklar hvorfor appen trenger posisjonstilgang.

Programtillegget geolocator håndterer deretter forespørselen om disse tillatelsene under kjøring.

Bygge en posisjonswidget

La oss opprette en enkel Flutter-appstruktur for å vise posisjonsdata. Vi bruker en StatefulWidget til å administrere og oppdatere posisjonsteksten.

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

Hente gjeldende posisjon

La oss nå legge til logikken for geolocator i _LocationDisplayState. Vi bruker getCurrentPosition til å hente koordinatene til enheten.

Husk å håndtere mulige problemer med tjenester og tillatelser før du prøver å hente posisjonen.

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 bilder og videoer

For å samhandle med kameraet eller bildegalleriet på enheten bruker vi programtillegget image_picker. Det lar deg velge bilder/videoer fra galleriet eller ta nye.

Legg til image_picker i pubspec.yaml:

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

Kjør deretter flutter pub get.

Tillatelser for kamera og galleri

I likhet med geolokasjon krever tilgang til kamera og galleri bestemte tillatelser. Du må konfigurere disse i filene for det native prosjektet:

Android: Legg til tillatelsene CAMERA og READ_EXTERNAL_STORAGE i AndroidManifest.xml.
iOS: Legg til NSPhotoLibraryUsageDescription og NSCameraUsageDescription i Info.plist.

Disse beskrivelsene forklarer brukeren hvorfor appen trenger disse tillatelsene.

Velge fra galleriet

La oss opprette en ny widget for å demonstrere hvordan du velger et bilde fra galleriet ved hjelp av image_picker. Vi viser det valgte bildet.

Trykk på knappen for å åpne bildegalleriet på enheten.

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 kameraet

La oss nå endre appen slik at den også lar deg ta et bilde direkte med kameraet på enheten.

Alternativet ImageSource.camera brukes 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 bruk av programtillegg

Ta alltid hensyn til feilhåndtering når du bruker programtillegg. Pakk inn kall til programtillegg i try-catch-blokker for å håndtere situasjoner som disse på en god måte:

Brukeren avslår tillatelser.
Posisjonstjenester er deaktivert.
Kameraet er ikke tilgjengelig.

Programtillegg tilbyr ofte alternativer, for eksempel desiredAccuracy for geolocator eller imageQuality for image_picker, slik at du kan finjustere virkemåten og optimalisere ytelsen.

Kontroll av tillatelser for programtillegg

Du har lært om integrering av enhetsfunksjoner og hvor viktig det er med tillatelser. La oss teste forståelsen din.

Besvar den i den interaktive leksjonen

Sammendrag av enhetsfunksjoner

Godt gjort! Du har lært hvordan du integrerer kraftige enhetsfunksjoner i Flutter-appene dine:

Geolokasjon: Bruke geolocator til å hente enhetens gjeldende posisjon.
Kamera/galleri: Bruke image_picker til å velge bilder fra galleriet eller ta nye bilder.

Husk hvor viktig det er å deklarere og be om tillatelser for disse funksjonene, slik at brukeropplevelsen blir god. Fortsett å utforske andre programtillegg for å få tilgang til enda flere funksjoner på enheten!

Gratis å komme i gang

Lær deg Dart med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Geolokasjons- og kameramoduler» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Mobilutvikling med Flutter, inkludert «Geolokasjons- og kameramoduler», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Hva lærer jeg i «Geolokasjons- og kameramoduler»?

Integrer vanlige enhetsfunksjoner som geolokasjonstjenester og kameratilgang ved hjelp av veletablerte Flutter-moduler. Du øver på Mobilutvikling med Flutter med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Mobilutvikling med Flutter?

Ingen tidligere erfaring er nødvendig. Mobilutvikling med Flutter på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Geolokasjons- og kameramoduler»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Mobilutvikling med Flutter-leksjonen?

Ja. Alle Mobilutvikling med Flutter-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Plattformkanaler (MethodChannel)
Geolokasjons- og kameramoduler
Integrering av innebygd brukergrensesnitt
Tillatelser og sensorer

← Tilbake til Mobilutvikling med Flutter