How to ensure button is always pinned to bottom of slide up panel - Flutter - flutter

Question

I have the following view.
I would like the "confirm" button to always appear at the bottom of the slide up panel no matter what device is being used. If I position at the bottom correctly using padding or empty containers it is cut off on smaller screen size. Or if I position correctly on a smaller screen I am now running into issues with white space at the bottom. I am using the safe area widget which I thought ensured all widgets stay within the SafeArea?
Here is my code so far:
class ChooseAppointmentView extends StatefulWidget {
#override
_ChooseAppointmentViewState createState() => _ChooseAppointmentViewState();
}
class _ChooseAppointmentViewState extends State<ChooseAppointmentView> {
final List<Appointment> appointmentList = [
Appointment("Monday", DateTime.now(), DateTime.now(), "AM"),
Appointment("Tuesday", DateTime.now(), DateTime.now(), "AM"),
Appointment("Wednesday", DateTime.now(), DateTime.now(), "PM"),
Appointment("Thursday", DateTime.now(), DateTime.now(), "AM"),
Appointment("Friday", DateTime.now(), DateTime.now(), "PM"),
];
DateTime _dateSelected = DateTime.now();
DateTime _initialiseDate = DateTime.now();
#override
Widget build(BuildContext context) {
BorderRadiusGeometry radius = BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
);
return BaseView<ConfirmDetailsViewModel>(
builder: (context, model, child) => Scaffold(
backgroundColor: AppColours.primaryColour,
body: SafeArea(
child: WillPopScope(
onWillPop: () async {
return false;
},
child: SlidingUpPanel(
maxHeight: MediaQuery.of(context).size.height * .80,
minHeight: 75.0,
parallaxEnabled: true,
parallaxOffset: .5,
panel: Stack(
children: <Widget>[
Center(
child: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.02),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 30,
height: 5,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius:
BorderRadius.all(Radius.circular(12.0))),
),
],
),
Container(
height: MediaQuery.of(context).size.height * 0.02),
Container(
child: Text(
"Select a date in here.",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 24.0,
),
),
),
Container(
height: MediaQuery.of(context).size.height * 0.05),
Container(
height: 200,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date,
minimumDate: _initialiseDate,
maximumDate: _initialiseDate.add(Duration(days: 7)),
initialDateTime: _initialiseDate,
onDateTimeChanged: (dateSelected) {
setState(() {
_dateSelected = dateSelected;
});
},
),
),
Container(
height: MediaQuery.of(context).size.height * 0.05),
Container(
height: 50.0,
width: MediaQuery.of(context).size.width - 50,
child: RaisedButton(
onPressed: () async {
//await model.submit();
Navigator.push(
context,
SizeRoute(
page: ChooseAppointmentView(),
),
);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
child: Text('Confirm'),
color: AppColours.primaryLightColour,
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(9, 9, 9, 9),
),
),
],
),
),
],
),
collapsed: Center(
child: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.02),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 30,
height: 5,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius:
BorderRadius.all(Radius.circular(12.0))),
),
],
),
Container(
height: MediaQuery.of(context).size.height * 0.02),
Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: radius),
child: Center(
child: Text(
"Select a different date",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
fontSize: 20.0,
),
),
),
),
],
),
),
body: Container(
decoration: BoxDecoration(color: Colors.white),
child: ListView.builder(
padding: EdgeInsets.only(bottom: 100.0),
itemCount: appointmentList.length,
itemBuilder: (BuildContext context, int index) =>
buildAppointmentCards(context, index),
),
),
borderRadius: radius,
),
),
),
),
);
}
Widget buildAppointmentCards(BuildContext context, int index) {
final appointment = appointmentList[index];
return Padding(
padding: const EdgeInsets.all(10.0),
child: Material(
color: Colors.white.withOpacity(0.0),
child: InkWell(
splashColor: Colors.red,
onTap: () {
print('card tapped');
},
child: new Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
gradient: LinearGradient(
colors: [
AppColours.primaryColour,
AppColours.primaryLightColour,
AppColours.primaryLighterColour,
//add more colors for gradient
],
begin: Alignment.topLeft, //begin of the gradient color
end: Alignment.bottomRight, //end of the gradient color
stops: [0, 0.2, 0.5] //stops for individual color
//set the stops number equal to numbers of color
),
borderRadius: BorderRadius.circular(10),
),
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: Container(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 4.0, bottom: 4.0),
child: Row(
children: <Widget>[
Text(
appointment.day,
style:
TextStyle(fontSize: 30.0, color: Colors.white),
),
Spacer(),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 4.0, bottom: 80.0),
child: Row(
children: <Widget>[
Text(
"${DateFormat('hh:mm').format(appointment.date).toString()} - ${DateFormat('hh:mm').format(appointment.date).toString()}",
style:
TextStyle(fontSize: 20.0, color: Colors.white),
),
Spacer(),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, bottom: 8.0),
child: Row(
children: <Widget>[
Text(
DateFormat(
'dd/MM/yyyy',
).format(appointment.date).toString(),
style:
TextStyle(fontSize: 20.0, color: Colors.white),
),
Spacer(),
Text(
appointment.ampm,
style:
TextStyle(fontSize: 20.0, color: Colors.white),
),
],
),
)
],
),
),
),
),
),
),
);
}
}
[enter link description here][2]

Answer 1

I think you can use the Align widget for positioning your widget in Stack. For more information can see in this link in this link you will see examples including explanation in the video.