Flutter – How to make a column screen scrollable

In Flutter, there are several ways to create a scrollable column. In this post, we’ll explore the most common methods and provide some code examples.

The ListView Solution

One way to achieve a scrollable column is by using a ListWidget. This widget can be used in conjunction with other widgets, such as Scaffold, to create a scrollable screen. However, at the time of writing, this solution suffers from a crash when scrolling.

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: ListView(
          shrinkWrap: true,
          padding: EdgeInsets.all(15.0),
          children: [
            Center(
              child: Card(
                elevation: 8.0,
                child: Container(
                  padding: EdgeInsets.all(10.0),
                  child: Column(
                    children: [
                      TextField(
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.person),
                          labelText: "Username or Email",
                        ),
                      ),
                      SizedBox(
                        height: 15.0,
                      ),
                      TextField(
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.lock),
                          labelText: "Password",
                        ),
                      ),
                      SizedBox(
                        height: 15.0,
                      ),
                      Material(
                        borderRadius: BorderRadius.circular(30.0),
                        //elevation: 5.0,
                        child: MaterialButton(
                          onPressed: () => {},
                          minWidth: 150.0,
                          height: 50.0,
                          color: Color(0xFF179CDF),
                          child: Text(
                            "LOGIN",
                            style: TextStyle(
                              fontSize: 16.0,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 25.0,
            ),
            Row(
              children: [
                Expanded(child: Text("Don't Have a Account?")),
                Text("Sign Up",
                    style: TextStyle(
                      color: Colors.blue,
                    )),
              ],
            ),
          ],
        ),
      ),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
                child: RaisedButton(
                  padding: EdgeInsets.all(15.0),
                  onPressed: () {},
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(
                        32.0,
                      ),
                      side: BorderSide(color: Color(0xFF179CDF))),
                  child: Text(
                    "SKIP SIGN UP FOR NOW",
                    style:
                    TextStyle(fontSize: 18.0, color: Color(0xFF179CDF)),
                  ),
                )),
          ],
        ),
      ),
    );
  }
}

The SingleChildScrollView Solution

Another way to achieve a scrollable column is by using a SingleChildScrollView. This widget can be used as the child of any widget that supports scrolling. One example is when creating a custom layout, and you want to wrap all your widgets in a single scroll view.

return new Container(
  child: new SingleChildScrollView(
    child: new Column(
      children: [
        _showChild1(),
        _showChild2(),
        ...
        _showChildN()
      ]
    )
  )
);

This solution doesn’t have the same crash issue as the ListView solution, and it’s a good alternative if you want to keep your code clean and avoid using multiple widgets.

Conclusion

In this post, we’ve seen how to create a scrollable column in Flutter using both ListWidget and SingleChildScrollView. While the ListView solution suffers from a crash issue, the SingleChildScrollView solution is a reliable alternative that can be used for creating custom layouts.