我如何添加多个页面并在我的信息窗口上滑动它?我正在寻找一个参考,但没有。我如何在我的代码上实现它?
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
1条答案
按热度按时间o8x7eapl1#
我建议您查看此处显示的Stack Widget https://api.flutter.dev/flutter/widgets/Stack-class.html
以及可拖动的小部件,如此处所示https://api.flutter.dev/flutter/widgets/Draggable-class.html