autoscroll_map_markers 0.0.1+1

Easy to use Map Markers and connect them to a list of data.

example/lib/main.dart

import 'package:autoscroll_map_markers/auto_scroll_map_markers.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auto Scroll Map Marker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<MarkerItem> markers = []
    ..add(MarkerItem(id: 1, latitude: 31.4673274, longitude: 74.2637687))
    ..add(MarkerItem(id: 2, latitude: 31.4718461, longitude: 74.3531591))
    ..add(MarkerItem(id: 3, latitude: 31.5325107, longitude: 74.3610325))
    ..add(MarkerItem(id: 4, latitude: 31.4668809, longitude: 74.31354));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Usage'),
      ),
      body: AutoScrollMapMarker(
        items: markers,
        center: LatLng(31.4906504, 74.319872),
        itemContent: (context, index) {
          MarkerItem item = markers[index];
          return BottomTile(item: item);
        },
        // itemBuilder: (BuildContext context, int index) {
        // implement item Builder Here
        // },
      ),
    );
  }
}

class BottomTile extends StatelessWidget {
  const BottomTile({@required this.item});

  final MarkerItem item;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          Container(width: 100, color: Colors.blue),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text("Example Title",
                      style: Theme.of(context).textTheme.headlineSmall),
                  Text("${item.latitude} , ${item.longitude}"),
                  stars(),
                  Expanded(
                    child: Text('This is a description ...'),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Row stars() {
    return Row(
      children: <Widget>[
        Icon(Icons.star, color: Colors.yellow),
        Icon(Icons.star, color: Colors.yellow),
        Icon(Icons.star, color: Colors.yellow),
        Icon(Icons.star_half, color: Colors.yellow),
        Icon(Icons.star_border, color: Colors.yellow),
        SizedBox(width: 3.0),
        Text('5.0',
            style: TextStyle(
                color: Colors.black,
                fontSize: 24.0,
                fontWeight: FontWeight.w600))
      ],
    );
  }
}