sliding_up_panel
sliding_up_panel copied to clipboard
akshathjain
body out of panel!
i am having a very weird problem with the panel and that's the body is being displayed outside, like this
here is the code
where I use the panel:
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final Completer<GoogleMapController> _controller = Completer();
static const _center = LatLng(45.521563, -122.67433);
final LatLng _lastMapPosition = _center;
final _pc = PanelController();
_onMapCreated(GoogleMapController controller) {
_controller.complete(controller);
}
// _onCameraMove(CameraPosition position) {
// _lastMapPosition = position.target;
// }
@override
Widget build(BuildContext context) {
ScreenUtil.init(context);
return Scaffold(
backgroundColor: Colors.black,
drawer: CustomDrawer(),
body: Container(
color: Colors.grey,
child: Stack(
children: <Widget>[
RaisedButton(
child: Text('Open Dialog'),
onPressed: () => CoolAlert.show(
context: context,
type: CoolAlertType.info,
title: 'No nearby drivers',
text: 'Please call for a driver now, 9085095433',
),
),
Positioned(
top: 0.08.hp,
left: 0.10.wp,
child: Container(
width: 0.8.wp,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
bottomRight: Radius.circular(45),
bottomLeft: Radius.circular(35),
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 4,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
padding: EdgeInsets.symmetric(
vertical: 12,
horizontal: 10,
),
child: Padding(
padding: const EdgeInsets.only(left: 12.0),
child: Row(
children: [
Icon(
Icons.circle,
size: 10,
color: appBlue,
),
SizedBox(width: 0.02.wp),
Text(
'Your Taxi has arrived',
style: GoogleFonts.hammersmithOne(
fontSize: 45.sp,
),
),
],
),
),
),
),
GoogleMap(
// onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
),
SlidingUpPanel(
controller: _pc,
panel: NavigateHeader(),
body: NavigateBody(),
// isDraggable: false,
color: Colors.transparent,
boxShadow: null,
minHeight: 0.30.hp,
),
],
),
),
);
}
}
and the body code:
class NavigateBody extends StatelessWidget {
final _navigationService = NavigatorService.make();
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
BottomSheetTile(
onTap: () => _navigationService.navigateTo(HomeAddressPage.tag),
leading: Icon(Icons.house),
title: 'Set Home Address',
),
BottomSheetTile(
onTap: () => _navigationService.navigateTo(WorkAddressPage.tag),
leading: Icon(Icons.work),
title: 'Set Work Address',
),
BottomSheetTile(
onTap: () => _navigationService.navigateTo(SelectAddressPage.tag),
leading: Icon(Icons.location_city_rounded),
title: 'Select from saved places',
),
],
),
);
}
}
BottomSheetTile
class BottomSheetTile extends StatelessWidget {
final String title;
final Widget leading;
final VoidCallback onTap;
BottomSheetTile({
Key key,
this.title,
this.leading,
this.onTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListTile(
onTap: onTap,
leading: leading,
title: Text(
title,
style: GoogleFonts.roboto(
color: Colors.blue,
fontSize: 20,
fontWeight: FontWeight.w700,
),
),
trailing: Icon(Icons.arrow_forward_sharp),
);
}
}
A similar problem. The floor panel is a MAPBOX card. The map considers its vertical size to be larger than the screen size of the device. You can see that the center of the map, marked in red, is shifted down.
In the second picture, the same map, in the same container, but without sliding_up_panel. The center is located correctly.
hey @adbelikov, for now, i just used the panel as for the body widget and used collapsed for the header and it works fine.
but i still don't know what is the purpose of body property.
I have the same problem as mentioned by @adbelikov. As soon as I use the SlidingUpPanel widget in my scaffold (as outlined in the guide), the center of the body widget seems to be shifted downwards.
I checked with the source code and found out that the body widget (if specified) is put into a Container widget, whose height is derived from the screen height per MediaQuery. This is fine as long as there is (for example) no AppBar, whose height actually had to be taken into consideration during calculation of the container's height.
https://github.com/akshathjain/sliding_up_panel/blob/14705a7/lib/src/panel.dart#L265-269
In my case, when I remove the AppBar of my Scaffold (while Slide Panel in place), the center gets correctly aligned with the center of the screen. This is because the height available to the body equals to the full size of the screen as reported by the MediaQuery.
Same issue here, in addition to the AppBar, I have a BottomNavigationBar that makes things worse (the center is shifted down because of the AppBar AND the bottom of the map is hidden by the BottomNavigationBar)
#92 should help, right?
In the meantime, as a workaround, I have removed the body and wrapped the SlidingUpPanel in a Stack with the former body below.
Before
SlidingUpPanel(
header: MyHeader(),
panel: MyPanel(),
body: MyMap(),
),
After
Stack(
children: [
MyMap(),
SlidingUpPanel(
header: MyHeader(),
panel: MyPanel(),
),
],
),
My workaround is to keep the SlidingUpPanel and wrapping it with a MediaQuery.
So you go from this:
SlidingUpPanel(
child: MyMap(),
header: MyHeader(),
panel: MyPanel(),
...
)
To this:
LayoutBuilder(
builder: (_, constraints) {
final mediaQueryData = MediaQuery.of(context);
return MediaQuery(
data: mediaQueryData.copyWith(
size: constraints.biggest,
),
child: SlidingUpPanel(
/// Optionally you can then wrap the body with another [MediaQuery] and the
/// original [MediaQueryData] to prevent unexpected behaviour due to the now
/// incorrect [MediaQuery.size]
body: MediaQuery(
data: mediaQueryData,
child: MyMap(),
),
header: MyHeader(),
panel: MyPanel(),
...
)
)
}
)
