SingleChildScrollView Widget – Flutter Guide By Flutter Agency

· 8 min read
SingleChildScrollView Widget - Flutter Widget Guide By Flutter Agency
SingleChildScrollView Widget - Flutter Widget Guide By Flutter Agency

In flutter, there are 11 different types of widgets available to achieve scrolling functionality with different tasks. To create a simple vertical ScrollView which can contain a different type of widgets with different behavior we would use SingleChildScrollView Widget.

What is SingleChildScrollView Widget?

SingleChildScrollView Widget a box that can scroll a single widget.

When space is not enough, the widget inside can scroll on the spindle. If you need to shrink the package in two directions, such as the dialog or pop-up menu, in this case, the user can use SingleChildScrollView the child ListBody.

The constructor of SingleChildScrollView Widget looks like below :

SingleChildScrollView({
Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
EdgeInsetsGeometry padding,
bool primary,
ScrollPhysics physics,
ScrollController controller,
Widget child
})

The code snippet will look like below :

SingleChildScrollView(
      child: new Column(
          children: [
          ],
        ),
    );

Let’s Understand this with the help of an example.

Consider a Column Widget having two fixed-size Container like below :

Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Container(
          color: const Color(0xffeeee00),
          height: 300.0,
          alignment: Alignment.center,
          child: const Text('Fixed Height Content'),
        ),
        Container(
          color: const Color(0xff008000),
          height: 250.0,
          alignment: Alignment.center,
          child: const Text('Fixed Height Content'),
        ),
      ],
    );

The above code will give us output like below :

SingleChildScrollview

SingleChildScrollView

When we wrap the Column Widget with SingleChildScrollView like below :

SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            color: const Color(0xffeeee00),
            height: 300.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
          Container(
            color: const Color(0xff008000),
            height: 250.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
        ],
      ),
    );

The above code will give us output like below :

SingleChildScrollView

Properties :

  • Child: The widget that scrolls.
  • Controller: An object that can be used to control the position to which this scroll view is scrolled.
  • Padding: The amount of space by which to inset the child.
  • Physics: How the scroll view should respond to user input.
  • Primary: Whether this is the primary scroll view associated with the parent.
  • Reverse: Whether the scroll view scrolls in the reading direction.
    scrollDirection: The axis along which the scroll view scrolls.

Code Snippet for scrollDirection  will look like below :

scrollDirection: Axis.horizontal,

Example 

Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            color: const Color(0xffeeee00),
            height: 300.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
          Container(
            color: const Color(0xff008000),
            height: 250.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
          Container(
            color: Colors.redAccent,
            height: 280.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
        ],
      ),

It will give us output like below :

SinglechildScrollviewRow

ScrollDirection in SingleChildScrollView

SingleChildScrollView(
       scrollDirection: Axis.horizontal,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            color: const Color(0xffeeee00),
            height: 300.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
          Container(
            color: const Color(0xff008000),
            height: 250.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
          Container(
            color: Colors.redAccent,
            height: 280.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
        ],
      ),
    );

Above code will give us output like below :

SingleChildScrollView-Row

Horizontal Scroll in SingleChildScrollView

General Queries on SingleChildScrollView

  • How to scroll the page in flutter?

To achieve scroll in a Screen wrap your widget tree inside a SingleChildScrollView like below :

body: SingleChildScrollView(
child: Stack(
    children: <Widget>[
      new Container(
        decoration: BoxDecoration(
            image: DecorationImage(...),
      new Column(children: [
        new Container(...),
        new Container(...... ),
        new Padding(
          child: SizedBox(
            child: RaisedButton(..),
        ),
....
...
 ); 

Remember, SingleChildScrollView Widget can only have one direct widget.

  • Users can also make CustomScrollView Widget like below :
CustomScrollView(
                  scrollDirection: Axis.vertical,
                  shrinkWrap: false,
                  slivers: <Widget>[
                    new SliverPadding(
                      padding: const EdgeInsets.symmetric(vertical: 0.0),
                      sliver: new SliverList(
                        delegate: new SliverChildBuilderDelegate(
                          (context, index) => new YourRowWidget(),
                          childCount: 5,
                        ),
                      ),
                    ),
                  ],
                ),
  • ListView: ListView is default provide Scroll no need to add an extra widget for scrolling. Consider a code snippet like below :
ListView(
          children: [
            Container(..),
            SizedBox(..),
            Container(...),
            Text(..)
          ],
      ),
  • How to make the Scrollable text in flutter? Users need to wrap your SingleChildScrollView in an Expanded widget and you will get what you are looking for. Consider a Code Snippet like below :

    import 'package:flutter/material.dart';
    
    class Demo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        var size = MediaQuery.of(context).size;
        final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
        final double itemWidth = size.width;
    
        return Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Padding(
                padding: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
                child: new Image.asset(
                  'assets/nature.jpg',
                  height: 200.0,
                  width: itemWidth,
                ),
              ),
              new Padding(
                padding: const EdgeInsets.all(12.0),
                child: Center(
                  child: new Text(
                    "Some Heading Text",
                    style: new TextStyle(
                      fontSize: 28.0,
                      color: Colors.black,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              ),
              new Expanded(
                flex: 1,
                child: new SingleChildScrollView(
                  scrollDirection: Axis.vertical, //.horizontal
                  child: new Text(
                    "1 Description that is too long in text format(Here Data is coming from API) jdlksaf j klkjjflkdsjfkddfdfsdfds " +
                        "2 Description that is too long in text format(Here Data is coming from API) d fsdfdsfsdfd dfdsfdsf sdfdsfsd d " +
                        "3 Description that is too long in text format(Here Data is coming from API)  adfsfdsfdfsdfdsf   dsf dfd fds fs" +
                        "4 Description that is too long in text format(Here Data is coming from API) dsaf dsafdfdfsd dfdsfsda fdas dsad" +
                        "5 Description that is too long in text format(Here Data is coming from API) dsfdsfd fdsfds fds fdsf dsfds fds " +
                        "6 Description that is too long in text format(Here Data is coming from API) asdfsdfdsf fsdf sdfsdfdsf sd dfdsf" +
                        "7 Description that is too long in text format(Here Data is coming from API) df dsfdsfdsfdsfds df dsfds fds fsd" +
                        "8 Description that is too long in text format(Here Data is coming from API)" +
                        "9 Description that is too long in text format(Here Data is coming from API)" +
                        "10 Description that is too long in text format(Here Data is coming from API)",
                    style: new TextStyle(
                      fontSize: 16.0,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }
    

Thanks for reading !!!

Keep Fluttering!!!

2 comments

Leave a Reply