Как прокрутить контейнер, чтобы скрыть его внутри другого контейнера?

пожалуйста, как мне прокрутить контейнер, чтобы он выглядел так же, как на изображении ниже. я не хочу, чтобы контейнер прятался за другим контейнером. я хочу, чтобы контейнер прокручивался в другой контейнер, когда вы его прокручиваете. я уже знаю об использовании gridbox, но я хочу иметь возможность работать с одним контейнером, а не с несколькими контейнерами, которые позволяет вам использовать сетка. поэтому в основном я хочу создать один большой контейнер, в котором будет отображаться содержимое моей страницы. затем контейнер прокручивается прямо под заголовком без перемещения заголовка. Я хочу, чтобы заголовок страницы отображался там, где находится зеленая рамка с белой рамкой. Спасибо

Решение проблемы

Вы можете использовать стек для достижения этой цели. Ниже код имеет ту же идею, что и желаемый результат.

 import 'package:flutter/material.dart';

 void main() => runApp(const MyApp());

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

 static const String _title = 'Flutter Code Sample';

 @override
 Widget build(BuildContext context) {
 return const MaterialApp(
 title: _title,
 home: MyStatelessWidget(),
 );
 }
 }

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

 @override
 Widget build(BuildContext context) {
 return Stack(children: [



 Positioned(
 top: 0,
 left: 0,
 right: 0,
 child: Container(
 color: Colors.green,
 height: 150,
 width: double.infinity,
 child: Center(
 child: Container(
 height: 30,
 width: 100,
 color: Colors.green,
 ),
 ),
 ),
 ), Padding(
 padding: const EdgeInsets.all(8.0),
 child: ListView(
 children: [
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.blue,
 ),
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.blue,
 ),
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.blue,
 ),
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.blue,
 ),
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.blue,
 ),
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.blue,
 ),
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.blue,
 ),
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.blue,
 ),
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.blue,
 ),
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.blue,
 ),
 const SizedBox(height: 20),
 Container(
 height: 50,
 width: 50,
 color: Colors.red[300],
 ),
 ],
 ),
 ),
 Positioned(
 top: 0,
 left: 0,
 right: 0,
 child: Container(
 color: Colors.green,
 height: 80,
 width: double.infinity,
 child: Center(
 child: Container(
 height: 30,
 width: 100,
 color: Colors.black,
 ),
 ),
 ),
 ),
]);

}
}