Absolute positioning on the screen, and overlay of image of to the top portion of app

Question

Absolute positioning on scaffold/screen.

1 - The white container in the 1st photo - how to align this as an absolute position on the bottom of the screen / how is it done as the best method?

2 - The container has to be overlaid on the top of the image.

Tried to give absolute positioning using stack on the screen/scaffold, didn't work.

Answer 1

Use the following code:

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: