Scroll only one Widget inside Stack() in Flutter - flutter

Question

I'm new to Flutter and I'm trying to build my first app.
I want my HomePage to have a small image on the top and its content on the rest of the page. When scrolling, I want the image to behave like a Parallax effect, staying fixed and the grey ClipPath() widget scrolling over it.
I've already tried a few approaches and I'm not sure if I'm using the correct elements on this page but this was the only way I managed to position everything the way I wanted so far.
However, even using SingleChildScrollView() as this the Container/ClipPath() father, I still can't scroll the page.
Could you please help me with that? Thank you all.
// hope.page.dart:
import 'package:flutter/material.dart';
import 'package:remind_md/ui/shared/clippers/content.clipper.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 40,
actions: <Widget>[
// action button
IconButton(
icon: Icon(Icons.notifications, color: Colors.white),
onPressed: () {
},
),
// action button
IconButton(
icon: Icon(Icons.settings, color: Colors.white),
onPressed: () {
},
),
],
),
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xff82d9e8), Color(0xff27acc1)],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: OverflowBox(
alignment: Alignment(-0.75,-1.05),
maxHeight: MediaQuery.of(context).size.height * 2,
child: Image.asset(
'images/home_doctors.png',
scale: 1.05,
),
)
),
Positioned(
top: MediaQuery.of(context).size.height*0.2 ,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
child: ClipPath(
clipper: ContentClipper(),
child: Container(
padding: EdgeInsets.only(top: 40),
width: MediaQuery.of(context).size.width,
color: Color(0xfff4f4f4),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 200,
height: 100,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Stack(
children: <Widget>[
Positioned(
right: 3,
top: 0,
child: Opacity(
opacity: 0.2,
child: Image.asset('images/card_calendar.png', width: 100, height: 75)
),
),
Positioned(
top: 0,
left: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'12 dias',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 26, color: Color(0xff27acc1))
),
Text(
'até próxima',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
Text(
'consulta.',
textAlign: TextAlign.justify,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
],
),
)
]
),
),
),
),
Container(
width: 200,
height: 100,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Stack(
children: <Widget>[
Positioned(
right: 3,
top: 0,
child: Opacity(
opacity: 0.2,
child: Image.asset('images/pill_case.png', width: 100, height: 75)
),
),
Positioned(
top: 0,
left: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'31 dias',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 26, color: Color(0xff27acc1))
),
Text(
'até comprar',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
Text(
'medicamento.',
textAlign: TextAlign.justify,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
],
),
)
]
),
),
),
)
],
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Row(
children: <Widget>[
Container(
child: Image.asset('images/card_pills.png'),
height: 80,
width: 80,
decoration: BoxDecoration(
color: Color(0xfff47e71),
borderRadius: BorderRadius.all(Radius.circular(7))
),
)
],
),
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Row(
children: <Widget>[
Container(
child: Image.asset('images/card_stet_heart.png'),
height: 80,
width: 80,
decoration: BoxDecoration(
color: Color(0xff3865b9),
borderRadius: BorderRadius.all(Radius.circular(7))
),
)
],
),
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text('Histórico', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 24, color: Color(0xff27acc1), ) ),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_credit_card.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_credit_card.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_pill.png'),
Text('30 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_pill.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider()
],
),
),
)
],
)
)
),
),
),
),
]
),
);
}
}

Answer 1

Wrap the SingleChildScrollView widget with an expanded widget. It should do the work. Because for the singleChildScrollView to work, it does not some height and width to scroll. Hope it helps.