Flutter: How to scroll a container rather than its content? - flutter

Question

Lets take a quick look at these two screenshots:
The left screenshot shows a box (decorated container) containing a CustomScrollView that handles scrolling. This one's pretty easy to accomplish and works well.
The right screenshot shows the intended behavior, where the box itself is scrolled, rather than its content. The problem is, that the box reaches out of the screens bounds, causing the overflow error message.
Do you have any ideas how this could be accomplished anyway?
Thank you.

Answer 1

You can wrap your Container in a SingleChildScrollView to get your desired result. Just put all the elements that should be inside the Container in a Column inside the Container.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Container Scroll'),
),
body: SingleChildScrollView(
child: Center(
child: Container(
margin: EdgeInsets.symmetric(vertical: 30),
width: 300,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black54,
blurRadius: 10.0,
offset: Offset(0.0, 0.75))
],
),
child: Column(
children: <Widget>[
Container(
height: 200,
width: 250,
color: Colors.red,
),
Container(
height: 200,
width: 250,
color: Colors.green,
),
Container(
height: 200,
width: 250,
color: Colors.blue,
),
Container(
height: 200,
width: 250,
color: Colors.yellow,
),
Container(
height: 200,
width: 250,
color: Colors.orange,
),
Container(
height: 200,
width: 250,
color: Colors.pink,
),
Container(
height: 200,
width: 250,
color: Colors.purple,
),
Container(
height: 200,
width: 250,
color: Colors.teal,
),
Container(
height: 200,
width: 250,
color: Colors.black,
),
Container(
height: 200,
width: 250,
color: Colors.indigo,
),
],
),
),
),
)),
);
}
}

Answer 2

If you don't want to create your own Sliver there is a package that can help you with that
dependencies:
flutter:
sdk: flutter
flutter_group_sliver: ^0.0.2
...
Then using it inside CustomScrollView slivers
import 'package:flutter_group_sliver/flutter_group_sliver.dart';
SliverGroupBuilder(
margin: EdgeInsets.all(12.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
),
],
),
child: SliverList(...) // Your SliverList with ListTiles here
)