How to make scrollable lists in flutter

Question

When I try to generate more texts than my page can display I get this error enter image description here

Is there a way to make the content be scrollable instead? I followed some general instructions and all work fine as long as I write text manually by using Text(), sadly this doesn't fit what I'm looking for, since I need data to be generated automatically.

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    void main() => runApp(MaterialApp(
          debugShowCheckedModeBanner: false,
          home: QuoteList(),
        ));
    class QuoteList extends StatefulWidget {
      @override
      _QuoteListState createState() => _QuoteListState();
    }
    class _QuoteListState extends State<QuoteList> {
      List<Quote> quotes = [
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
      ];
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Colors.grey[300],
            body: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Colors.black,
                        Colors.black,
                      ]),
                ),
                child: Padding(
                  padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
                  child: Column(
                    children: <Widget>[
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: quotes
                            .map((quote) => QuoteCard(
                                quote: quote,
                                delete: () {
                                  setState(() {
                                    quotes.remove(quote);
                                  });
                                }))
                            .toList(),
                      )
                    ],
                  ),
                )));
      }
    }
    class QuoteCard extends StatelessWidget {
      final Quote quote;
      final Function delete;
      QuoteCard({this.quote, this.delete});
      @override
      Widget build(BuildContext context) {
        return Padding(
            padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
            child: Container(
              child: Card(
                color: Colors.grey[800],
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Container(
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              SizedBox(
                                width: 20.0,
                              ),
                              Text(
                                '${quote.text}',
                                style: TextStyle(
                                  fontSize: 18.0,
                                  color: Colors.white,
                                  letterSpacing: 3.0,
                                ),
                              ),
                            ]),
                      ),
                      ListTile(
                        title: Row(
                          children: <Widget>[
                            Expanded(
                                child: RaisedButton(
                              child: Text("delete"),
                              onPressed: delete,
                              color: Colors.grey[900],
                              textColor: Colors.white,
                              padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                            )),
                            SizedBox(
                              width: 20.0,
                            ),
                          ],
                        ),
                      )
                    ]),
              ),
            ));
      }
    }
    class Quote {
      String text;
      String author;
      Quote({String this.text, String this.author});
    }

Does this answer your question? [How to scroll page in flutter](https://stackoverflow.com/questions/51765092/how-to-scroll-page-in-flutter) — Antonin GAVREL, Feb 15 '21 at 05:26

score 2 · Accepted Answer · answered Feb 15 '21 at 04:47

Please, run below code. i have solve this issue from your existing code,

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
  home: QuoteList(),
));
class QuoteList extends StatefulWidget {
  @override
  _QuoteListState createState() => _QuoteListState();
}
class _QuoteListState extends State<QuoteList> {
  List<Quote> quotes = [
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[300],
        body: Container(
            width: double.infinity,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Colors.black,
                    Colors.black,
                  ]),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: quotes
                      .map((quote) => QuoteCard(
                      quote: quote,
                      delete: () {
                        setState(() {
                          quotes.remove(quote);
                        });
                      }))
                      .toList(),
                ),
              ),
            )));
  }
}
class QuoteCard extends StatelessWidget {
  final Quote quote;
  final Function delete;
  QuoteCard({this.quote, this.delete});
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
        child: SingleChildScrollView(
          child: Container(
            child: Card(
              color: Colors.grey[800],
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            SizedBox(
                              width: 20.0,
                            ),
                            Text(
                              '${quote.text}',
                              style: TextStyle(
                                fontSize: 18.0,
                                color: Colors.white,
                                letterSpacing: 3.0,
                              ),
                            ),
                          ]),
                    ),
                    ListTile(
                      title: Row(
                        children: <Widget>[
                          Expanded(
                              child: RaisedButton(
                                child: Text("delete"),
                                onPressed: delete,
                                color: Colors.grey[900],
                                textColor: Colors.white,
                                padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                              )),
                          SizedBox(
                            width: 20.0,
                          ),
                        ],
                      ),
                    )
                  ]),
            ),
          ),
        ));
  }
}
class Quote {
  String text;
  String author;
  Quote({String this.text, String this.author});
}

score 1 · Answer 2 · answered Feb 15 '21 at 04:43

1

You can use Listview.builder for making list scrollable

answered Feb 15 '21 at 04:43

Janvi Patel

242
1
12

score 0 · Answer 3 · answered Feb 15 '21 at 04:56

Use SingleChildScrollView widget.

For more details about SingleChildScrollView widget use below link: https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

Working code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: QuoteList(),
    ));
class QuoteList extends StatefulWidget {
  @override
  _QuoteListState createState() => _QuoteListState();
}
class _QuoteListState extends State<QuoteList> {
  List<Quote> quotes = [
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
  ];
  @override
Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[300],
        body: SingleChildScrollView(
        child: Container(
            width: double.infinity,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                    Colors.black,
                    Colors.black,
                    ]),
            ),
            child: Padding(
                padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
                child: Column(
                children: <Widget>[
                    Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: quotes
                        .map((quote) => QuoteCard(
                            quote: quote,
                            delete: () {
                                setState(() {
                                quotes.remove(quote);
                                });
                            }))
                        .toList(),
                    )
                ],
                ),
            )),
        ));
}
}
class QuoteCard extends StatelessWidget {
  final Quote quote;
  final Function delete;
  QuoteCard({this.quote, this.delete});
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
        child: Container(
          child: Card(
            color: Colors.grey[800],
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          SizedBox(
                            width: 20.0,
                          ),
                          Text(
                            '${quote.text}',
                            style: TextStyle(
                              fontSize: 18.0,
                              color: Colors.white,
                              letterSpacing: 3.0,
                            ),
                          ),
                        ]),
                  ),
                  ListTile(
                    title: Row(
                      children: <Widget>[
                        Expanded(
                            child: RaisedButton(
                          child: Text("delete"),
                          onPressed: delete,
                          color: Colors.grey[900],
                          textColor: Colors.white,
                          padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                        )),
                        SizedBox(
                          width: 20.0,
                        ),
                      ],
                    ),
                  )
                ]),
          ),
        ));
  }
}
class Quote {
  String text;
  String author;
  Quote({String this.text, String this.author});
}

score 0 · Answer 4 · answered Feb 15 '21 at 05:16

0

Wrap your cointner in SingleChildScrollview. It will make your list scrollable .Like

child: SingleChildScrollView(
          child: Container()
  )

answered Feb 15 '21 at 05:16

Rahul Kushwaha

5,473
3
26
30

How to make scrollable lists in flutter

4 Answers4