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

Question

Как сделать низ 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"),
            ),
          ))
    ]));
  }
}

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

Answer 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: () {},
        )
      ],
    ),
  );
}