How to make a container outside of parent container

Question

What my try looked like:

What I want to do:

What I have tried is Stack widget. But the half of container became invisible when container moves outside.

Stack(
        children: [
          Align(
            alignment: new Alignment(0.0, 0.0),
            child: Container(
              height: 150,
              width: double.infinity,
              decoration: BoxDecoration(color: Colors.red),
            ),
          ),
          Positioned(
              top: -15,
              left: 140,
              child: Container(
                height: 50,
                width: 100,
                decoration: BoxDecoration(color: Colors.black),
              )),
        ],
      )

Any info would be welcome.

Answer: Just adding Padding to main container

Answer 1

try use Transform

 return Container(
  width: 400,
  height: 200,
  child: Stack(
    children: <Widget>[
      Align(alignment: Alignment.topCenter,
        child: Transform.translate(
          child: Container(
            width: 100,
            height: 50,
            color: Colors.green,
            child: Text('some text'),
          ),
          offset: Offset(0, -20),
        ),
      ),
    ],
  ),
  color: Colors.red,
);

Answer 2

Use Stack along with Padding on one container to make it lower.

 return Stack(
       children: [
         Align(
           alignment: Alignment.topCenter,
           child: Padding(
           padding: EdgeInsets.only(top: 10),
           child: Container(
            width: 400,
            height: 100,
            color: Colors.white
          ),
         ),
         ),
        Align(
          alignment: Alignment.topCenter,
          child: Container(
           width: 70,
           height: 30,
           color: Colors.red
        ),
        ),
       ]
     );

Full code to see the result exactly as you want using dartpad.dev/flutter paste this:

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 {
  @override
  Widget build(BuildContext context) {
    return Builder(
  builder: (context){
     return Stack(
       children: [
         Align(
           alignment: Alignment.topCenter,
           child: Padding(
           padding: EdgeInsets.only(top: 10),
           child: Container(
            width: 400,
            height: 100,
            color: Colors.white
          ),
         ),
         ),
        Align(
          alignment: Alignment.topCenter,
          child: Container(
           width: 70,
           height: 30,
           color: Colors.red
        ),
        ),
       ]
     );
  }
);
  }
}

Answer 3

You were correct in using a Stack widget. The code would look like the following:

Center(
        child: Stack(
          alignment: Alignment.topCenter,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 25,),
              child: Container(
                color: Colors.green,
                height: 200,
                width: 200
              ),
            ),
            Container(
              color: Colors.red,
              height: 50,
              width: 100
            ),
          ]
        ),
      ),

By adding top padding to the green container you are pushing it down making room for the red container to sit on top.

The result looks like this: