Reputation: 2420
I have a problem with a bottom sheet.
I have this overflow error Which is weird. I mean, it is normal that it overflows, that's the purpose of the widget :O
https://pub.dev/packages/expandable_bottom_bar
Obviously, no overflow when the bottom sheet is opened :
Should I ignore it as long as I am not in release mode ? I tried to fix it but didn't find any way :/
EDIT : The bottom sheet is placed inside of a stack, within a Positioned
Widget :
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: BottomExpandableAppBar(
// Provide the bar controller in build method or default controller as ancestor in a tree
controller: controller,
appBarHeight: 00.0,
expandedHeight: controller.dragLength,
horizontalMargin: 0.0,
bottomOffset: 50.0,
//expandedBackColor: Colors.white,
expandedDecoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(5.0, 5.0),
blurRadius: 15.0,
spreadRadius: 15.0,
),
]
),
// Your bottom sheet code here
expandedBody: new Bookings(controller: controller),
shape: AutomaticNotchedShape(
RoundedRectangleBorder(),
StadiumBorder(
side: BorderSide()
)
),
// Your bottom app bar code here
),
)
The booking widget is a column composed of a title (text widget), a list and a button.
EDIT 2 : the code for the whole screen :
import 'package:expandable_bottom_bar/expandable_bottom_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_icons/feather.dart';
//import 'package:travel_agent_app/models/tripList.dart';
import 'package:travel_agent_app/models/Trip.dart';
import 'package:travel_agent_app/screens/appBackground.dart';
import 'package:travel_agent_app/screens/trips/bookings.dart';
import 'package:travel_agent_app/screens/trips/tripContent.dart';
class TripDetails extends StatefulWidget {
final Trip i;
const TripDetails(this.i, {Key key}) : super(key: key);
@override
_TripDetailsState createState() => _TripDetailsState();
}
class _TripDetailsState extends State<TripDetails> with SingleTickerProviderStateMixin {
BottomBarController controller;
@override
void initState() {
super.initState();
controller = BottomBarController(vsync: this, dragLength: 450, snap: true);
}
@override
Widget build(BuildContext context) {
var cardDecoration = BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, 15.0),
blurRadius: 15.0
),
]
);
var scrollController = ScrollController();
return Scaffold(
extendBody: true,
body: Builder(
builder: (context) =>
Stack(
children: <Widget>[
AppBackground(),
Container(
width: double.infinity,
height: double.infinity,
child: Image.network(
this.widget.i.imageUrl,
fit: BoxFit.fitHeight,
),
),
RotatedBox(
quarterTurns: 3,
child: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
colors: [Colors.black.withOpacity(0.0), Colors.black.withOpacity(0.5)],
stops: [0.8, 1]
)
),
),
),
Hero(
tag: this.widget.i.origin,
flightShuttleBuilder: (BuildContext flightContext,
Animation<double> animation,
HeroFlightDirection flightDirection,
BuildContext fromHeroContext,
BuildContext toHeroContext,){
return SingleChildScrollView(
child: Container(
child: toHeroContext.widget
),
);
},
child: Material(
type: MaterialType.transparency,
child: Center(
child: SingleChildScrollView(
controller: scrollController,
child: Container(
margin: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.15),
height: MediaQuery.of(context).size.height * 0.87,
width: MediaQuery.of(context).size.width * 0.95,
decoration: cardDecoration,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: new TripContent(this.widget.i, false),
),
),
),
),
),
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: IconButton(
icon: Icon(Feather.getIconData("arrow-left")),
onPressed: (){
Navigator.pop(context);
},
color: Colors.white,
iconSize: 30.0,
),
),
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: BottomExpandableAppBar(
// Provide the bar controller in build method or default controller as ancestor in a tree
controller: controller,
appBarHeight: 00.0,
expandedHeight: controller.dragLength,
horizontalMargin: 0.0,
bottomOffset: 50.0,
//expandedBackColor: Colors.white,
expandedDecoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(5.0, 5.0),
blurRadius: 15.0,
spreadRadius: 15.0,
),
]
),
// Your bottom sheet code here
expandedBody: new Bookings(controller: controller),
shape: AutomaticNotchedShape(
RoundedRectangleBorder(),
StadiumBorder(
side: BorderSide()
)
),
// Your bottom app bar code here
),
)
],
),
),
);
}
}
Upvotes: 1
Views: 10490
Reputation: 2420
I finally fixed that problem : I realized that the overflow was coming from the a widget inside the BottomSheet : the Column
widget. In order to get ride of this overflow, I had to wrap the column within a ListView
Widget. It seems that the column cannot overflow, but the listview can.
Upvotes: 6
Reputation: 53
Your code works perfectly for me, I think the problem is caused by the properties set on Positioned widget parent. Can you provide me the entire code that builds the screen?
Upvotes: 0