Flutter मोबाइल विकास · पाठ

भौगोलिक स्थान और कैमरा प्लगइन

सुप्रतिष्ठित Flutter प्लगइन का उपयोग करके भौगोलिक स्थान सेवाओं और कैमरा पहुँच जैसी सामान्य डिवाइस सुविधाओं को एकीकृत करें।

पाठ 2, कुल 4 में से12 चरण

भौगोलिक स्थान और कैमरा प्लगइन, CoddyKit पर Flutter मोबाइल विकास का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Flutter मोबाइल विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

डिवाइस की सुविधाएँ और प्लगइन

आधुनिक मोबाइल ऐप्स को अक्सर कैमरा या GPS जैसे डिवाइस हार्डवेयर के साथ काम करने की आवश्यकता होती है। Flutter प्लगइन का उपयोग करके यह काम आसान बना देता है।

प्लगइन ऐसे विशेष पैकेज होते हैं जो Flutter (Dart) कोड को प्लेटफ़ॉर्म-विशिष्ट (Android/iOS) नेटिव कोड से जोड़ते हैं। इनके माध्यम से आपका ऐप डिवाइस की सुविधाओं तक पहुँच सकता है।

इस पाठ में हम लोकप्रिय और अच्छी तरह स्थापित प्लगइन का उपयोग करके Flutter ऐप में भौगोलिक स्थान सेवाओं और कैमरा एक्सेस को जोड़ेंगे।

डिवाइस के स्थान तक पहुँचना

डिवाइस का स्थान प्राप्त करने के लिए हम geolocator प्लगइन का उपयोग करेंगे। यह स्थान की जानकारी के लिए GPS, Wi-Fi और सेल्युलर डेटा तक पहुँचने का सरल API उपलब्ध कराता है।

पहले, अपनी pubspec.yaml फ़ाइल में geolocator निर्भरता जोड़ें:

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

इसके बाद अपने टर्मिनल में flutter pub get चलाएँ।

स्थान की अनुमतियों का अनुरोध करना

उपयोगकर्ता के स्थान तक पहुँचने के लिए उसकी स्पष्ट अनुमति आवश्यक होती है। आपको अपने ऐप की नेटिव कॉन्फ़िगरेशन फ़ाइलों में इन अनुमतियों की घोषणा करनी होगी:

  • Android: ACCESS_FINE_LOCATION और ACCESS_COARSE_LOCATION को AndroidManifest.xml में जोड़ें।
  • iOS: NSLocationWhenInUseUsageDescription को Info.plist में जोड़ें और बताएँ कि आपके ऐप को स्थान तक पहुँच की आवश्यकता क्यों है।

इसके बाद geolocator प्लगइन रनटाइम पर इन अनुमतियों का अनुरोध स्वयं संभाल लेगा।

स्थान विजेट बनाना

स्थान का डेटा प्रदर्शित करने के लिए एक सरल Flutter ऐप संरचना बनाते हैं। स्थान के टेक्स्ट को प्रबंधित और अपडेट करने के लिए हम StatefulWidget का उपयोग करेंगे।

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

वर्तमान स्थान प्राप्त करना

अब अपने _LocationDisplayState में geolocator का तर्क जोड़ते हैं। डिवाइस के निर्देशांक प्राप्त करने के लिए हम getCurrentPosition का उपयोग करेंगे।

स्थान प्राप्त करने का प्रयास करने से पहले संभावित सेवा और अनुमति संबंधी समस्याओं को संभालना याद रखें।

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

फ़ोटो और वीडियो कैप्चर करना

डिवाइस के कैमरे या फ़ोटो गैलरी के साथ काम करने के लिए हम image_picker प्लगइन का उपयोग करेंगे। यह आपको गैलरी से चित्र/वीडियो चुनने या नए चित्र/वीडियो कैप्चर करने की सुविधा देता है।

अपने pubspec.yaml में image_picker जोड़ें:

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

इसके बाद flutter pub get चलाएँ।

कैमरा और गैलरी की अनुमतियाँ

भौगोलिक स्थान की तरह, कैमरा और गैलरी तक पहुँचने के लिए भी विशेष अनुमतियों की आवश्यकता होती है। आपको इन्हें अपने नेटिव प्रोजेक्ट की फ़ाइलों में कॉन्फ़िगर करना होगा:

  • Android: CAMERA और READ_EXTERNAL_STORAGE अनुमतियों को AndroidManifest.xml में जोड़ें।
  • iOS: NSPhotoLibraryUsageDescription और NSCameraUsageDescription को Info.plist में जोड़ें।

ये विवरण उपयोगकर्ता को बताते हैं कि आपके ऐप को इन अनुमतियों की आवश्यकता क्यों है।

गैलरी से चुनना

image_picker का उपयोग करके गैलरी से चित्र चुनने का तरीका दिखाने के लिए एक नया विजेट बनाते हैं। हम चुना गया चित्र प्रदर्शित करेंगे।

अपने डिवाइस की फ़ोटो गैलरी खोलने के लिए बटन पर टैप करें।

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

कैमरे से कैप्चर करना

अब अपने ऐप में बदलाव करते हैं, ताकि डिवाइस के कैमरे से सीधे फ़ोटो लेने की सुविधा भी मिल सके।

इसके लिए ImageSource.camera विकल्प का उपयोग किया जाता है।

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

प्लगइन का विश्वसनीय उपयोग

प्लगइन का उपयोग करते समय हमेशा त्रुटि प्रबंधन पर ध्यान दें। इन स्थितियों को उचित ढंग से संभालने के लिए प्लगइन कॉल को try-catch ब्लॉक में रखें:

  • उपयोगकर्ता द्वारा अनुमतियाँ अस्वीकार करना।
  • स्थान सेवाओं का बंद होना।
  • कैमरे का उपलब्ध न होना।

प्लगइन अक्सर व्यवहार को सूक्ष्म रूप से समायोजित करने और प्रदर्शन बेहतर बनाने के लिए विकल्प उपलब्ध कराते हैं, जैसे geolocator के लिए desiredAccuracy या image_picker के लिए imageQuality।

प्लगइन अनुमतियों की जाँच

आपने डिवाइस की सुविधाओं को जोड़ने और अनुमतियों के महत्व के बारे में सीखा है। अब अपनी समझ का परीक्षण करें।

डिवाइस की सुविधाओं का सारांश

बहुत अच्छा! आपने अपने Flutter ऐप में डिवाइस की शक्तिशाली सुविधाएँ जोड़ना सीखा है:

  • भौगोलिक स्थान: डिवाइस का वर्तमान स्थान प्राप्त करने के लिए geolocator का उपयोग।
  • कैमरा/गैलरी: गैलरी से चित्र चुनने या नई फ़ोटो कैप्चर करने के लिए image_picker का उपयोग।

सुचारु उपयोगकर्ता अनुभव सुनिश्चित करने के लिए इन सुविधाओं की अनुमतियों की घोषणा करने और उनका अनुरोध करने का महत्व याद रखें। डिवाइस की और भी क्षमताओं के लिए अन्य प्लगइन तलाशते रहें!

शुरुआत निःशुल्क

एआई शिक्षक के साथ Dart सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
22
पाठ
88

अक्सर पूछे जाने वाले प्रश्न

क्या “भौगोलिक स्थान और कैमरा प्लगइन” पाठ निःशुल्क है?

हाँ — Flutter मोबाइल विकास अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “भौगोलिक स्थान और कैमरा प्लगइन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“भौगोलिक स्थान और कैमरा प्लगइन” में मैं क्या सीखूँगा?

सुप्रतिष्ठित Flutter प्लगइन का उपयोग करके भौगोलिक स्थान सेवाओं और कैमरा पहुँच जैसी सामान्य डिवाइस सुविधाओं को एकीकृत करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Flutter मोबाइल विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Flutter मोबाइल विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Flutter मोबाइल विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“भौगोलिक स्थान और कैमरा प्लगइन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Flutter मोबाइल विकास पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Flutter मोबाइल विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. प्लेटफ़ॉर्म चैनल (MethodChannel)
  2. भौगोलिक स्थान और कैमरा प्लगइन
  3. मूल UI एकीकरण
  4. अनुमतियाँ और सेंसर
← Flutter मोबाइल विकास पर वापस जाएँ