如何使用Flutter Layout小部件准确定位文本？

Question

我正在尝试以扑动布局中的特定x/y坐标叠加文本。这是我要实现的目标：

当前，我的布局看起来像这样：

我希望文本位于x：39和y：82。

我尝试使用定位，但是我有难以使其正常工作。我了解 stack 也可能是解决方案。有人可以使用Flutter的布局小部件准确地放置文本吗？

代码：

class LogIn extends StatefulWidget {
  const LogIn({Key? key}) : super(key: key);

  @override
  State<LogIn> createState() => _LogInState();
}

class _LogInState extends State<LogIn> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Color(0xffF24004),
        body: Center(
          child: Container(
              width: 350,
              height: 350,
              decoration: BoxDecoration(
                  image: DecorationImage(
                image: AssetImage("lib/img/pomodoro.png"),
              ))),
        ),
      ),
    );
  }
}

Answer 1

您将要在堆栈内使用位置的小部件。

位置小部件允许您放置在X和Y

时，而堆栈可确保位置小部件不受任何其他小部件的约束。

用这样的两个小部件包装您的容器：

Stack(
  children[
    Positioned(
      left: 39,
      top: 82
      child: Container(
              width: 350,
              height: 350,
              decoration: BoxDecoration(
                image: DecorationImage(
            image: AssetImage("lib/img/pomodoro.png"),
          ))),
         )
       ]
)