パッケージ、リポジトリ、アプリカテゴリを検索

interactive_maps_marker のカバー
パッケージ詳細v0.0.10

interactive_maps_marker

詳細カード付きの使いやすいアニメーションマップマーカー。店舗や任意の場所のロケーターにご利用ください。

30日間ダウンロード
55
いいね数
57
Pub ポイント
60

パッケージをインストール

flutter pub add interactive_maps_marker

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Interactive Maps Marker は、インタラクティブな詳細カードを備えたアニメーションマップマーカーを提供するFlutterパッケージです。シンプルさを重視しており、開発者が店舗検索や観光スポット表示などの位置ベースの機能を簡単に統合できるように設計されています。タップするとマーカーがアニメーションし、追加情報が含まれるカスタマイズ可能なカードが表示されます。直感的な地理情報の可視化とユーザー参加を必要とするアプリに最適です。スムーズな遷移とレスポンシブデザインをサポートし、複雑な設定なしでユーザー体験を向上させます。

用途

  • ストアロケータアプリケーション
  • 観光スポットのハイライト
  • イベント会場検索エンジン
  • 観光と旅行ガイド
  • リアルタイム位置追跡インターフェース

主な機能

  • アニメーションマーカーの遷移
  • カスタマイズ可能な詳細カード
  • Google マップとの簡単な統合
  • タップして表示するインタラクション
  • 応答性のあるUIコンポーネント
  • 軽量で設定が簡単

適している対象

  • 場所ベースのアプリを開発する開発者
  • 迅速なマップ機能の実装が必要なスタートアップ
  • ユーザーにやさしいナビゲーションに焦点を当てるアプリ
  • マップ操作に最小限のコードが必要なプロジェクト
  • Flutterの初心者が位置情報を探求しています

注意事項

  • 完全な機能を活用するには Google Maps API キーが必要です
  • Android および iOS に限定(Web サポートについては言及されていない)
  • カスタムスタイルには追加のDart知識が必要になる場合があります
  • 外部マップレンダリングライブラリに依存しています
  • 高密度マーカークラスターに最適化されていません

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

interactive_maps_marker for Flutter

Easy to use Animated Maps Markers with detail card. Use it for store or any place locator.

Demo

Usage

Add this package to your pubspec.yaml in dependencies: section

dependencies: 
  interactive_maps_marker: ^0.0.2

This package depends upon google_maps_flutter so first setup this by following This Guide

Update dependencies

flutter pub get

You can now add a InteractiveMapsMarker widget to your widget tree.

Simple Usage

In your widget import the package and use InteractiveMapsMarker Widget

Example

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:interactive_maps_marker/interactive_maps_marker.dart';

class ExplorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return InteractiveMapsMarker(
      items: <MarkerItem>[
        MarkerItem(id: 1, latitude: 31.4673274, longitude: 74.2637687),
        MarkerItem(id: 2, latitude: 31.4718461, longitude: 74.3531591),
      ],
      center: LatLng(31.4906504, 74.319872),
      itemContent: (context, index) {
        return Text("Current Item $index");
      },
    );

  }
}
Advanced Usage

Coming Soon

Markers data from a remote server?

Use this widget inside a stateful widget and update the markers list state with new data. An example can be found in stateful_example.dart file in example project.

Customise with parameters

You can customise it by passing various parameter values. Details about all parameters is as follows.

Parameter Type Default Value Description
items List<MarkerItem> none List of Markers with type of MarkerItem. This parameter is required and cannot be null.
itemContent IndexedWidgetBuilder none This is builder function which will receive context and index. You must return a Widget which will show on a pre designed container. This is exactly like you use ListView Builder. Not applicable when using itemBuilder
center LatLng LatLng(0.0, 0.0) Center point for initial map display.
zoom double 12.0 Default zoom value for initial map screen.
itemHeight double 116.0 Height of your detail item. Not applicable when using itemBuilder
itemPadding EdgeInsetsGeometry EdgeInsets.only(bottom: 80.0) Padding for item detail card. Mainly used for bottom padding.
itemPadding Alignment Alignment.bottomCenter Alignment for content slider.
itemBuilder IndexedWidgetBuilder null If you don't want default container and want to build the bottom widget yourself, you can use this builder instead of itemContent and have full control over UI. This is builder function which will receive context and index. You must return a Widget.
controller InteractiveMapsController null A controller if you want to add the markers later and then call rebuild() or change the index of marker to animate with your action via setCurrentIndex(int index).

Meta

Atiq Samtia– @AtiqSamtia – me@atiqsamtia.com

Distributed under the MIT license.

https://github.com/atiqsamtia/interactive_maps_marker_flutter

Credits

Inspired by amazing work from Mohamed Douzane

Github Repo

Medium Post

Contributing

  1. Fork it (https://github.com/atiqsamtia/interactive_maps_marker_flutter/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

カテゴリー

依存関係

依存関係一覧 1 件

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。