How to make a container outside of parent container - flutter

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: