Как сделать FAB шире

Как я могу сделать нижний ПОТРЯСАЮЩИЙ как ниже изображения?

Вот мой текущий пример кода:

class _ItemDetailsState extends State<ItemDetails> {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height * 0.42;
    return Scaffold(
        body: Stack(children: <Widget>[
      CustomScrollView(
        slivers: <Widget>[
          ...
        ],
      ),
      Positioned(
          bottom: 0,
          child: FloatingActionButton(
              elevation: 4,
              onPressed: () {},
              child: Text("SAVE THE CHANGES"),
            ),
          ))
    ]));
  }
}

Я пробовал много, но не повезло :( Есть какие-то решения? Спасибо за совет :)

Вы хотите, чтобы это было так все время или иметь обычный размер, а затем в какой-то момент расшириться? Если вы хотите, чтобы так было всегда, почему бы вам не использовать обычную кнопку?

— 18.05.2019 16:58

Потому что я хочу, чтобы пуговица была не обычной, а широкой внизу. Смотрите фото. Извините за плохой английский. Кстати спасибо за ответ :D

— 18.05.2019 17:02

Что делает FAB, чего не делает обычная кнопка? Похоже, вы просто усложняете себе жизнь, используя FAB в этой ситуации.

— 18.05.2019 17:09

Просто чтобы было понятно, FAB — это, в конце концов, просто RawMaterialButton с конкретным BoxConstraints. Кстати, его ограничения также постоянны, так что изменить его невозможно.

— 18.05.2019 17:14

Хм, обычная кнопка не плавает, верно? Мне нужна плавающая кнопка внизу экрана.

— 18.05.2019 17:14

Он называется плавающим, потому что у него есть атрибут высоты, поэтому создается впечатление, что он плавающий. Вы можете скопировать атрибут высоты FAB, поэтому ваша кнопка также будет плавать.

— 18.05.2019 17:15

Ok. Можете ли вы опубликовать пример кода, пожалуйста? Я следую этому руководству proandroiddev.com/…, но не повезло :(

— 18.05.2019 17:15

dart flutter material-design flutter-sliver

18.05.2019 16:52

Приложению требуется поддержка Multidex во flutter

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Невозможно установить размер FAB. Вместо этого вы должны использовать RawMaterialButton, скопировать атрибуты FAB по умолчанию и изменить размер:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        CustomScrollView(
          slivers: <Widget>[
            ...
          ],
        ),
        RawMaterialButton(
          elevation: 6,
          highlightElevation: 12.0,
          constraints: BoxConstraints(
            minHeight: 48.0,
            minWidth: double.infinity,
            maxHeight: 48.0,
          ),
          fillColor: Theme.of(context).accentColor,
          textStyle: Theme.of(context).accentTextTheme.button.copyWith(
            color: Theme.of(context).accentIconTheme.color,
            letterSpacing: 1.2,
          ),
          child: Text("SAVE THE CHANGE"),
          onPressed: () {},
        )
      ],
    ),
  );
}

Спасибо за помощь. Но он расположен в верхней части экрана. Как сделать снизу?

— 18.05.2019 17:37

Я думаю, вы не скопировали весь мой код. Взгляните на мой Stack. Свойство alignment: Alignment.bottomCenter заставляет кнопку двигаться вниз. Пожалуйста, добавьте его и в свой код.

— 18.05.2019 18:22

18.05.2019 17:31