Как обеспечить, чтобы кнопка всегда была прикреплена к нижней части сдвигающейся панели - Flutter - PullRequest
0 голосов
/ 03 августа 2020

У меня такое мнение.

введите описание изображения здесь

Я бы хотел, чтобы кнопка «Подтвердить» всегда отображалась внизу сдвигающейся вверх панели, независимо от того, какое устройство используется. Если я правильно позиционирую внизу, используя заполнение или пустые контейнеры, он обрезается на меньшем размере экрана. Или, если я правильно позиционирую экран меньшего размера, у меня возникают проблемы с пустым пространством внизу. Я использую виджет безопасной зоны, который, как я думал, обеспечивает, чтобы все виджеты оставались в безопасной зоне?

Вот мой код на данный момент:


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]

Ответы [ 2 ]

1 голос
/ 03 августа 2020

Думаю, вы можете использовать виджет «Выровнять» для размещения своего виджета в стеке. Для получения дополнительной информации см. По этой ссылке по этой ссылке вы увидите примеры, включая объяснение, в видео.

0 голосов
/ 03 августа 2020

Просто проверьте пример, который я создал из вашего данного кода, внес в него некоторые изменения.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: ChooseAppointmentView());
  }
}

class Appointment {
  String day;
  DateTime date;
  DateTime datetwo;
  String ampm;
  Appointment(this.day, this.date, this.datetwo, this.ampm);
}

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 Scaffold(
      backgroundColor: Colors.blue,
      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>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    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;
                              });
                            },
                          ),
                        ),
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        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: Colors.green,
                            textColor: Colors.white,
                            padding: EdgeInsets.fromLTRB(9, 9, 9, 9),
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                      ],
                    )
                  ],
                ),
              ],
            ),
            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: [
                    Colors.red,
                    Colors.blue,
                    Colors.yellow,
                    /*   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),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

Вкратце, поскольку в вашем стеке есть виджет столбца, в который я добавил два столбцы один со всеми элементами, а другой с поднятым хлопком, а также с основным столбцом

 mainAxisAlignment: MainAxisAlignment.spaceBetween,

просто проверьте код, который вы поймете. Сообщите мне, если это сработает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...