Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a screen scrollable in Flutter?

Tags:

flutter

dart

In my Flutter project, in one page I have some rows including card align vertically. Now, I want this screen to make scroll-able.

I have tried replacing the column to Listview but it didn't work. I also tried to wrap it with SingleChildScrollview but didn't work. It shows like below image-

enter image description here

Here's the code -

HomeFragment.dart

    class HomeFragment extends StatefulWidget {

  @override
  _HomeFragmentState createState() => new _HomeFragmentState();
}

String jwt;

class _HomeFragmentState extends State<HomeFragment> {

  List<LastEngagement> _lastEngagements = List<LastEngagement>();

  @override
  void initState() {
    super.initState();
    _getLastEngagement;
    _getLastEngagement2();
  }

  void _getLastEngagement() {

    Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) => {
        setState(() => {
      _lastEngagements = newsArticles
    })
  });

  }

  void _getLastEngagement2() {

    Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) => {
        setState(() => {
      _lastEngagements = newsArticles
    })
  });

  }

  Card showCard(int index) {
    return new Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: <Widget>[
            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: <Widget>[
            Row(
              children: <Widget>[
                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: <Widget>[

                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: <Widget>[

                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: <Widget>[

                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: <Widget>[

                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'),
                        ),
                      ),
                    ),
                  ),
                ),

              ],

            )


          ],
        )

    );
  }


}

Replacing the Column by Listview causes following error-

enter image description here

So, I need a permanent solution to make my screen scroll-able, doesn't matter whatever widgets I use.

like image 850
S. M. Asif Avatar asked Jul 23 '19 06:07

S. M. Asif


People also ask

How do I make my page scrollable in Flutter?

Method 2: ListView(): You can make a scrolling page using ListView() widget as well. Furthermore, you can change the scroll direction to Horizontal.


2 Answers

You can use SingleChildScrollView or change the column widget to ListView

 @override
 Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('News'),
    ),
    body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
        ],
      ),
    ));
  }

Or

 @override
Widget build(BuildContext context) {
 return Scaffold(
    appBar: AppBar(
      title: Text('News'),
    ),
    body: ListView(
      children: <Widget>[],
    ));
}

like image 162
Jarvis Avatar answered Oct 04 '22 17:10

Jarvis


Well the previous answers do contain the solution .. at least that's what I think .. but they are buggy answers and that's why it's not working .. try this

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("News"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: SingleChildScrollView(),
          )
        ],
      ),
    );
  }

The expanded gives SingleChildScrollView() full height of the screen allowing it to work :) I think it should work . Good luck

like image 42
adib Avatar answered Oct 04 '22 16:10

adib