在GoogleMap和堆栈中使用DraggableScrollableSheet,可以实现在地图上显示一个可拖动的滚动面板。以下是详细的步骤:
以下是一个示例代码:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Google Map with DraggableScrollableSheet',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Google Map with DraggableScrollableSheet'),
),
body: Stack(
children: [
GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(37.7749, -122.4194),
zoom: 12,
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: DraggableScrollableSheet(
initialChildSize: 0.3,
minChildSize: 0.1,
maxChildSize: 0.8,
builder: (BuildContext context, ScrollController scrollController) {
return Container(
color: Colors.white,
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
),
);
},
),
),
],
),
);
}
}
这个示例代码中,我们创建了一个包含GoogleMap和DraggableScrollableSheet的堆栈布局。GoogleMap被放置在底部,而DraggableScrollableSheet被放置在顶部。在DraggableScrollableSheet中,我们使用ListView.builder来展示一些示例内容。
请注意,这只是一个基本示例,你可以根据自己的需求进行定制和扩展。关于Google Maps SDK和Flutter的更多信息,你可以参考以下链接:
希望这个答案能够帮助到你!
领取专属 10元无门槛券
手把手带您无忧上云