如何在 Flutter 中使用 Stack 正确定位 widget 来实现响应式设计？

Question

我正在为 Flutter 应用程序构建启动屏幕，但在屏幕上响应式定位文本和品牌元素时遇到问题。具体来说，我想：

1. 将我的应用程序徽标文本（“NewApp”）放置在左上角。
2. 将主要品牌（“SplashScreen”）置于屏幕中央。
3. 在主要品牌下方添加说明文字，水平居中。

我尝试使用带填充的列，但布局在不同的屏幕尺寸上不一致。我改用 Stack 和 Positioned 来更好地控制位置，但我不确定这是否是处理响应式布局的最有效方法。

这是代码：

class _SplashscreenbrandingState extends State<Splashscreenbranding> {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Column(
      children: [
        Column(
          children: [
            Padding(
              padding: EdgeInsets.only(left: width * 0.20),
              child: Transform.translate(
                offset: const Offset(0, 0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text(
                      "New",
                      style: GoogleFonts.bakbakOne(
                        textStyle: const TextStyle(
                          color: Color(0xFF273272),
                          fontSize: 8,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ),
                    Text(
                      "App",
                      style: GoogleFonts.bakbakOne(
                        textStyle: const TextStyle(
                          color: Color.fromARGB(255, 8, 6, 4),
                          fontSize: 8,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Transform.translate(
              offset: const Offset(0, -12),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "Splash",
                    style: GoogleFonts.bakbakOne(
                      textStyle: const TextStyle(
                        color: Color.fromARGB(255, 187, 9, 134),
                        fontSize: 35,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                  Text(
                    "Screen",
                    style: GoogleFonts.bakbakOne(
                      textStyle: const TextStyle(
                        color: Color.fromARGB(255, 57, 8, 172),
                        fontSize: 35,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
        Transform.translate(
          offset: const Offset(0, -15),
          child: Text(
              "Now your companies & employees are \nin one place and always under control",
              style: GoogleFonts.inter(
                textStyle: TextStyle(
                  color: const Color(0xFF000000).withOpacity(0.7),
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                ),
              )),
        )
      ],
    );
  }

我期待这个：

任何有关有效定位小部件的建议或改进将不胜感激！

Answer 1

为什么不将这些小部件转换为图像......？然后用 flutter_native_splash 插件显示它？它不会改变布局并且会保持一致。

这是链接：https://pub.dev/packages/flutter_native_splash