Unable to get page scroll even adding the content inside a SingleChildScrollView or the ListView

Question

I'm new to Flutter.

What I'm trying to achieve is a page that has a transparent AppBar with a widget behind it. That's how it looks now:

The problem is that, I can't make the page scroll when the content is bigger then the viewport height, even adding a SingleChildScrollView or adding the content inside a ListView , it just don't scrolls.

This is the page:

import 'package:cinemax_app/src/blocs/movie_bloc.dart';
import 'package:cinemax_app/src/components/movie/movie_header.dart';
import 'package:cinemax_app/src/models/movie.dart';
import 'package:flutter/material.dart';
import 'package:share/share.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

class MoviePage extends StatefulWidget {
  final int movieId;

  MoviePage({ this.movieId });

  @override
  _MoviePageState createState() => _MoviePageState();
}

class _MoviePageState extends State<MoviePage> {
  @override
  void initState() {
    super.initState();

    movieBloc.fetchMovie(widget.movieId);
  }

  @override
  Widget build(BuildContext context) {

    return StreamBuilder(
      stream: movieBloc.movie,
      builder: (context, snapshot) {
        final _movie = snapshot.data as MovieModel;

        return Scaffold(
          body: SafeArea(
            child: snapshot.hasData ?
              Stack(
                children: <Widget>[
                  ListView(
                    shrinkWrap: true,
                    children: <Widget>[
                      MovieHeader(movie: _movie),
                      Container(
                        padding: EdgeInsets.only(top: 45, bottom: 15, left: 15, right: 15),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text('Sinopse:', style: Theme.of(context).textTheme.title),
                            HtmlWidget(
                              _movie.sinopsis,
                              bodyPadding: EdgeInsets.only(top: 15),
                              textStyle: TextStyle(color: Colors.grey),
                            )
                          ],
                        ),
                      )
                    ]
                  ),
                  AppBar(
                    backgroundColor: Colors.transparent,
                    elevation: 0.0,
                    actions: <Widget>[
                      PopupMenuButton(
                        icon: Icon(Icons.more_vert),
                        itemBuilder: (BuildContext context) {
                          return <PopupMenuItem>[
                            PopupMenuItem(
                              child: Text('Partilhar'),
                              value: 'share'
                            ),
                            PopupMenuItem(
                              child: Text('Comprar bilhete'),
                              value: 'share',
                              enabled: false,
                            ),
                          ];
                        },
                        onSelected: (selectedPopupValue) {
                          switch (selectedPopupValue) {
                            case 'share': {
                              final movieSlug = _movie.slug;

                              final movieAddress = 'https://cinemax.co.ao/movie/$movieSlug';

                              Share.share(movieAddress);
                            }
                          }
                        },
                      )
                    ],
                  ),
                ]
              ) :
              Center(
                child: CircularProgressIndicator(),
              )
          ),
        );
      }
    );
  }
}

The MovieHeader widget:

import 'dart:ui' as prefix0;

import 'package:cached_network_image/cached_network_image.dart';
import 'package:cinemax_app/src/models/movie.dart';
import 'package:flutter/material.dart';

import 'movie_cover.dart';

class MovieHeader extends StatelessWidget {
  const MovieHeader({Key key, @required MovieModel movie}) : _movie = movie, super(key: key);

  final MovieModel _movie;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 250,
      color: Colors.black,
      child: Column(
        children: <Widget>[
          Expanded(
            child: Stack(
              fit: StackFit.expand,
              overflow: Overflow.visible,
              children: <Widget>[
                new MovieBanner(movie: _movie),
                Positioned(
                  bottom: -15.0,
                  left: 15.0,
                  right: 15.0,
                  child: Container(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        Container(
                          width: 125.0,
                          child: MovieCover(imageUrl: _movie.coverUrl)
                        ),
                        Padding(padding: EdgeInsets.only(right: 15.0),),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Row(
                                children: <Widget>[
                                  Expanded(
                                    child: Text(
                                      _movie.name,
                                      style: TextStyle(
                                        fontSize: 16.0,
                                        fontWeight: FontWeight.bold,
                                      )
                                    ),
                                  ),
                                ],
                              ),
                              Padding(padding: EdgeInsets.only(bottom: 10.0),),
                              Text(
                                _movie.genresList,
                                style: TextStyle(
                                  fontSize: 10.0,
                                  color: Colors.white.withOpacity(0.6)
                                ),
                              ),
                              Padding(padding: EdgeInsets.only(bottom: 35.0),)
                            ],
                          ),
                        )
                      ],
                    )
                  ),
                )
              ],
            )
          ),
        ],
      ),
    );
  }
}

class MovieBanner extends StatelessWidget {
  const MovieBanner({
    Key key,
    @required MovieModel movie,
  }) : _movie = movie, super(key: key);

  final MovieModel _movie;

  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: <Widget>[
        Opacity(
          child: CachedNetworkImage(
            imageUrl: _movie.bannerUrl,
            fit: BoxFit.cover,
          ),
          opacity: 0.5,
        ),
        Positioned(
          child: ClipRect(
            child: BackdropFilter(
              child: Container(color: Colors.black.withOpacity(0)),
              filter: prefix0.ImageFilter.blur(sigmaX: 5, sigmaY: 5),
            ),
          ),
        )
      ],
    );
  }
}

Why is it happening? What I'm doing wrong?

Answer 1

An Example of Scrolling ListView using ListView Builder

 class ScrollingList extends StatelessWidget{
   List<String> snapshot= ["A","B","C","D","E","F","G"]

   @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(       //<----------- Using ListViewBuilder
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return Card(    //<--------- Using Card as per my requirement as a wrapper on List tile, you can use any other UI Element
                  child: ListTile(  // populating list tile with tap functionality
                      title: Text(
                        '${snapshot.data[index]}',
                        maxLines: 1,
                      ),
                      onTap: () {
                        print('TAPPED = ${snapshot.data[index]}') //<---- do anything on item clicked eg: open a new page or option etc. 
                      }),
                );
              },
            );
    )
    }

for any reference of single child scroll view here is a link