When AppBar with extendBodyBehindAppBar=false is added to the example app, then the map moves lower and is not centred correctly (see attached screenshots) - it can be seen by the marker in the center of the map.
Is this a bug or am I missing something? I don't want the map to be behind the AppBar and I want it to be in the center of body at the same time.
Here is the modified code of the original example:
When AppBar with extendBodyBehindAppBar=false is added to the example app, then the map moves lower and is not centred correctly (see attached screenshots) - it can be seen by the marker in the center of the map.
Is this a bug or am I missing something? I don't want the map to be behind the AppBar and I want it to be in the center of body at the same time.
Here is the modified code of the original example:
// @dart=2.9
/ Name: Akshath Jain Date: 3/18/2019 - 4/26/2021 Purpose: Example app that implements the package: sliding_up_panel Copyright: © 2021, Akshath Jain. All rights reserved. Licensing: More information can be found here: https://github.com/akshathjain/sliding_up_panel/blob/master/LICENSE /
import 'dart:ui';
import 'package:flutter/material.dart'; import 'package:sliding_up_panel/sliding_up_panel.dart'; import 'package:flutter/services.dart';
import 'package:flutter_map/flutter_map.dart'; import 'package:latlong/latlong.dart'; import 'package:cached_network_image/cached_network_image.dart';
void main() => runApp(SlidingUpPanelExample());
class SlidingUpPanelExample extends StatelessWidget { @override Widget build(BuildContext context) { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( systemNavigationBarColor: Colors.grey[200], systemNavigationBarIconBrightness: Brightness.dark, systemNavigationBarDividerColor: Colors.black, ));
} }
class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); }
class _HomePageState extends State {
final double _initFabHeight = 120.0; double _fabHeight = 0; double _panelHeightOpen = 0; double _panelHeightClosed = 95.0;
@override void initState() { super.initState();
}
@override Widget build(BuildContext context) { _panelHeightOpen = MediaQuery.of(context).size.height * .80;
}
Widget _panel(ScrollController sc) { return MediaQuery.removePadding( context: context, removeTop: true, child: ListView( controller: sc, children:[
SizedBox(
height: 12.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 30,
height: 5,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(12.0))),
),
],
),
SizedBox(
height: 18.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Explore Pittsburgh",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 24.0,
),
),
],
),
SizedBox(
height: 36.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_button("Popular", Icons.favorite, Colors.blue),
_button("Food", Icons.restaurant, Colors.red),
_button("Events", Icons.event, Colors.amber),
_button("More", Icons.more_horiz, Colors.green),
],
),
SizedBox(
height: 36.0,
),
Container(
padding: const EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Images",
style: TextStyle(
fontWeight: FontWeight.w600,
)),
SizedBox(
height: 12.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CachedNetworkImage(
imageUrl:
"https://images.fineartamerica.com/images-medium-large-5/new-pittsburgh-emmanuel-panagiotakis.jpg",
height: 120.0,
width: (MediaQuery.of(context).size.width - 48) / 2 - 2,
fit: BoxFit.cover,
),
CachedNetworkImage(
imageUrl:
"https://cdn.pixabay.com/photo/2016/08/11/23/48/pnc-park-1587285_1280.jpg",
width: (MediaQuery.of(context).size.width - 48) / 2 - 2,
height: 120.0,
fit: BoxFit.cover,
),
],
),
],
),
),
SizedBox(
height: 36.0,
),
Container(
padding: const EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("About",
style: TextStyle(
fontWeight: FontWeight.w600,
)),
SizedBox(
height: 12.0,
),
Text(
"Pittsburgh is a city in the state of Pennsylvania in the United States...",
softWrap: true,
),
],
),
),
SizedBox(
height: 24,
),
],
));
}
Widget _button(String label, IconData icon, Color color) { return Column( children:[
Container(
padding: const EdgeInsets.all(16.0),
child: Icon(
icon,
color: Colors.white,
),
decoration:
BoxDecoration(color: color, shape: BoxShape.circle, boxShadow: [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.15),
blurRadius: 8.0,
)
]),
),
SizedBox(
height: 12.0,
),
Text(label),
],
);
}
Widget _body() { return FlutterMap( options: MapOptions( center: LatLng(40.441589, -80.010948), zoom: 13, maxZoom: 15, ), layers: [ TileLayerOptions( urlTemplate: "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png"), MarkerLayerOptions(markers: [ Marker( point: LatLng(40.441753, -80.011476), builder: (ctx) => Icon( Icons.location_on, color: Colors.blue, size: 48.0, ), height: 60), ]), ], ); }
Widget _map() { return Material( child: Stack( alignment: Alignment.topCenter, children:[
SlidingUpPanel(
maxHeight: _panelHeightOpen,
minHeight: _panelHeightClosed,
parallaxEnabled: true,
parallaxOffset: .5,
body: _body(),
panelBuilder: (sc) => _panel(sc),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(18.0),
topRight: Radius.circular(18.0)),
onPanelSlide: (double pos) => setState(() {
_fabHeight = pos * (_panelHeightOpen - _panelHeightClosed) +
_initFabHeight;
}),
),
Positioned(
right: 20.0,
bottom: _fabHeight,
child: FloatingActionButton(
child: Icon(
Icons.gps_fixed,
color: Theme.of(context).primaryColor,
),
onPressed: () {},
backgroundColor: Colors.white,
),
),
],
),
);
}
}