How do i scroll a container to hide inside another container? - flutter

Question

please how do i scroll a container so it appears just like it does in the image below. i don't want the container to hide behind another container. i want the container to scroll into another container when you scroll it. i already know about using gridbox but I want to be able to work with one container and not multiple containers that the grid allows you to use. so basically I want to create one large container where the contents of my page will appear. then the container scrolls directly under the title without the title moving. I want the title of the page to appear where the green box with white border is. Thanks

Answer 1

You can use Stack, to achieve this goal. Below code has similar idea as your desired result
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,
),
),
),
),
]);
}
}