Make a flutter Page scrollable

Issue

Hey I am currently trying to make a page scrollable in flutter/dart.
The problem I have is that the structure is different from anything that I could find online.
It currently looks like that:

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomPadding: false,

  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[

      Container(...),

      SizedBox(height: 10.0),
      Row(...),

      Container(...),
    ],
  ),
);
}

I want to make the Row(…) and the second Container(…) scrollable now.
I couldn’t figure it out.
Hopefully you can help me with it!
Thanks in advance

Solution

Wrap your Row and Container in a Column, then wrap that Column in a SingleChildScrollView;

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomPadding: false,
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(),
        SizedBox(height: 10.0),
        SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Row(...),
              Container(...),
            ],
          ),
        )
      ],
    ),
  );
}

p.s. as of Dart 2.0 you no longer need the new keyword in front of your Scaffold.

Answered By – SupposedlySam

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *