title: How to ensure button is always pinned to bottom of slide up panel - Flutter
body: <p>I have the following view.</p>
  <p><a href="https://i.stack.imgur.com/0OyyK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0OyyK.png" alt="enter image description here" /></a></p>
  <p>I would like the &quot;confirm&quot; 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?</p>
  <p>Here is my code so far:</p>
  <pre><code>
  class ChooseAppointmentView extends StatefulWidget {
    @override
    _ChooseAppointmentViewState createState() =&gt; _ChooseAppointmentViewState();
  }
  
  class _ChooseAppointmentViewState extends State&lt;ChooseAppointmentView&gt; {
    final List&lt;Appointment&gt; appointmentList = [
      Appointment(&quot;Monday&quot;, DateTime.now(), DateTime.now(), &quot;AM&quot;),
      Appointment(&quot;Tuesday&quot;, DateTime.now(), DateTime.now(), &quot;AM&quot;),
      Appointment(&quot;Wednesday&quot;, DateTime.now(), DateTime.now(), &quot;PM&quot;),
      Appointment(&quot;Thursday&quot;, DateTime.now(), DateTime.now(), &quot;AM&quot;),
      Appointment(&quot;Friday&quot;, DateTime.now(), DateTime.now(), &quot;PM&quot;),
    ];
  
    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&lt;ConfirmDetailsViewModel&gt;(
        builder: (context, model, child) =&gt; 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: &lt;Widget&gt;[
                    Center(
                      child: Column(
                        children: &lt;Widget&gt;[
                          Container(
                              height: MediaQuery.of(context).size.height * 0.02),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: &lt;Widget&gt;[
                              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(
                              &quot;Select a date in here.&quot;,
                              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: &lt;Widget&gt;[
                      Container(
                          height: MediaQuery.of(context).size.height * 0.02),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: &lt;Widget&gt;[
                          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(
                            &quot;Select a different date&quot;,
                            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) =&gt;
                        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: &lt;Widget&gt;[
                      Padding(
                        padding: const EdgeInsets.only(top: 4.0, bottom: 4.0),
                        child: Row(
                          children: &lt;Widget&gt;[
                            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: &lt;Widget&gt;[
                            Text(
                              &quot;${DateFormat('hh:mm').format(appointment.date).toString()} - ${DateFormat('hh:mm').format(appointment.date).toString()}&quot;,
                              style:
                                  TextStyle(fontSize: 20.0, color: Colors.white),
                            ),
                            Spacer(),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 8.0, bottom: 8.0),
                        child: Row(
                          children: &lt;Widget&gt;[
                            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]
  </code></pre>