屏幕絕對定位，圖片疊加到app頂部

Question

腳手架/屏幕上的絕對定位。

1 - 第一張照片中的白色容器 - 如何將其對齊為屏幕底部的絕對 position /如何作為最佳方法完成？

2 - 容器必須覆蓋在圖像的頂部。

嘗試使用屏幕/腳手架上的堆棧提供絕對定位，但沒有用。

Answer 1

使用以下代碼：

class SampleWidget extends StatefulWidget {
  const SampleWidget({super.key});

  @override
  State<SampleWidget> createState() => _SampleWidgetState();
}

class _SampleWidgetState extends State<SampleWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                    'https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/mountains-valleys-and-clouds-vertical-panorama-rick-deacon.jpg'))),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            const SizedBox(
              height: 400,
            ),
            Expanded(
              child: Container(
                width: double.infinity,
                padding: const EdgeInsets.symmetric(horizontal: 20.0),
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20.0),
                    topRight: Radius.circular(20.0),
                  ),
                ),
                child: const Center(
                    child: Text(
                  "The new adventure begin here",
                  style: TextStyle(fontSize: 22),
                )),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output：