Mobiilikehitys Flutterilla · Oppitunti

Paikannus- ja kameralaajennokset

Integroikaa yleisiä laitteen ominaisuuksia, kuten paikannuspalvelut ja kameran käyttö, hyväksi havaittujen Flutter-laajennosten avulla.

Oppitunti 2/412 vaihetta

Paikannus- ja kameralaajennokset on ilmainen Mobiilikehitys Flutterilla-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Mobiilikehitys Flutterilla-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Mobiilikehitys Flutterilla-kurssilla on yhteensä 4 oppituntia.

Laitteen ominaisuudet ja plugin-laajennukset

Nykyaikaisten mobiilisovellusten on usein oltava vuorovaikutuksessa laitteen laitteiston, kuten kameran tai GPS:n, kanssa. Flutter tekee tästä helppoa plugin-laajennusten avulla.

Plugin-laajennukset ovat erityisiä paketteja, jotka yhdistävät Flutterin (Dartin) koodin alustakohtaiseen (Android/iOS) natiivikoodiin. Niiden avulla sovellus voi käyttää laitteen toimintoja.

Tässä oppitunnissa integroimme Flutter-sovellukseen paikannuspalvelut ja kameran käytön suosittujen ja vakiintuneiden plugin-laajennusten avulla.

Laitteen sijainnin käyttäminen

Laitteen sijainnin hakemiseen käytämme geolocator-plugin-laajennusta. Se tarjoaa yksinkertaisen ohjelmointirajapinnan sijaintitietojen hakemiseen GPS:n, Wi-Fin ja matkapuhelinverkon tietojen avulla.

Lisätkää ensin geolocator-riippuvuus tiedostoon pubspec.yaml:

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

Suorittakaa sen jälkeen terminaalissa komento flutter pub get.

Sijainnin käyttöoikeuksien pyytäminen

Käyttäjän sijainnin käyttäminen edellyttää hänen nimenomaista lupaansa. Nämä käyttöoikeudet on ilmoitettava sovelluksen natiivien asetustiedostoissa:

Android: Lisätkää ACCESS_FINE_LOCATION ja ACCESS_COARSE_LOCATION tiedostoon AndroidManifest.xml.
iOS: Lisätkää NSLocationWhenInUseUsageDescription tiedostoon Info.plist ja selittäkää, miksi sovellus tarvitsee sijaintitietoja.

geolocator-plugin-laajennus käsittelee näiden käyttöoikeuksien pyytämisen suorituksen aikana.

Sijaintitietoja näyttävän widgetin rakentaminen

Luodaan yksinkertainen Flutter-sovelluksen rakenne sijaintitietojen näyttämistä varten. Käytämme StatefulWidget-widgetiä sijaintitekstin hallintaan ja päivittämiseen.

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

Nykyisen sijainnin hakeminen

Lisätään nyt geolocator-logiikka luokkaan _LocationDisplayState. Käytämme getCurrentPosition-metodia laitteen koordinaattien hakemiseen.

Muistakaa käsitellä mahdolliset palveluihin ja käyttöoikeuksiin liittyvät ongelmat ennen sijainnin hakemista.

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

Valokuvien ja videoiden ottaminen

Laitteen kameran tai kuvagallerian käyttämiseen käytämme image_picker-plugin-laajennusta. Sen avulla voitte valita kuvia tai videoita galleriasta tai ottaa uusia kuvia ja videoita.

Lisätkää image_picker tiedostoon pubspec.yaml:

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

Suorittakaa sen jälkeen flutter pub get.

Kameran ja gallerian käyttöoikeudet

Paikannuksen tavoin kameran ja gallerian käyttäminen edellyttää tiettyjä käyttöoikeuksia. Ne on määritettävä natiivin projektin tiedostoissa:

Android: Lisätkää CAMERA- ja READ_EXTERNAL_STORAGE-käyttöoikeudet tiedostoon AndroidManifest.xml.
iOS: Lisätkää NSPhotoLibraryUsageDescription ja NSCameraUsageDescription tiedostoon Info.plist.

Näissä kuvauksissa käyttäjälle kerrotaan, miksi sovellus tarvitsee kyseiset käyttöoikeudet.

Valitseminen galleriasta

Luodaan uusi widget esittelemään kuvan valitsemista galleriasta image_picker-plugin-laajennuksen avulla. Näytämme valitun kuvan.

Avatkaa laitteen kuvagalleria napauttamalla painiketta.

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

Kuvan ottaminen kameralla

Muokataan nyt sovellusta niin, että sillä voi ottaa kuvan suoraan laitteen kameralla.

Tähän käytetään ImageSource.camera-vaihtoehtoa.

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

Plugin-laajennusten vankka käyttö

Kun käytätte plugin-laajennuksia, huomioikaa aina virheenkäsittely. Käärikää plugin-kutsut try-catch-lohkoihin, jotta voitte käsitellä hallitusti esimerkiksi seuraavia tilanteita:

Käyttäjä kieltää käyttöoikeudet.
Sijaintipalvelut on poistettu käytöstä.
Kamera ei ole käytettävissä.

Plugin-laajennukset tarjoavat usein asetuksia, kuten desiredAccuracy-asetuksen geolocator-plugin-laajennuksessa tai imageQuality-asetuksen image_picker-plugin-laajennuksessa, joiden avulla toimintaa voi hienosäätää ja suorituskykyä optimoida.

Plugin-käyttöoikeuksien testi

Olette oppineet laitteen ominaisuuksien integroinnista ja käyttöoikeuksien tärkeydestä. Testataan, miten hyvin ymmärrätte aiheen.

Vastaa interaktiivisessa oppitunnissa

Laitteen ominaisuuksien yhteenveto

Hienosti tehty! Olette oppineet integroimaan tehokkaita laitteen ominaisuuksia Flutter-sovelluksiinne:

Paikannus: geolocator-plugin-laajennuksen käyttäminen laitteen nykyisen sijainnin hakemiseen.
Kamera/galleria: image_picker-plugin-laajennuksen käyttäminen kuvien valitsemiseen galleriasta tai uusien valokuvien ottamiseen.

Muistakaa ilmoittaa ja pyytää näiden ominaisuuksien käyttöön tarvittavat käyttöoikeudet, jotta käyttökokemus säilyy sujuvana. Tutustukaa myös muihin plugin-laajennuksiin ja ottakaa käyttöön vielä enemmän laitteen ominaisuuksia!

Aloita maksutta

Opi Dart tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 22
Oppitunnit: 88

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Paikannus- ja kameralaajennokset” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Mobiilikehitys Flutterilla-oppimispolun 3 oppituntia, myös oppitunnin “Paikannus- ja kameralaajennokset”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Mobiilikehitys Flutterilla-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Paikannus- ja kameralaajennokset”?

Integroikaa yleisiä laitteen ominaisuuksia, kuten paikannuspalvelut ja kameran käyttö, hyväksi havaittujen Flutter-laajennosten avulla. Harjoittelet Mobiilikehitys Flutterilla-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Mobiilikehitys Flutterilla-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Mobiilikehitys Flutterilla-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Paikannus- ja kameralaajennokset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Mobiilikehitys Flutterilla-oppitunnilla?

Kyllä. Jokainen Mobiilikehitys Flutterilla-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Mobiilikehitys Flutterilla