transform crushed the container above flutter - flutter

Question

I have a code that contains a column, and in the column there are 3 widgets, a widget container that has a height of 200 and a width of 200 in red, and the second widget contains a container with a child a transform scale that contains an image that I want to scale, and widget 3 contains the same as the first widget, every time I scale the image, what happens to the second container is always past the first container but does not occur with continaer to 3, if in css I will definitely use zindex, is there some kind of flutter zindex
this is the code
SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
Container(
height: 300,
color: Colors.red,
),
Container(
// height: 397,
child: Transform.scale(
scale: 2.0,
child: Container(
width: MediaQuery.of(context).size.width,
child: Image(
image: NetworkImage(
"https://s3-ap-southeast-1.amazonaws.com//kriyapeople/8fa208d6-1486-4028-bd23-243581b4d3a7"),
fit: BoxFit.fitWidth,
),
),
),
),
Container(
height: 300,
color: Colors.red,
),
],
)));
and the result of that code

Answer 1

Use Stack widget,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
_buildHeader(),
for (final i in List.generate(20, (i) => i))
ListTile(title: Text("Tile $i")),
],
),
);
}
_buildHeader() {
double height = 250;
return SizedBox(
height: height,
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
color: Colors.red,
height: height * 2 / 3,
),
Container(
color: Colors.grey[200],
height: height / 3,
),
],
),
Align(
alignment: Alignment.bottomCenter,
child: Image(
image: NetworkImage(
"https://s3-ap-southeast-1.amazonaws.com//kriyapeople/8fa208d6-1486-4028-bd23-243581b4d3a7"),
height: height * 2/3,
width: height * 2/3,
fit: BoxFit.cover,
),
),
],
),
);
}
}