Flutter Mobile Development · บทเรียน

ปลั๊กอินระบุตำแหน่งและกล้อง

ผสานรวมฟีเจอร์อุปกรณ์ที่ใช้บ่อย เช่น บริการระบุตำแหน่งและการเข้าถึงกล้อง โดยใช้ปลั๊กอิน Flutter ที่ได้รับการยอมรับอย่างแพร่หลาย

ปลั๊กอินระบุตำแหน่งและกล้อง เป็นบทเรียน Flutter Mobile Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Flutter Mobile Development และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Flutter Mobile Development มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

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!

คำถามที่พบบ่อย

บทเรียน “ปลั๊กอินระบุตำแหน่งและกล้อง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ปลั๊กอินระบุตำแหน่งและกล้อง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Flutter Mobile Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Flutter Mobile Development มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ปลั๊กอินระบุตำแหน่งและกล้อง”

ผสานรวมฟีเจอร์อุปกรณ์ที่ใช้บ่อย เช่น บริการระบุตำแหน่งและการเข้าถึงกล้อง โดยใช้ปลั๊กอิน Flutter ที่ได้รับการยอมรับอย่างแพร่หลาย คุณปฏิบัติ Flutter Mobile Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Flutter Mobile Development หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Flutter Mobile Development บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “ปลั๊กอินระบุตำแหน่งและกล้อง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Flutter Mobile Development นี้ได้ไหม

ได้ บทเรียน Flutter Mobile Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Flutter Mobile Development