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