UI Stack with Flutter

Question

Currently I'm studying about flutter stack widget, and I have an Idea to make an UI like this

and this is my code

import 'package:flutter/material.dart';

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


  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Column(
        children: <Widget>[
          Stack(
           children: [
             Container(
              decoration: BoxDecoration(shape: BoxShape.rectangle,color: Colors.green),
              child:null ,
            ),
            Container(
              decoration: BoxDecoration(shape: BoxShape.circle,color: Colors.white),
              child: null,
            )
           ],
          )
        ],
      ),
    );
  }
}

but apparently it didn't work, and I dont know why can you guys help me? I just need the green and white background using stack in flutter

Answer 1

Try this.

class MyScaffold extends StatelessWidget {
  const MyScaffold({
    this.appBar,
    required this.body,
    super.key,
  });

  final Widget? appBar;
  final Widget body;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            width: double.maxFinite,
            height: 150,
            color: Colors.green,
          ),
          Positioned(
            top: -20,
            right: -20,
            child: Container(
              width: 100,
              height: 100,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
              ),
            ),
          ),
          SafeArea(
            child: Column(
              children: <Widget>[
                if (appBar != null) appBar!,
                body,
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Sample usage.

class TestPage extends StatelessWidget {
  const TestPage({
    super.key,
  });

  Widget _buildAppBar() => Padding(
        padding: const EdgeInsets.all(20),
        child: Row(
          children: <Widget>[
            const Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('App Bar'),
                  Text('Hello StackOverflow'),
                ],
              ),
            ),
            IconButton(
              onPressed: () {
                //
              },
              icon: const Icon(Icons.notifications_none),
            ),
          ],
        ),
      );

  @override
  Widget build(BuildContext context) {
    return MyScaffold(
      appBar: _buildAppBar(),
      body: const Card(
        margin: EdgeInsets.all(20),
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Row(
            children: <Widget>[
              Text('Saldo'),
            ],
          ),
        ),
      ),
    );
  }
}