How can a container always be visible when scrolling - flutter

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

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'),
),
),
),
);
}
}