Google Map behaving Weird in Scrollable Widget (inside ListView.builder) - flutter

Question

I need to show Google Map in ListView.builder. in Ios its behaving weird. the App Header and Bottom App Bar got scrolled with White Space. GoogleMap get freeze as well.
SingleChildScrollView(
child: Container(
margin: EdgeInsets.all(10.0),
child: ListView.separated(
itemCount: state.products.length,
separatorBuilder:
(BuildContext context, int index) => SizedBox(
height: 10,
),
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, position) {
return PharmaciesItemWidget(
pharmacies: state.products[position],
remove: true,
removeBottom: true,
onTap: () {
BlocProvider.of<PharmaciesCubit>(context)
.deletePharmacy(
state.products[position].uuid);
},
);
// return Text("$position");
},
),
),
)
/// List Item Class
class PharmaciesItemWidget extends StatefulWidget {
final PharmaciesData pharmacies;
final VoidCallback onTap;
final bool remove;
final bool removeBottom;
const PharmaciesItemWidget({
Key key,
#required this.pharmacies,
this.onTap,
this.remove = false,
this.removeBottom = false,
}) : super(key: key);
#override
_PharmaciesItemWidgetWidgetState createState() =>
_PharmaciesItemWidgetWidgetState();
}
class _PharmaciesItemWidgetWidgetState extends State<PharmaciesItemWidget> {
#override
Widget build(BuildContext context) {
return
// Card(
// clipBehavior: Clip.antiAliasWithSaveLayer,
// elevation: 2,
// margin: EdgeInsets.all(10.0),
// shape: RoundedRectangleBorder(
// // side: BorderSide(color: AppColor.primaryColor, width: 2),
// borderRadius: BorderRadius.circular(15),
// ),
ClipRRect(
clipBehavior: Clip.antiAliasWithSaveLayer,
// elevation: 2,
// margin: EdgeInsets.all(10.0),
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
color: AppColor.primaryColor,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
flex: 1,
child: SvgPicture.asset(
AppImages.pharmacies,
color: AppColor.backgroundWhite,
width: 40,
height: 40,
),
),
SizedBox(
width: 5,
),
Expanded(
flex: 5,
child: Text(
widget.pharmacies.name ?? "",
// overflow: TextOverflow.fade,
maxLines: 2,
// softWrap: false,
style: GoogleFonts.comfortaa(
color: Colors.white, fontSize: 18),
),
),
Spacer(),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
widget.onTap();
},
child: widget.remove
? Icon(
Icons.remove_circle_outline,
color: AppColor.backgroundWhite,
size: 40,
)
: SvgPicture.asset(
AppImages.right_arrow_circle,
color: AppColor.backgroundWhite,
width: 40,
height: 40,
),
),
),
],
),
),
),
Container(
height: 5,
color: AppColor.secondaryColor,
),
Container(
padding: EdgeInsets.all(5.0),
color: AppColor.primaryBackground,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 5,
height: 5,
),
Text(widget.pharmacies.addressLine1 ?? "",
style: GoogleFonts.comfortaa(
color: AppColor.primaryColor, fontSize: 14)),
Row(
children: [
Text(widget.pharmacies.city + ", ",
style: GoogleFonts.comfortaa(
color: AppColor.primaryColor,
fontSize: 14)),
Text(widget.pharmacies.stateCode + " ",
style: GoogleFonts.comfortaa(
color: AppColor.primaryColor,
fontSize: 14)),
Text(widget.pharmacies.zip,
style: GoogleFonts.comfortaa(
color: AppColor.primaryColor,
fontSize: 14)),
],
),
SizedBox(
width: 5,
height: 5,
),
// widget.pharmacies.telecom !=null ? GestureDetector(
// onTap: () => dialNo(widget.pharmacies.telecom),
// child: Row(
// children: [
// Text(
// widget.pharmacies.telecom,
//
// style: TextStyle(fontSize: 16,color: AppColor.primaryColor,),
// ),
//
// SvgPicture.asset(
// AppImages.call_text,
// height: 20,
// color: AppColor.primaryColor,
// ),
// ],
// ),
// ) : SizedBox(),
phoneNoWidget(
widget.pharmacies.telecom,
AppColor.primaryColor,
),
enableMessageDebugging
? Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"UUID:",
textAlign: TextAlign.end,
style: TextStyle(
color: AppColor.primaryColor,
fontSize: 16),
),
SizedBox(
width: 10,
),
Text(
widget.pharmacies.uuid,
style: TextStyle(fontSize: 16),
)
],
)
: SizedBox(),
widget.removeBottom
? SizedBox(
height: 0,
)
: Column(
children: [
SizedBox(
height: 5,
),
Container(
height: 5,
color: AppColor.primaryColor,
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Row(
children: [
Text(
widget.pharmacies.distanceInMiles
.toStringAsFixed(1) +
" Miles Away",
style: GoogleFonts.comfortaa(
fontSize: 18,
color: AppColor.secondaryColor),
),
Spacer(),
// Text(
// Strings.delivery_partner,
// style: GoogleFonts.comfortaa(fontSize: 18),
// )
Image.asset(
AppImages.lyft_logo,
width: 25,
height: 17,
alignment: Alignment.bottomRight,
)
],
),
)
],
)
],
),
),
Container(
height: 5,
color: AppColor.primaryColor,
),
Container(
// decoration: BoxDecoration(
// image: DecorationImage(
// image: AssetImage(AppImages.map), fit: BoxFit.cover),
// ),
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width,
child: SafeArea(
child: Container(
color: Colors.blueGrey.withOpacity(.8),
child: Center(
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width,
child: GoogleMap(
initialCameraPosition: CameraPosition(target: LatLng(widget.pharmacies.latitude,widget.pharmacies.longitude), zoom: 15),
markers: <Marker>{
Marker(
markerId: MarkerId("location"),
position: LatLng(
widget.pharmacies.latitude,
widget.pharmacies.longitude,
),
infoWindow: InfoWindow(
title: "location",
snippet: '*',
),
),
},
mapType: MapType.normal,
// onMapCreated: _onMapCreated,
myLocationButtonEnabled: false,
),
) ,
],
),
),
),
),
),
Container(
height: 5,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
color: AppColor.primaryColor,
),
)
],
),
],
));
}
}
these are the some pictures of the issues
above is the ss of actual screen, adding ss for issues when we scroll it

Answer 1

I get to know today. Using Clip.antiAliasWithSaveLayer is costly.
There are enum property which define what it cost.
After investing many days i got to know antiAliasWithSaveLayer is very expensive to use.
hardEdge, which is the fastest clipping, but with lower fidelity.
antiAlias, which is a little slower than hardEdge, but with smoothed edges.
antiAliasWithSaveLayer, which is much slower than antiAlias, and should rarely be used.
Visit here for more information