Flutter là một framework từ Google cho phép bạn sử dụng ngôn ngữ Dart để viết các ứng dụng đa nền tảng. Điều này có nghĩa là ứng dụng của bạn sẽ chạy trên cả thiết bị iOS và Android.
Nếu bạn đang xây dựng một ứng dụng bản đồ thì việc tìm kiếm vị trí hiện tại của người dùng là một phần không thể thiếu trong ứng dụng của bạn. May mắn thay, Flutter làm cho nó siêu đơn giản bằng cách sử dụng gói Geolocator.
Bước đầu tiên là cài đặt gói Geolocator bằng cách thêm nó vào tệp pubspec.yaml như dưới đây:
1 2 3 4 5 6 7 8 9 10 11 12 | environment<span class="token operator">:</span> sdk<span class="token operator">:</span> <span class="token string">">=2.1.0 <3.0.0"</span> dependencies<span class="token operator">:</span> flutter<span class="token operator">:</span> sdk<span class="token operator">:</span> flutter # The following adds the Cupertino Icons font to your application<span class="token punctuation">.</span> # Use with the CupertinoIcons <span class="token keyword">class</span> <span class="token class-name">for</span> iOS style icons<span class="token punctuation">.</span> cupertino_icons<span class="token operator">:</span> <span class="token operator">^</span><span class="token number">0.1</span><span class="token number">.2</span> geolocator<span class="token operator">:</span> <span class="token operator">^</span><span class="token number">5.1</span><span class="token number">.5</span> |
Nếu bạn đang sử dụng VS Code thì chỉ cần lưu file tải xuống các package. Nếu bạn đang sử dụng một số trình soạn thảo khác thì hãy chạy lệnh sau từ command line terminal:
1 2 | flutter packages get |
Bây giờ, bạn đã cài đặt gói Geolocator, và hãy cùng tìm hiểu xem cách sử dụng nó như thế nào nhé.
Ví dụ, mình sẽ có 1 màn hình có các widget rất cơ bản, chứa FlatButton và Text giống như dưới đây:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token annotation punctuation">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span> title<span class="token operator">:</span> <span class="token string">"Hello Location"</span><span class="token punctuation">,</span> home<span class="token operator">:</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span> body<span class="token operator">:</span> <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token operator">:</span> <span class="token function">Column</span><span class="token punctuation">(</span> mainAxisAlignment<span class="token operator">:</span> MainAxisAlignment<span class="token punctuation">.</span>center<span class="token punctuation">,</span> children<span class="token operator">:</span> <span class="token generics function"><span class="token punctuation"><</span>Widget<span class="token punctuation">></span></span><span class="token punctuation">[</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">FlatButton</span><span class="token punctuation">(</span> child<span class="token operator">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Find Current Location"</span><span class="token punctuation">,</span>style<span class="token operator">:</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span>color<span class="token operator">:</span> Colors<span class="token punctuation">.</span>white<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> color<span class="token operator">:</span> Colors<span class="token punctuation">.</span>green<span class="token punctuation">,</span> onPressed<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">_displayCurrentLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Tiếp theo, implement phương thức (function) _displayCurrentLocation.
1 2 3 4 5 6 | <span class="token keyword">void</span> <span class="token function">_displayCurrentLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> async <span class="token punctuation">{</span> <span class="token keyword">final</span> _location <span class="token operator">=</span> await <span class="token function">Geolocator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getCurrentPosition</span><span class="token punctuation">(</span>desiredAccuracy<span class="token operator">:</span> LocationAccuracy<span class="token punctuation">.</span>high<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Tuy nhiên, rất tiếc là nó sẽ không hoạt động trên bất kỳ thiết bị hoặc trình giả lập (simulator) nào vì chúng ta sẽ phải cần thiết lập quyền permissions.
Đối với Android, hãy mở tệp gradle.properIES trong thư mục Android và thêm các dòng sau:
1 2 3 | android.useAndroidX=true android.enableJetifier=true |
Ngoài ra, hãy đảm bảo rằng compileSDKVersion được set thành 28 hoặc cao hơn trong tệp android / app / build.gradle.
1 2 3 4 5 6 | android { compileSdkVersion 28 ... } |
Cuối cùng, cập nhật tệp AndroidManifest.xml có trong android / app / src / main với các permissions sau:
1 2 3 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.ACCESS_FINE_LOCATION<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.ACCESS_COARSE_LOCATION<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
Tiếp theo, config cho iOS.
Mở vị trí tệp info.plist trong thư mục ios / Runner và thêm các mục sau:
1 2 3 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>key</span><span class="token punctuation">></span></span>NSLocationWhenInUseUsageDescription<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>key</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>string</span><span class="token punctuation">></span></span>This app needs access to location when open.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>string</span><span class="token punctuation">></span></span> |
Vậy là xong, bây giờ chúng ta sẽ thử nó bằng cách chạy ứng dụng lên và click vào button. Khi bạn nhấp vào button, ứng dụng sẽ yêu cầu bạn cho phép sử dụng vị trí của bạn. Khi bạn đã cấp vị trí, nó sẽ tìm vị trí hiện tại của bạn và hiển thị tọa độ trên console.
Để hiển thị tọa độ trên giao diện người dùng, chúng ta sẽ cần update widget của từ stateless to stateful. Cách implement như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | oid <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">runApp</span><span class="token punctuation">(</span><span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span> <span class="token annotation punctuation">@override</span> _AppState <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">_AppState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">_AppState</span> <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics function"><span class="token punctuation"><</span>App<span class="token punctuation">></span></span> <span class="token punctuation">{</span> Position _location <span class="token operator">=</span> <span class="token function">Position</span><span class="token punctuation">(</span>latitude<span class="token operator">:</span> <span class="token number">0.0</span><span class="token punctuation">,</span> longitude<span class="token operator">:</span> <span class="token number">0.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">void</span> <span class="token function">_displayCurrentLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> async <span class="token punctuation">{</span> <span class="token keyword">final</span> location <span class="token operator">=</span> await <span class="token function">Geolocator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getCurrentPosition</span><span class="token punctuation">(</span>desiredAccuracy<span class="token operator">:</span> LocationAccuracy<span class="token punctuation">.</span>high<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> _location <span class="token operator">=</span> location<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span> title<span class="token operator">:</span> <span class="token string">"Hello Location"</span><span class="token punctuation">,</span> home<span class="token operator">:</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span> body<span class="token operator">:</span> <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token operator">:</span> <span class="token function">Column</span><span class="token punctuation">(</span> mainAxisAlignment<span class="token operator">:</span> MainAxisAlignment<span class="token punctuation">.</span>center<span class="token punctuation">,</span> children<span class="token operator">:</span> <span class="token generics function"><span class="token punctuation"><</span>Widget<span class="token punctuation">></span></span><span class="token punctuation">[</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"${_location.latitude}, ${_location.longitude}"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
Và bây giờ, khi bạn chạy ứng dụng, bạn có thể nhấp vào button “Find Current Location” để hiển thị tọa độ hiện tại trên màn hình như trong ảnh chụp màn hình bên dưới:
Cám ơn các bạn đã đọc bài viết. Thanks u
Tài liệu tham khảo: