This Widget is used to show a child Widget even if there is not enough space to view the entirety of the child Widget
SingleChildScrollView is similar to scrollview in Android, and it can only contain one child element
|
const SingleChildScrollView({ Key key, this.scrollDirection = Axis.vertical, this.reverse = false, this.padding, bool primary, this.physics, this.controller, this.child, this.dragStartBehavior = DragStartBehavior.down, }) |
key : the unique identifier of the current element (similar to id in Android)
scrollDirection : scroll direction, default is vertical
reverse : whether to slide in the opposite direction of the reading direction.
padding : padding distance
primary : Whether to use the default Primary ScrollController in the widget tree. When the sliding direction is vertical (scrollDirection value is Axis.vertical) and the controller is not specified, the primary defaults to true
physics : This property accepts a ScrollPhysics object, which determines how the scrollable widget responds to user operations, such as the user continuing to perform an animation after lifting the finger, or how to display it when sliding to the boundary.
controller : This property accepts a ScrollController object. The main role of ScrollController is to control the scroll position and listen for scroll events
child : child element
|
class SingleChildScrollViewWidget extends StatelessWidget{ var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title:Text("SingleChildScroll Widget"),backgroundColor: Colors.pink,), body: horizontalScroll() )); } horizontalScroll() { return SingleChildScrollView( scrollDirection: Axis.horizontal, child: Center( child: Row( children: alphabets.split("").map((a)=>Padding( padding: const EdgeInsets.all(8.0), child: Text(a,style: TextStyle(fontSize: 20,color: Colors.pink),), )).toList(), ), ), ); } verticalScroll() { return SingleChildScrollView( scrollDirection: Axis.vertical, child: Center( child: Column( children: alphabets.split("").map((a)=>Padding( padding: const EdgeInsets.all(8.0), child: Text(a,style: TextStyle(fontSize: 20,color: Colors.pink),), )).toList(), ), ), ); } } |
Read Horizontal Scrollable Table in Flutter
|
Vertical Direction |
Horizontal Direction |
|
|
|
