📍 Выбор адреса на карте (как в Telegram)
Стандартный выбор локации не всегда удобен для пользователя. Гораздо приятнее иметь карту с фиксированным пином по центру и автоматическим определением адреса под ним.
🛠 Реализация через Custom Widget
Для этого нам потребуется создать кастомный виджет, использующий google_maps_flutter и API геокодинга от Google.
Ключевая логика:
- Карта центрируется на текущем местоположении.
- Пин (Icon) находится неподвижно в центре экрана.
- При перемещении карты (
onCameraIdle), виджет делает запрос к Google Geocoding API, чтобы получить текстовый адрес. - Адрес сохраняется в App State (например, в переменную
Address).
💻 Пример кода (фрагмент)
import 'package:google_maps_flutter/google_maps_flutter.dart' as gmaps;
import 'package:http/http.dart' as http;
// Функция для получения адреса из координат
Future<String> getAddressFromLatLng(double lat, double lng) async {
final apiKey = 'YOUR_GOOGLE_MAPS_API_KEY';
final url = Uri.parse('https://maps.googleapis.com/maps/api/geocode/json?latlng=$lat,$lng&key=$apiKey');
final response = await http.get(url);
if (response.statusCode == 200) {
final data = json.decode(response.body);
return data['results'][0]['formatted_address'];
}
return 'Адрес не найден';
}📺 Видео и демо
- Демонстрация работы (Видео) — Как выглядит выбор адреса в приложении.
- FlutterFlow Marketplace: Map Picker Template — Готовый шаблон для интеграции.
Автор контента: Sabikrus