在 Flutter 的 Stack() 中只滚动一个 Widget

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.