title: How to make a screen scrollable in Flutter?
body: <p>In my Flutter project, in one page I have some rows including card align vertically. Now, I want this screen to make scroll-able.</p>
  
  <p>I have tried replacing the column to <strong>Listview</strong> but it didn't work. I also tried to wrap it with <strong>SingleChildScrollview</strong> but didn't work. It shows like below image-</p>
  
  <p><a href="https://i.stack.imgur.com/K0C0D.png" rel="noreferrer"><img src="https://i.stack.imgur.com/K0C0D.png" alt="enter image description here"></a></p>
  
  <p>Here's the code -</p>
  
  <p><strong>HomeFragment.dart</strong></p>
  
  <pre><code>    class HomeFragment extends StatefulWidget {
  
    @override
    _HomeFragmentState createState() =&gt; new _HomeFragmentState();
  }
  
  String jwt;
  
  class _HomeFragmentState extends State&lt;HomeFragment&gt; {
  
    List&lt;LastEngagement&gt; _lastEngagements = List&lt;LastEngagement&gt;();
  
    @override
    void initState() {
      super.initState();
      _getLastEngagement;
      _getLastEngagement2();
    }
  
    void _getLastEngagement() {
  
      Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) =&gt; {
          setState(() =&gt; {
        _lastEngagements = newsArticles
      })
    });
  
    }
  
    void _getLastEngagement2() {
  
      Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) =&gt; {
          setState(() =&gt; {
        _lastEngagements = newsArticles
      })
    });
  
    }
  
    Card showCard(int index) {
      return new Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: &lt;Widget&gt;[
              CircleAvatar(
                backgroundImage: NetworkImage(
                    "https://randomuser.me/api/portraits/men/1.jpg"
                ),
              ),
  
              SizedBox(
                width: 10.0,
              ),
              Expanded(child: Text(_lastEngagements[index].title)),
            ],
          ),
        ),
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
            title: Text('News'),
          ),
          body:Column(
            children: &lt;Widget&gt;[
              Row(
                children: &lt;Widget&gt;[
                  Expanded(
                    child: Container(
                      color: Colors.blue,
                      child: SizedBox(
                        height: 100.0,
  
                        child: new ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: _lastEngagements.length,
                          itemBuilder: (BuildContext ctxt, int index) {
                            return Container(
                              width: 200.0,
                              child: showCard(index),
                            );
                          },
                        ),
                      ),
                    ),
                  ),
  
                ],
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
              ),
  
  
              Row(
  
                children: &lt;Widget&gt;[
  
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                        child: InkWell(
                          splashColor: Colors.blue.withAlpha(30),
                          onTap: () {
                            print('Card tapped.');
                          },
                          child: Container(
  
                            height: 100,
                            child: Text('A card that can be tapped'),
                          ),
                        ),
                      ),
                    ),
                  ),
  
  
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                        child: InkWell(
                          splashColor: Colors.blue.withAlpha(30),
                          onTap: () {
                            print('Card tapped.');
                          },
                          child: Container(
  
                            height: 100,
                            child: Text('A card that can be tapped'),
                          ),
                        ),
                      ),
                    ),
                  ),
  
                ],
  
              ),
  
              Row(
  
                children: &lt;Widget&gt;[
  
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                        child: InkWell(
                          splashColor: Colors.blue.withAlpha(30),
                          onTap: () {
                            print('Card tapped.');
                          },
                          child: Container(
  
                            height: 100,
                            child: Text('A card that can be tapped'),
                          ),
                        ),
                      ),
                    ),
                  ),
  
  
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                        child: InkWell(
                          splashColor: Colors.blue.withAlpha(30),
                          onTap: () {
                            print('Card tapped.');
                          },
                          child: Container(
  
                            height: 100,
                            child: Text('A card that can be tapped'),
                          ),
                        ),
                      ),
                    ),
                  ),
  
                ],
  
              ),
  
  
              Row(
  
                children: &lt;Widget&gt;[
  
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                        child: InkWell(
                          splashColor: Colors.blue.withAlpha(30),
                          onTap: () {
                            print('Card tapped.');
                          },
                          child: Container(
  
                            height: 100,
                            child: Text('A card that can be tapped'),
                          ),
                        ),
                      ),
                    ),
                  ),
  
  
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                        child: InkWell(
                          splashColor: Colors.blue.withAlpha(30),
                          onTap: () {
                            print('Card tapped.');
                          },
                          child: Container(
  
                            height: 100,
                            child: Text('A card that can be tapped'),
                          ),
                        ),
                      ),
                    ),
                  ),
  
                ],
  
              ),
  
  
              Row(
  
                children: &lt;Widget&gt;[
  
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                        child: InkWell(
                          splashColor: Colors.blue.withAlpha(30),
                          onTap: () {
                            print('Card tapped.');
                          },
                          child: Container(
  
                            height: 100,
                            child: Text('A card that can be tapped'),
                          ),
                        ),
                      ),
                    ),
                  ),
  
  
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                        child: InkWell(
                          splashColor: Colors.blue.withAlpha(30),
                          onTap: () {
                            print('Card tapped.');
                          },
                          child: Container(
  
                            height: 100,
                            child: Text('A card that can be tapped'),
                          ),
                        ),
                      ),
                    ),
                  ),
  
                ],
  
              )
  
  
            ],
          )
  
      );
    }
  
  
  }
  </code></pre>
  
  <p>Replacing the Column by Listview causes following error-</p>
  
  <p><a href="https://i.stack.imgur.com/Q97oX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q97oX.png" alt="enter image description here"></a></p>
  
  <p>So, I need a permanent solution to make my screen scroll-able, doesn't matter whatever widgets I use.</p>