作为带有溢出的背景的颤动图标

Question

我正在尝试通过此链接 UI design 重新创建天气应用程序设计。但是我坚持创建在背景中溢出的巨大图标。我尝试使用堆栈并添加一个非常大的图标小部件。但是，当大小改变时，图标的位置也会改变。所以它从中心移动。关于如何获得设计中的背景结果的任何想法？

编辑：

我尝试了下面的代码。但是，如果设备的屏幕尺寸发生变化，图标将会移动。有没有办法让每个屏幕尺寸看起来都一样？

Stack(
          children: [
            Positioned(
              left: -250,
              top: -100,
              child: Icon(
                Icons.ac_unit,
                size: 900,
                color: Colors.white.withOpacity(0.5),
              ),
            ),

这给了我下面的结果。

Answer 1

使用小部件：OverflowBox

Flutter documentation 将 OverflowBox 解释为：

对其子级施加的约束与其从父级获得的约束不同的小部件，可能允许子级溢出父级。

示例：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Overflow Box',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Stack(children: [

          OverflowBox(
            // Specify the maxWidth and maxHeight and it works
            // regardless of orientation.
            maxWidth: 800,
            maxHeight: 800,
            child: Icon(
              Icons.ac_unit,
              size: 800,
              color: Colors.black.withAlpha(80),
            ),
          ),
        ]),
      ),
    );
  }
}

运行中的代码图片：

Answer 2

使用Stack 很好。您是否使用Positioned 或Align 来包装Icon 小部件，以控制其位置？

例如，您的小部件层次结构可能类似于：Stack > Align > Icon。

在Align 小部件中，您可以指定它在堆栈中的对齐方式。值是(x, y)，范围从-1 到+1，以0 为中心。例如，您可以使用alignment: Alignment(0, -0.5) 使其水平居中，并在垂直轴上朝向顶部50%。

Answer 3

如果您将使用 Positioned 小部件，您实际上可以根据屏幕高度和宽度进行定位，然后在 FractionalTranslation 中扭曲以使其从给定大小居中，

让我们用简单的方法计算：

代码：

return Stack(
      children: [
        Positioned(
          left: MediaQuery.of(context).size.width * 0.35,
          top: MediaQuery.of(context).size.height * 0.4,
          child: FractionalTranslation(
              translation: const Offset(-0.5, -0.5),
              child: child()),
        )
      ],
    );

Answer 4

我喜欢@Tor-Martin Holen 建议的答案，但我会将 ma​​xWidth 和 size 属性调整为 MediaQuery.of(context).size.width 以适应不同的屏幕。