Flutter SingleChildScrollView

What is SingleChildScrollView?

To create a simple vertical ScrollView which can contain different types of widgets with different behavior we would use SingleChildScrollView Widget.SingleChildScrollView Widget is a box that can scroll a single widget.

Widget

In the below example code snippet we are creating a function called _createContainer() that accepts Color and text as an argument and it returns Container() widget with height: 200 pixels. We will reuse this widget many times in the Column.

	Widget _createContainer(Color color,String text) {
	return Container(
	height: 200,
	color: color,
	child: Center(
	child: Text(
	"$text",
	style: TextStyle(color: Colors.white, fontWeight: FontWeight.w700),
	),
	),
	);
	}

view raw singlescroll_childview.dart hosted with ❤ by GitHub

Without SingleChildScrollView

Now we are creating a Column widget and add some containers to it with the use of creating widget function _createContainer().

	body: Column(
	children: [
	_createContainer(
	Colors.purple,
	"Widget 1",
	),
	_createContainer(
	Colors.brown,
	"Widget 2",
	),
	_createContainer(
	Colors.orange,
	"Widget 3",
	),
	_createContainer(
	Colors.green,
	"Widget 4",
	),
	_createContainer(
	Colors.red,
	"Widget 5",
	),
	_createContainer(
	Colors.yellow,
	"Widget 6",
	),
	_createContainer(
	Colors.teal,
	"Widget 7",
	),
	],
	),

view raw singlescroll_childview.dart hosted with ❤ by GitHub

If you run this code snippet in your app, the column will look like this as shown in the image below.

With SingleChildScrollView

Now we are wrapping the Column widget with a SingleChildScrollView scrolling widget, the information on the page should scroll and not showing any error.

	body: SingleChildScrollView(
	child: Column(
	children: [
	_createContainer(
	Colors.purple,
	"Widget 1",
	),
	_createContainer(
	Colors.brown,
	"Widget 2",
	),
	_createContainer(
	Colors.orange,
	"Widget 3",
	),
	_createContainer(
	Colors.green,
	"Widget 4",
	),
	_createContainer(
	Colors.red,
	"Widget 5",
	),
	_createContainer(
	Colors.yellow,
	"Widget 6",
	),
	_createContainer(
	Colors.teal,
	"Widget 7",
	),
	],
	),
	),

view raw singlescroll_childview.dart hosted with ❤ by GitHub

If you run this code snippet in your app, the column will look like this with the scroll property as shown in the image below.