Flutter信息窗口Googlemaps

r7xajy2e  于 2022-12-14  发布在  Flutter
关注(0)|答案(1)|浏览(139)

我如何添加多个页面并在我的信息窗口上滑动它?我正在寻找一个参考,但没有。我如何在我的代码上实现它?

We are developing an application use for locating food parks but the difference is that when the user clicked the map markers there will be an information window that pops up that can be scrolled and slide to right or left side. Here is the code.

这是我的代码。我上传的图像是我想要实现的。this is a sample image from youtube

import 'package:custom_info_window/custom_info_window.dart';
import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

const LatLng customLocation = LatLng(14.852885352588201, 120.81614049713285);

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late GoogleMapController _mapController;
  final Map<String, Marker> _markers = {};
  final _customInfoWindowController = CustomInfoWindowController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          GoogleMap(
            initialCameraPosition:
                const CameraPosition(target: customLocation, zoom: 11.5),
            onMapCreated: (controller) {
              _mapController = controller;
              _customInfoWindowController.googleMapController = controller;

| 标题1|标题2|
| - -|- -|
| 小区1|小区2|
| 小区3|小区4|
| 标题1|标题2|
| - -|- -|
| 小区1|小区2|
| 小区3|小区4|

addMarker5('test5',
                  const LatLng(14.896344082681443, 120.77674251390367));
            },
            onTap: (location) {
              _customInfoWindowController.hideInfoWindow!();
            },
            onCameraMove: (position) {
              _customInfoWindowController.onCameraMove!();
            },
            markers: _markers.values.toSet(),
          ),
          CustomInfoWindow(
            controller: _customInfoWindowController,
            height: 245,
            width: 220,
            offset: 50,
          )
        ],
      ),
    );
  }

  addMarker5(String markerid4, LatLng location) async {
    var markerIcon = await BitmapDescriptor.fromAssetImage(
        const ImageConfiguration(), 'assets/images/sanmarcosfoodpark.png');
    var marker = Marker(
        markerId: MarkerId(markerid4),
        position: location,
        //infoWindow: const InfoWindow(
        //  title: 'Title of Place',
        // snippet: 'Description',
        //),
        icon: markerIcon,
        onTap: () {
          _customInfoWindowController.addInfoWindow!(
            Container(
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(24),
              ),
              child: Column(
                children: [
                  Image.asset(
                    'assets/images/sanmarcoswindow.jpg',
                    fit: BoxFit.cover,
                  ),
                  const Text(
                    'San Marcos Foodpark',
                    style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
                  ),
                  const Text(
                    'Address:',
                    textAlign: TextAlign.right,
                    style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const Padding(
                    padding: EdgeInsets.only(left: 8.0, right: 8.0),
                    child: Text(
                      '13, R-9, Calumpit, Bulacan',
                      style: TextStyle(fontSize: 11),
                    ),
                  ),
                  const SizedBox(
                    height: 5.0,
                  ),
                  const Text('Contact no: ',
                      style:
                          TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
                  const Text('',
                      style: TextStyle(
                        fontSize: 11,
                      )),
                ],
              ),
            ),
            location,
          );
        });

    _markers[markerid4] = marker;
    setState(() {});
  }

  
  here I make a custom markers and I want to implement something like a slide function in my information window

相关问题