flutter - 屏幕底部有多个FAB

Question

我希望在屏幕底部添加均匀间隔的多个FAB。

我最初是通过以下方式实现的:

      body: Center(
        child: Stack(
          children: <Widget>[
            Row(
              children: <Widget>[
                Padding(
                  padding:
                      const EdgeInsets.only(left: 12.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.undo),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.cancel),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.favorite),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.check_circle),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.share),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
              ],
            ),

但是，这确实令人讨厌，虽然在我的单个测试设备上看起来不错，但在迁移到其他设备时却无法扩展。

正确的做法是什么？

Answer 1

您已对大多数填充进行了硬编码，因此无法在许多屏幕上使用。尽量让 flutter 进行定位:)

这就是你想要的。它适用于纵向和横向的任何屏幕类型。

body: Stack(
          children: <Widget>[
            Container(
              alignment: Alignment.bottomCenter,
              padding: EdgeInsets.only(bottom: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.undo),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.cancel),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.favorite),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.check_circle),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.share),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ],
              ),
            ),
          ],
        ),