在颤动中将按钮与底部中心对齐答案

【问题标题】：Align a button the bottom center in flutter在颤动中将按钮与底部中心对齐
【发布时间】：2019-11-26 13:38:49
【问题描述】：

我想将一个按钮对齐到屏幕的底部中心

我在脚手架中创建了一个按钮应用栏，我想包含一个圆形按钮，但我不想使用默认的 fab。我正在使用另一个圆形按钮，我尝试使用 Align 小部件将按钮与按钮中心对齐，但它保持在中心。

class _MainActivityState extends State<MainActivity> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        backgroundColor: HexColor("ECEDEF"),



        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Icon(Icons.threed_rotation)
            ],
          ),
          shape: CircularNotchedRectangle(),
          color: Colors.white,
        ),
        body: Container(
          height: MediaQuery.of(context).size.height,
          child: Align(
            alignment: Alignment.bottomCenter,
            child: CircularGradientButton(
              child: Icon(Icons.gradient),
              callback: (){},
              gradient: Gradients.rainbowBlue,
              shadowColor: Gradients.rainbowBlue.colors.last.withOpacity(0.5),
            ),
          )
        )
    );
  }
}

我希望 CircularGradientButton 位于 BottomAppBar 上方的底部中心

【问题讨论】：

你有你想要达到的具体目标的图片/草图吗？

标签： flutter dart

【解决方案1】：

通过堆栈，您可以实现这一目标。将 fit 属性设置为：StackFit.expand，然后使用 bottom:0 和 width: MediaQuery.of(context).size.width 定位。

return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Positioned(
            bottom: 0,
            width: MediaQuery.of(context).size.width,
            child: Center(
              child: MaterialButton(
                onPressed: () {},
                color: Colors.red,
              ),
            ),
          )
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[Icon(Icons.threed_rotation)],
        ),
        shape: CircularNotchedRectangle(),
        color: Colors.white,
      ),
    );

【讨论】：