FormField to pick one or more locations from open streat map

功能

  • 选择单个位置
  • 选择多个位置
  • 显示开放街图
  • 可与 bloc 模式配合使用
  • 响应暗色主题

入门

首先，您需要放置配置设置

  • 处理如何获取您的当前位置
  • 您可以使用 location 或 geolocator 包或任何您想要的东西

    return OpenMapSettings(
      onError: (context, error) {},
      getCurrentLocation: _getCurrentLocationUsingLocationPackage,
      
      reverseZoom: ReverseZoom.suburb,
      getLocationStream: () => location.onLocationChanged.map((event) => LatLng(event.latitude!, event.longitude!)),
      child: MaterialApp(
        title: 'Flutter Demo',
        locale: const Locale("ar"),
        localizationsDelegates: const [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: const [
          Locale('en', ''), // English, no country code
          Locale('ar', ''), // Spanish, no country code
        ],
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        themeMode: ThemeMode.dark,
        home: const MyHomePage(title: 'open_location_picker demo'),
      ),
    );

用法

  • 该软件包有 3 种方式

OpenMapPicker

    OpenMapPicker(
      decoration: const InputDecoration(hintText: "My location"),
      onSaved: (FormattedLocation? newValue) {
        /// save new value
      },
    ),

MultiOpenMapPicker

    MultiOpenMapPicker(
      decoration: const InputDecoration(hintText: "My  multi location"),
      onSaved: (List<FormattedLocation> newValue) {
        /// save new value
      },
    ),

自定义

  • 首先创建您自己的 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))),
    );
  }));

GitHub

查看 Github