In mobile development, creating scrollable content is a common requirement. For instance, if you have a UI where a user might need to scroll through a list or see content that exceeds the screen size, you need a scrollable widget. Flutter provides various widgets for scrolling, and one of the most commonly used is the SingleChildScrollView.
What is SingleChildScrollView?
SingleChildScrollView is a simple but useful widget in Flutter that allows for scrolling through a single child widget that may exceed the available space. Unlike the ListView or GridView, which are used to handle lists or grids of items, the SingleChildScrollView is best suited for scrolling a single child widget when you want to avoid breaking your content into multiple smaller widgets.
Why Use SingleChildScrollView?
Consider a scenario where you want to display a form, a large image, or a long text content in a screen. If the content exceeds the screen’s size, the widget would overflow without a scrollable container. SingleChildScrollView solves this by making the content scrollable, preventing overflow and improving the user experience.
Basic Syntax
SingleChildScrollView(
child: Widget,
)
Properties of SingleChildScrollView
The SingleChildScrollView widget offers several properties to customize its behavior. Let’s dive deeper into each of these properties.
1. child
Type:
WidgetDescription: The child property is where you place the widget you want to scroll. This is typically a large widget or a collection of widgets that might exceed the screen space.
SingleChildScrollView( child: Column( children: <Widget>[ Text("This is a scrollable view"), // other widgets here ], ), )2.
scrollDirectionType:
AxisDescription: This property defines the direction in which the scrollable content should move. By default, the scroll direction is vertical (
Axis.vertical). You can change it to horizontal scrolling by setting this property toAxis.horizontal.
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Container(width: 200, height: 100, color: Colors.blue),
Container(width: 200, height: 100, color: Colors.red),
Container(width: 200, height: 100, color: Colors.green),
],
),
)
In this example, the containers will scroll horizontally, rather than the default vertical scroll.
3. reverse
Type:
boolDescription: The
reverseproperty is used to reverse the direction of scrolling. When set totrue, the scroll view will reverse its order and the first child will appear at the bottom of the screen (for vertical scroll) or on the right side (for horizontal scroll). By default, this property is set tofalse.SingleChildScrollView( reverse: true, child: Column( children: <Widget>[ Text("Item 1"), Text("Item 2"), Text("Item 3"), ], ), )In this case, the items will appear at the bottom and scroll upwards when the user drags.
4.
paddingType:
EdgeInsetsGeometryDescription: The
paddingproperty adds space around the scrollable content. This can be useful to provide some spacing around the edges of the child widget, preventing it from touching the edges of the screen.SingleChildScrollView( padding: EdgeInsets.all(10), child: Column( children: <Widget>[ Text("This is a scrollable view with padding"), // other widgets here ], ), )In this example, the padding is added around the scrollable content to make it look cleaner.
5.
primaryType:
boolDescription: This property determines whether the
SingleChildScrollViewshould be the primary scroll view. If set totrue, the scroll view will be connected to thePrimaryScrollController(usually for use in apps that have multiple scrollable widgets).
SingleChildScrollView(
primary: true,
child: Column(
children: <Widget>[
Text("This is the primary scroll view"),
// other widgets here
],
),
)
In most cases, you don’t need to change this value, but setting it to true can be useful when dealing with multiple scrollable views in the app.
6. controller
Type:
ScrollControllerDescription: This property allows you to control the scroll position programmatically. You can set a
ScrollControllerto control the scroll position or to listen for changes in the scroll position.
ScrollController _controller = ScrollController();
SingleChildScrollView(
controller: _controller,
child: Column(
children: <Widget>[
Text("Scroll me programmatically"),
// other widgets here
],
),
)
This allows you to control the scroll position programmatically, for example, to scroll to a specific position or animate the scroll position.
7. keyboardDismissBehavior
Type:
ScrollViewKeyboardDismissBehaviorDescription: This property controls how the keyboard should behave when scrolling. It has three options:
onDrag: The keyboard will dismiss when the user drags the scroll view.onTap: The keyboard will dismiss when the user taps anywhere on the screen.none: The keyboard will not dismiss when dragging or tapping.
SingleChildScrollView(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
child: Column(
children: <Widget>[
TextField(),
TextField(),
],
),
)
In this example, dragging the scroll view will dismiss the keyboard.
8. dragStartBehavior
Type:
DragStartBehaviorDescription: This property controls how the scrollable view should behave when a drag starts. You can choose between
start(default behavior) anddownbehavior.
SingleChildScrollView(
dragStartBehavior: DragStartBehavior.down,
child: Column(
children: <Widget>[
Text("Dragging starts from the down point"),
// other widgets here
],
),
)
Example: A Form with Scroll
Let’s put all of these properties together in a real-world example: A simple form where a user can fill in information, and the form is scrollable when the keyboard appears.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('SingleChildScrollView Example')),
body: Padding(
padding: EdgeInsets.all(16),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Enter your details', style: TextStyle(fontSize: 24)),
SizedBox(height: 20),
TextField(
decoration: InputDecoration(labelText: 'Name'),
),
TextField(
decoration: InputDecoration(labelText: 'Email'),
),
TextField(
decoration: InputDecoration(labelText: 'Phone Number'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
child: Text('Submit'),
),
],
),
),
),
),
);
}
}
Conclusion
SingleChildScrollView is a simple yet powerful widget in Flutter that allows for scrolling a single child widget when its content exceeds the available screen space. By understanding its properties such as child, scrollDirection, reverse, padding, controller, and others, you can customize the scrolling behavior and improve the user experience of your Flutter app. Whether it's for a long list of items, a form, or just a large chunk of text, SingleChildScrollView is a versatile widget to make content scrollable when necessary.
Happy Coding😊!