Pemalam Geolokasi dan Kamera
Integrasikan ciri peranti biasa seperti perkhidmatan geolokasi dan akses kamera menggunakan pemalam Flutter yang telah mantap.
Pemalam Geolokasi dan Kamera ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.
Ciri Peranti & Pemalam
Aplikasi mudah alih moden sering perlu berinteraksi dengan perkakasan peranti seperti kamera atau GPS. Flutter memudahkan perkara ini menggunakan pemalam.
Pemalam ialah pakej khas yang menghubungkan kod Flutter (Dart) dengan kod natif khusus platform (Android/iOS). Pemalam membolehkan aplikasi anda mengakses fungsi peranti.
Dalam pelajaran ini, kita akan menyepadukan perkhidmatan geolokasi dan akses kamera ke dalam aplikasi Flutter menggunakan pemalam yang popular serta mantap.
Mengakses Lokasi Peranti
Untuk mendapatkan lokasi peranti, kita akan menggunakan pemalam geolocator. Pemalam ini menyediakan API mudah untuk mengakses data GPS, Wi-Fi dan selular bagi mendapatkan maklumat lokasi.
Mula-mula, tambahkan kebergantungan geolocator pada fail pubspec.yaml anda:
dependencies:
flutter:
sdk: flutter
geolocator: ^11.0.0 # Use the latest versionKemudian jalankan flutter pub get dalam terminal anda.
Meminta Kebenaran Lokasi
Mengakses lokasi pengguna memerlukan kebenaran nyata daripada mereka. Anda perlu mengisytiharkan kebenaran ini dalam fail konfigurasi natif aplikasi anda:
- Android: Tambahkan
ACCESS_FINE_LOCATIONdanACCESS_COARSE_LOCATIONpadaAndroidManifest.xml. - iOS: Tambahkan
NSLocationWhenInUseUsageDescriptionpadaInfo.plistdan terangkan sebab aplikasi anda memerlukan akses lokasi.
Pemalam geolocator kemudiannya akan mengendalikan permintaan kebenaran ini semasa aplikasi berjalan.
Membina Widget Lokasi
Mari cipta struktur aplikasi Flutter ringkas untuk memaparkan data lokasi. Kita akan menggunakan StatefulWidget untuk mengurus dan mengemas kini teks lokasi.
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);
}
}Mendapatkan Kedudukan Semasa
Sekarang, mari tambahkan logik geolocator pada _LocationDisplayState kita. Kita akan menggunakan getCurrentPosition untuk mendapatkan koordinat peranti.
Ingat untuk mengendalikan kemungkinan masalah perkhidmatan dan kebenaran sebelum cuba mendapatkan lokasi.
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'),
),
],
),
);
}
}Merakam Foto & Video
Untuk berinteraksi dengan kamera atau galeri foto peranti, kita akan menggunakan pemalam image_picker. Pemalam ini membolehkan anda memilih imej atau video daripada galeri, atau merakam yang baharu.
Tambahkan image_picker pada pubspec.yaml anda:
dependencies:
flutter:
sdk: flutter
image_picker: ^1.0.0 # Use the latest versionKemudian jalankan flutter pub get.
Kebenaran Kamera & Galeri
Seperti geolokasi, akses kamera dan galeri memerlukan kebenaran khusus. Anda perlu mengkonfigurasikannya dalam fail projek natif anda:
- Android: Tambahkan kebenaran
CAMERAdanREAD_EXTERNAL_STORAGEpadaAndroidManifest.xml. - iOS: Tambahkan
NSPhotoLibraryUsageDescriptiondanNSCameraUsageDescriptionpadaInfo.plist.
Perihalan ini menerangkan kepada pengguna sebab aplikasi anda memerlukan kebenaran tersebut.
Memilih daripada Galeri
Mari cipta widget baharu untuk menunjukkan cara memilih imej daripada galeri menggunakan image_picker. Kita akan memaparkan imej yang dipilih.
Ketik butang untuk membuka galeri foto peranti anda.
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'),
),
],
);
}
}Merakam dengan Kamera
Sekarang, mari ubah suai aplikasi kita supaya anda juga boleh mengambil foto terus menggunakan kamera peranti.
Pilihan ImageSource.camera digunakan untuk tujuan ini.
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'),
),
],
);
}
}Penggunaan Pemalam yang Kukuh
Apabila menggunakan pemalam, sentiasa pertimbangkan pengendalian ralat. Balut panggilan pemalam dalam blok try-catch untuk mengurus keadaan seperti berikut dengan sewajarnya:
- Pengguna menolak kebenaran.
- Perkhidmatan lokasi dilumpuhkan.
- Kamera tidak tersedia.
Pemalam sering menyediakan pilihan seperti desiredAccuracy untuk geolocator atau imageQuality untuk image_picker, supaya tingkah laku dapat dilaraskan dan prestasi dioptimumkan.
Pemeriksaan Kebenaran Pemalam
Anda telah mempelajari tentang penyepaduan ciri peranti dan kepentingan kebenaran. Mari uji pemahaman anda.
Ringkasan Ciri Peranti
Syabas! Anda telah mempelajari cara menyepadukan ciri peranti yang berkuasa ke dalam aplikasi Flutter anda:
- Geolokasi: Menggunakan
geolocatoruntuk mendapatkan kedudukan semasa peranti. - Kamera/Galeri: Menggunakan
image_pickeruntuk memilih imej daripada galeri atau merakam foto baharu.
Ingat kepentingan mengisytiharkan dan meminta kebenaran bagi ciri-ciri ini untuk memastikan pengalaman pengguna yang lancar. Teruskan meneroka pemalam lain untuk mendapatkan lebih banyak keupayaan peranti!
Pelajari Dart dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Soalan Lazim
Adakah pelajaran “Pemalam Geolokasi dan Kamera” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Pemalam Geolokasi dan Kamera”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pemalam Geolokasi dan Kamera”?
Integrasikan ciri peranti biasa seperti perkhidmatan geolokasi dan akses kamera menggunakan pemalam Flutter yang telah mantap. Anda berlatih Pembangunan Aplikasi Mudah Alih Flutter menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Mudah Alih Flutter?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Mudah Alih Flutter di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Pemalam Geolokasi dan Kamera” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Mudah Alih Flutter ini?
Ya. Setiap pelajaran Pembangunan Aplikasi Mudah Alih Flutter menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Saluran Platform (MethodChannel)
- Pemalam Geolokasi dan Kamera
- Integrasi UI Asli
- Kebenaran dan Penderia