یافتن مکان کاربر در فلاتر — راهنمای کاربردی

فلاتر فریمورکی است که از سوی گوگل ارائه شده است و امکان نوشتن اپلیکیشن‌های چند پلتفرمی را با استفاده از زبان برنامه‌نویسی «دارت» (Dart‌) ‌فراهم ساخته است. یعنی اپلیکیشن‌هایی که با فلاتر نوشته می‌شوند، می‌توانند هم روی دستگاه‌های اندروید و هم iOS اجرا شوند. اگر اپلیکیشنی که می‌نویسید به هر نوعی با نقشه مرتبط است، در این صورت موقعیت‌یابی کاربر یکی از بخش‌های مهم اپلیکیشن محسوب می‌شود. خوشبختانه این کار در فلاتر با استفاده از پکیج Geolocator (+) به آسانی صورت می‌گیرد. در ادامه این مقاله با روش یافتن مکان کاربر در فلاتر آشنا خواهیم شد.

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی در فرادرس

کلیک کنید

نخستین گام برای یافتن موقعیت کاربر در فلاتر، نصب پکیج Geolocator از طریق افزودن آن به فایل pubspec.yaml به صورت زیر است:

1environment:
2  sdk: ">=2.1.0 <3.0.0"
3
4dependencies:
5  flutter:
6    sdk: flutter
7
8  # The following adds the Cupertino Icons font to your application.
9  # Use with the CupertinoIcons class for iOS style icons.
10  cupertino_icons: ^0.1.2
11  geolocator: ^5.1.5

اگر از ادیتور VS Code استفاده می‌کنید، کافی است فایل را ذخیره کنید تا کار دانلود پکیج آغاز شود. اگر از ادیتور دیگری استفاده می‌کنید، ‌باید دستور زیر را در ترمینال وارد کنید تا این دانلود آغاز شود:

flutter packages get

اکنون که پکیج Geolocator نصب شده است، می‌توانیم به بررسی شیوه استفاده از آن بپردازیم. ما یک ویجت اصلی مقدماتی داریم که شامل یک FlatButton است و یک Text داریم که در کد زیر نمایش یافته است:

1@override
2  Widget build(BuildContext context) {
3
4    return MaterialApp(
5      title: "Hello Location", 
6      home: Scaffold(
7        body: Center(
8          child: Column(
9              mainAxisAlignment: MainAxisAlignment.center,
10              children: <Widget>[
11              Text(""), 
12              FlatButton(
13                child: Text("Find Current Location",style: TextStyle(color: Colors.white)), 
14                color: Colors.green, 
15                onPressed: () {
16                  _displayCurrentLocation();
17                },
18              )
19          ]),
20        )
21      )
22    );
23    
24  }

سپس تابع ‎_displayCurrentLocation  را پیاده‌سازی می‌کنیم:

1void _displayCurrentLocation() async {
2    final _location  = await Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
3  }

متأسفانه این تابع فعلاً روی هیچ دستگاه یا شبیه‌سازی کار نمی‌کند، ‌زیرا باید مجوزهای لازم را تنظیم کنیم.

در مورد اندروید باید فایل gradle.properties را که در پوشه android قرار دارد باز کنید و خطوط زیر را به آن اضافه نمایید:

android.useAndroidX=true
android.enableJetifier=true

همچنین باید مطمئن شوید که در فایل android/app/build.gradle، گزینه compileSDKVersion روی عدد 28 با بالاتر تنظیم شده است:

android {
compileSdkVersion 28
...
}

در نهایت فایل AndroidManifest.xml را که در مسیر android/app/src/main قرار دارد با مجوزهای زیر به‌روزرسانی کنید:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

اینک نوبت به تنظیم بخش iOS رسیده است. فایل info.plist را که در پوشه ios/Runner قرار دارد، باز کرده و مداخل زیر را به آن اضافه کنید:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>

اکنون اپلیکیشن را اجرا و روی دکمه کلیک می‌کنیم تا آن را امتحان کنیم. زمانی که روی دکمه اپلیکیشن کلیک کنید، ‌یک مجوز برای استفاده از Location درخواست می‌کند. زمانی که این مجوز ارائه شود، موقعیت کنونی شما را یافته و مختصات آن را در کنسول نمایش می‌دهد. برای نمایش مختصات روی اینترفیس کاربری باید ویجت را از حالت بی‌حالت به باحالت به‌روزرسانی کنیم که پیاده‌سازی آن به صورت زیر است:

1oid main() => runApp(App());
2
3class App extends StatefulWidget {
4  @override 
5  _AppState createState() => _AppState(); 
6}
7
8class _AppState extends State<App> {
9
10  Position _location = Position(latitude: 0.0, longitude: 0.0); 
11
12  void _displayCurrentLocation() async {
13
14    final location = await Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
15
16    setState(() {
17      _location = location; 
18    });
19
20  }
21
22  @override
23  Widget build(BuildContext context) {
24
25    return MaterialApp(
26      title: "Hello Location", 
27      home: Scaffold(
28        body: Center(
29          child: Column(
30              mainAxisAlignment: MainAxisAlignment.center,
31              children: <Widget>[
32              Text("${_location.latitude}, ${_location.longitude}"), 

اکنون زمانی که اپلیکیشن را اجرا کرده و روی دکمه کلیک کنید، مختصات موقعیت مکانی کنونی شما، چنان که در تصویر زیر می‌بینید، روی صفحه نمایش می‌یابد:

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌ نویسی اندروید
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش فریم ورک Google Flutter برای طراحی اپلیکیشن های موبایل
• ساخت اپلیکیشن قطب نما با فلاتر — از صفر تا صد
• ایجاد سرویس در اپلیکیشن فلاتر — از صفر تا صد

==