Flutter位置选择插件 open_location_picker 的使用

open_location_picker 是一个用于在Flutter应用中选择地理位置的插件。它支持从OpenStreetMap地图上选择单个或多个位置，并且可以与BLoC模式集成，适应暗黑主题。

特性

• 选择单个位置
• 选择多个位置
• 显示OpenStreetMap地图
• 可以与BLoC模式一起工作
• 尊重暗黑主题

开始使用

首先需要配置一些设置：

• 处理如何获取当前位置（可以使用location或geolocator包，或者任何你想要的方式）

示例代码

import 'package:flutter/material.dart';
import 'package:open_location_picker/open_location_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return _buildGeolocatorPackage();
  }

  Future<LatLng> _determinePosition() async {
    // 这里应该实现获取当前位置的逻辑
    // 示例中省略了具体实现
    return LatLng(37.4219983, -122.084);
  }

  Widget _buildGeolocatorPackage() {
    return OpenMapSettings(
      onError: (context, error) {},
      getCurrentLocation: _determinePosition,
      reverseZoom: ReverseZoom.building,
      getLocationStream: () => Stream.fromIterable([]),
      child: MaterialApp(
        title: 'Flutter Demo',
        locale: const Locale("en"),
        localizationsDelegates: const [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: const [
          Locale('en', ''), // 英语，无国家代码
          Locale('ar', ''), // 阿拉伯语，无国家代码
        ],
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        themeMode: ThemeMode.light,
        home: const MyHomePage(title: 'open_location_picker demo'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView(
          padding: const EdgeInsets.all(20),
          children: <Widget>[
            OpenMapPicker(
              decoration: const InputDecoration(
                hintText: "My Location",
              ),
              onSaved: (FormattedLocation? newValue) {
                // 保存新值
              },
            ),
            MultiOpenMapPicker(
              decoration: const InputDecoration(hintText: "My multi location"),
              onSaved: (List<FormattedLocation> newValue) {
                // 保存新值
              },
            ),
          ],
        ),
      ),
    );
  }

  void showPicker(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
      return OpenStreetMaps(
        options: OpenMapOptions(),
        bloc: CustomBloc(const OpenMapState.selected(SelectedLocation.single(null))),
      );
    }));
  }
}

class CustomBloc extends Cubit<OpenMapState> implements OpenMapBloc {
  CustomBloc(OpenMapState initialState) : super(initialState);

  @override
  void emit(OpenMapState state) {
    super.emit(state);
  }
}

使用方法

有三种方式可以使用此插件：

1. 使用 OpenMapPicker 选择单个位置

OpenMapPicker(
  decoration: const InputDecoration(hintText: "My location"),
  onSaved: (FormattedLocation? newValue) {
    /// 保存新值
  },
),

2. 使用 MultiOpenMapPicker 选择多个位置

MultiOpenMapPicker(
  decoration: const InputDecoration(hintText: "My multi location"),
  onSaved: (List<FormattedLocation> newValue) {
    /// 保存新值
  },
),

3. 自定义使用

第一步：创建自定义 BLoC

class CustomBloc extends Cubit<OpenMapState> implements OpenMapBloc {
  CustomBloc(OpenMapState initialState) : super(initialState);
}

第二步：使用它

Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
  return OpenStreetMaps(
    options: OpenMapOptions(),
    bloc: CustomBloc(const OpenMapState.selected(SelectedLocation.single(null))),
  );
}));