[Solved] How to make the entire page in flutter scrollable

Question

Asked by BradG on November 30, 2021 (source).

I want to make the entire page in flutter scrollable, while the height in each element inside remains dynamic. Now the two Expanded elements have fixed height and are vertically scrollable - I want to make them extend to their regular height and be able to scroll down to the next element.

body: Scaffold(
    body: Column(
      children: <Widget>[
        Text(),
        IntrinsicHeight(   //This is fixed height and doesn't move
          child: Text(),
        ),
        new Divider(height: 0.1),
        Text(),
        Expanded(          //This is now vertically scrollable in its own box
            child: Text()
        ),
        Expanded(          //This is now vertically scrollable in its own box
            child: Text()
        ),
      ],
    ),
  ),

I tired several versions of wrapping the first column in SingleChildScrollView but for some reason it doesn't work.

Answer

Question answered by Ravindra S (source).

Try below code hope its helpful to you. Wrap your Column() inside IntrinsicHeight() widget,

Refere IntrinsicHeight here

Refere SingleChildScrollView here, this widget is used for Scrolling the Widget..

return Scaffold(
  body: SingleChildScrollView(
    child: IntrinsicHeight(
      child: Column(
        children: <Widget>[
          Text(
            'Try',
          ),
          IntrinsicHeight(
            child: Text(
              'Done',
            ),
          ),
          new Divider(height: 0.1),
          Text(
            'data',
          ),
          Expanded(
            child: Text(
              'Okk',
            ),
          ),
          Expanded(
            child: Text(
              'Yes',
            ),
          ),
        ],
      ),
    ),
  ),
);
DART FLUTTER SCROLL
SHARE: