Dart 如何在颤振中设计提升按钮堆栈和图像

我是个新手，我有一个要求，我需要在图像边缘放置一个升起的按钮，如下图所示（出于隐私考虑，我在模型上覆盖了内容）

---

我尝试过改变填充，但在iOS和Android的所有设备上都不起作用。请帮助我在iOS和Android中的所有设备上实现这一点。

您是否尝试过在Flatter中使用Stack

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange.shade200,
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: <Widget>[
          Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Image.asset('assets/images/pngs/cake.png'),
              SizedBox(
                height: 25,
              )
            ],
          ),
          RaisedButton(
            onPressed: () {},
            child: Text("sample button"),
          ),
        ],
      ),
    );
  }
}

---

非常感谢，@Doc为我工作。@user1241代码非常简单。只是基本的UI逻辑。请提及您希望我解释的行，我将编辑我的答案。@Doc我想使工具栏可折叠，并在底部添加一个滚动视图。我很难理解按钮是如何完美地锚定在中间的。还有如何使工具栏可折叠：（@user1241241这是一个黑代码。实际上第一层包含一列中的图像和间距。间距调整为按钮高度的一半。第二层堆栈包含按钮。现在，对齐标记为底部中心，所以排列从底部中心开始。编辑中提到了一种非黑代码。@Doc谢谢！！但我当其有状态小部件（整个屏幕呈红色）时，t不工作

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final sm = 100.0, lg = 200.0;
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      width: lg,
      height: lg,
      alignment: FractionalOffset.bottomCenter +
          FractionalOffset.fromOffsetAndSize(
            Offset(0, sm / 2),
            Size(sm, sm),
          ),
      child: Container(
        color: Colors.blue,
        width: sm,
        height: sm,
      ),
    );
  }
}