Scrollable Widget – Flutter Widget Guide By Flutter Agency

Scrollable Widget – Flutter Widget Guide By Flutter Agency

What is Scrollable Widget in Flutter?

Scrollable Widget implements the interaction model for a scrollable widget, including gesture recognition, but does not have an opinion about how the viewport, which actually displays the children, is constructed.

The static Scrollable.of and Scrollable.ensureVisible functions are often used to interact with the Scrollable inside a ListView Widget or a GridView Widget.

The constructor of Scrollable will look like below :

Scrollable({
Key key, 
AxisDirection axisDirection: AxisDirection.down,
ScrollController controller, 
ScrollPhysics physics, 
@required ViewportBuilder viewportBuilder, 
ScrollIncrementCalculator incrementCalculator,
bool excludeFromSemantics: false,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
})

• You can provide a viewportBuilder to customize the child model. For example, SingleChildScrollView uses a viewport that displays a single box child whereas CustomScrollView uses a Viewport or a ShrinkWrappingViewport, both of which display a list of slivers.
• You can provide a custom ScrollController that creates a custom ScrollPosition subclass. For example, PageView uses a PageController, which creates a page-oriented scroll position subclass that keeps the same page visible when the Scrollable resizes.

How to use Scrollable Widget in Flutter?

The following code snippet tells us how to implement Scrollable in Flutter.

Consider a Center Widget that has a column as a child.

Center(
      child: new Column(
        children: [
          Container(
            width: 300.0,
            height: 200.0,
            color: Colors.blue,
          ),
          Container(
            width: 300.0,
            height: 200.0,
            color: Colors.yellow,
          ),
          Container(
            width: 300.0,
            height: 200.0,
            color: Colors.pink,
          ),
          Container(
            width: 300.0,
            height: 200.0,
            color: Colors.blue,
          ),
          Container(
            width: 300.0,
            height: 200.0,
            color: Colors.yellow,
          ),
          Container(
            width: 300.0,
            height: 200.0,
            color: Colors.pink,
          ),
          Container(
            width: 300.0,
            height: 200.0,
            color: Colors.blue,
          ),
        ],
      ),
    );

Which will gives an output like below :

Scrollable layout using SingleChildScrollView

When we wrap it with a SingleChildScrollView our code Snippet will look like below :

SingleChildScrollView(
      child: Center(
        child: new Column(
          children: [
            Container(
              width: 300.0,
              height: 200.0,
              color: Colors.blue,
            ),
            Container(
              width: 300.0,
              height: 200.0,
              color: Colors.yellow,
            ),
            Container(
              width: 300.0,
              height: 200.0,
              color: Colors.pink,
            ),
            Container(
              width: 300.0,
              height: 200.0,
              color: Colors.blue,
            ),
            Container(
              width: 300.0,
              height: 200.0,
              color: Colors.yellow,
            ),
            Container(
              width: 300.0,
              height: 200.0,
              color: Colors.pink,
            ),
            Container(
              width: 300.0,
              height: 200.0,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );

Our output will be like below :

Scrollable layout using SingleChildScrollView

Conclusion:

In this article, we have been through What is Scrollable in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!
Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.