如何在谷歌地图上叠加"包含"

Question

我为健康服务创建了一个定位器应用程序。

I在地图上显示医院的位置，并在下面列出医院列表。最初地图显示在50%的屏幕上，列表显示在下面。

不，我希望地图覆盖整个屏幕，滚动列表用填充物占据页面的下半部分。

我试着把它们堆起来，但我失败了。

我设法把地图覆盖了整个屏幕，但列表不再显示了。

我希望它清楚。有人帮忙。

没有错误，但滚动列表不显示

import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:geolocator/geolocator.dart';
import 'package:drmap/services/geolocator_service.dart';
import 'package:drmap/services/marker_service.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:provider/provider.dart';
import 'package:url_launcher/url_launcher.dart';
import '../models/place.dart';
class Search extends StatelessWidget {
@override
Widget build(BuildContext context) {
final currentPosition = Provider.of<Position>(context);
final placesProvider = Provider.of<Future<List<Place>>>(context);
final geoService = GeoLocatorService();
final markerService = MarkerService();
return Stack(
children: <Widget>[
Container(
child: FutureProvider(
create: (context) => placesProvider,
child: Scaffold(
backgroundColor: Colors.grey[100],
body: (currentPosition != null)
? Consumer<List<Place>>(
builder: (_, places, __) {
var markers = (places != null)
? markerService.getMarkers(places)
: List<Marker>();
return (places != null)
? Column(
children: <Widget>[
Container(
height:
MediaQuery.of(context).size.height / 1,
width: MediaQuery.of(context).size.width,
child: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(
currentPosition.latitude,
currentPosition.longitude),
zoom: 16.0),
zoomGesturesEnabled: true,
markers: Set<Marker>.of(markers),
),
),
/*    SizedBox(
height: 10.0,                              
),
*/
// List of locations
Container(
child: Expanded(
child: (places.length > 0)
? ListView.builder(
itemCount: places.length,
itemBuilder: (context, index) {
return FutureProvider(
create: (context) =>
geoService.getDistance(
currentPosition
.latitude,
currentPosition
.longitude,
places[index]
.geometry
.location
.lat,
places[index]
.geometry
.location
.lng),
// Card List
child: Padding(
padding:
const EdgeInsets.only(
left: 8.0,
right: 8.0),
child: Card(
color: Colors.white,
child: ListTile(
title: Text(
places[index].name),
subtitle: Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
children: <Widget>[
SizedBox(
height: 3.0,
),
(places[index]
  .rating !=
null)
? Row(
children: <
  Widget>[
RatingBarIndicator(
  rating:
      places[index].rating,
  itemBuilder: (context, index) => Icon(
      Icons
          .star,
      color:
          Colors.teal[400]),
  itemCount:
      5,
  itemSize:
      20.0,
  direction:
      Axis.horizontal,
)
],
)
: Row(),
SizedBox(
height: 5.0,
),
Consumer<double>(
builder: (context,
meters,
wiget) {
return (meters !=
  null)
? Text(
  '${places[index].vicinity}) u00b7 ${(meters / 1000).toStringAsFixed(2)} km',
  style: TextStyle(
      fontWeight:
          FontWeight.bold),
)
: Container();
},
)
],
),
trailing: IconButton(
icon: Icon(
Icons.directions),
color:
Theme.of(context)
.primaryColor,
onPressed: () {
_launchMapsUrl(
places[index]
.geometry
.location
.lat,
places[index]
.geometry
.location
.lng);
},
),
),
),
),
);
})
: Center(
child: Text(
'No Medical Services Found'),
),
),
)
],
)
: Center(child: CircularProgressIndicator());
},
)
: Center(
child: CircularProgressIndicator(),
),
),
),
),
],
);
}
void _launchMapsUrl(double lat, double lng) async {
final url = 'https://www.google.com/maps/search/?api=1&query=$lat,$lng';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
}

Answer 1

你试过这个吗？

Stack(
children: [
GoogleMap(
// ...
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * YOUR_PREFERRED_RATIO,
padding: // ...,
// ...
),
),
],
)