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

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

Probably a duplicate of https://stackoverflow.com/questions/61472508/how-to-add-a-fixed-bar-between-a-sliver-bar-and-the-scrolling-content — Alex Rintt, May 10 '22 at 00:52

score 0 · Answer 1 · answered May 10 '22 at 05:48

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,
        ),
      ),
    ),
  ),
]);

} }

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

1 Answers1