flutter - How can a container always be visible when scrolling

Question

I have a question whether it is feasible what I am planning. When I scroll down my page, the red-framed container shouldn't disappear but instead stay in the place of the red frame. I have no idea how to do it right now. Here is the relevant part of the code.

thank you in advance for any idea. R.Eleven

Screenshot normal

Screenshot where the container should be

it should look like that

Here the Code

body: SingleChildScrollView(
          child: Container(
            // Main Container
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/bg.jpg"),
                fit: BoxFit.cover,
              ),
            ),
            child: Column(
              children: <Widget>[
                Container(
                  // Bild Container
                  height: 300,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Container(
                      decoration: BoxDecoration(
                        boxShadow: [
                          //background color of box
                          BoxShadow(
                            color: Color.fromRGBO(
                              33,
                              33,
                              33,
                              1,
                            ),
                            blurRadius: 4, // soften the shadow
                            spreadRadius: 2, //extend the shadow
                            offset: Offset(
                              0.0, // Move to right 10  horizontally
                              0.0, // Move to bottom 10 Vertically
                            ),
                          )
                        ],
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image:
                                CachedNetworkImageProvider(data['imgUrl'])),
                        color: Color.fromRGBO(255, 255, 255, 100),
                      ),
                    ),
                  ),
                ), // Bild
                Container(
                  height: 60,
                  width: MediaQuery.of(context).size.width,
                  // Titel Container
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Container(
                        decoration: BoxDecoration(
                          boxShadow: [
                            //background color of box
                            BoxShadow(
                              color: Color.fromRGBO(
                                33,
                                33,
                                33,
                                1,
                              ),
                              blurRadius: 4, // soften the shadow
                              spreadRadius: 2, //extend the shadow
                              offset: Offset(
                                0.0, // Move to right 10  horizontally
                                0.0, // Move to bottom 10 Vertically
                              ),
                            )
                          ],
                          color: Color.fromRGBO(255, 255, 255, 1),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Text(data['title'],
                              style: Theme.of(context).textTheme.headline),
                        )),
                  ),
                ), // Titel
                Container(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Expanded(
                        // Left
                        flex: 4,
                        child: Padding(
                          padding: const EdgeInsets.only(top: 10.0),
                          child: Container(
                            decoration: BoxDecoration(
                              boxShadow: [
                                //background color of box
                                BoxShadow(
                                  color: Color.fromRGBO(
                                    33,
                                    33,
                                    33,
                                    1,
                                  ),
                                  blurRadius: 4, // soften the shadow
                                  spreadRadius: 2, //extend the shadow
                                  offset: Offset(
                                    0.0, // Move to right 10  horizontally
                                    0.0, // Move to bottom 10 Vertically
                                  ),
                                )
                              ],
                              color: Color.fromRGBO(255, 255, 255, 1),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: Column(
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.start,
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  Row(
                                    children: <Widget>[
                                      Text("Portionen: ",
                                          style: Theme.of(context)
                                              .textTheme
                                              .body1),
                                      Text(data['portions'],
                                          style: Theme.of(context)
                                              .textTheme
                                              .body1),
                                    ],
                                  ),
                                  Text("Zutaten",
                                      style: Theme.of(context)
                                          .textTheme
                                          .title),
                                  Text(data['ingredients'],
                                      style: Theme.of(context)
                                          .textTheme
                                          .body1),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        // Right
                        flex: 6,
                        child: Padding(
                          padding:
                              const EdgeInsets.only(top: 10.0, left: 10),
                          child: Container(
                            decoration: BoxDecoration(
                              boxShadow: [
                                //background color of box
                                BoxShadow(
                                  color: Color.fromRGBO(
                                    33,
                                    33,
                                    33,
                                    1,
                                  ),
                                  blurRadius: 4, // soften the shadow
                                  spreadRadius: 2, //extend the shadow
                                  offset: Offset(
                                    0.0, // Move to right 10  horizontally
                                    0.0, // Move to bottom 10 Vertically
                                  ),
                                )
                              ],
                              color: Color.fromRGBO(255, 255, 255, 1),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: Column(
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.start,
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  Text("Zubereitung",
                                      style: Theme.of(context)
                                          .textTheme
                                          .body1),
                                  ItemsList(myid: widget.value),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ), 

question from:https://stackoverflow.com/questions/65651338/how-can-a-container-always-be-visible-when-scrolling

Answer 1

I think what you are looking for is Sticky Side Header, try this flutter_sticky_header sample:

import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';

import '../common.dart';

class SideHeaderExample extends StatelessWidget {
  const SideHeaderExample({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      title: 'Side Header Example',
      slivers: [
        _StickyHeaderGrid(index: 0),
        _StickyHeaderGrid(index: 1),
        _StickyHeaderGrid(index: 2),
        _StickyHeaderGrid(index: 3),
      ],
    );
  }
}

class _StickyHeaderGrid extends StatelessWidget {
  const _StickyHeaderGrid({
    Key key,
    this.index,
  }) : super(key: key);

  final int index;

  @override
  Widget build(BuildContext context) {
    return SliverStickyHeader(
      overlapsContent: true,
      header: _SideHeader(index: index),
      sliver: SliverPadding(
        padding: const EdgeInsets.only(left: 60),
        sliver: SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, crossAxisSpacing: 4.0, mainAxisSpacing: 4.0),
          delegate: SliverChildBuilderDelegate(
            (context, i) => GridTile(
              child: Card(
                child: Container(
                  color: Colors.green,
                ),
              ),
              footer: Container(
                color: Colors.white.withOpacity(0.5),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'Grid tile #$i',
                    style: const TextStyle(color: Colors.black),
                  ),
                ),
              ),
            ),
            childCount: 9,
          ),
        ),
      ),
    );
  }
}

class _SideHeader extends StatelessWidget {
  const _SideHeader({
    Key key,
    this.index,
  }) : super(key: key);

  final int index;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
      child: Align(
        alignment: Alignment.centerLeft,
        child: SizedBox(
          height: 44.0,
          width: 44.0,
          child: CircleAvatar(
            backgroundColor: Colors.orangeAccent,
            foregroundColor: Colors.white,
            child: Text('$index'),
          ),
        ),
      ),
    );
  }
}