Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add scroll to the column in flutter

I have created a screen with multiple widgets in a single column. I got the error. And then I have updated the height for the containers in the columns then the screen is not scrolled as it has some fixed size.

Then I moved from columns to ListView but still, my widgets do not scroll.

  new ListView(
          shrinkWrap: true,
          children: <Widget>[

            // Author information
            new Container(
              height: MediaQuery
                  .of(context)
                  .size
                  .height * .075,
              width: double.infinity,
              padding: const EdgeInsets.only(
                  top: 10.00, right: 10.00),
              child: new Row(

                children: <Widget>[

                  new CircleAvatar(

                    backgroundColor: new Color(0xFF535386),
                    foregroundColor: new Color(0xFFF4F4F4),
                    backgroundImage: new NetworkImage(
                        _feed.authorImageUrl),
                    radius: 30.00,
                    child: new Text(
                        _feed.authorName.substring(0, 1)
                            .toUpperCase()),
                  ),

                  new Padding(padding: EdgeInsets.only(
                      bottom: 5.00, top: 2.00, left: 5.00),
                      child: new Column(
                        crossAxisAlignment: CrossAxisAlignment
                            .start,
                        children: <Widget>[
                          new Text(
                            _feed.authorName,
                            textAlign: TextAlign.start,
                            softWrap: true,
                            style: new TextStyle(
                              fontSize: 20.0,

                            ),
                          ),
                          new Text(_feed.dateTime,
                            textAlign: TextAlign.start,),
                        ],
                      )),

                ],

              ),
            ),

            // Title

            new Padding(padding: const EdgeInsets.only(
                top: 10.00, left: 10.00),
              child: new Text(
                _feed.title, textAlign: TextAlign.start,),
            ),

            // content

            new Container(
              child: new Text(
                _feed.content, textAlign: TextAlign.start,),
            ),
          ],
        ),
like image 520
esu Avatar asked Jul 30 '18 08:07

esu


People also ask

How do I add a scroll to container in flutter?

We can make the text scrollable in flutter using these 2 widgets: Expanded Class: A widget that expands a child of a Row, Column, or Flex so that the child fills the available space. SingleChildScrollView Class: A box in which a single widget can be scrolled.


1 Answers

Your ListView seems to be fine, but I'm guessing it's wrapped inside a fixed size Widget as Column or Row (the yellow and black error means that the content is bigger than the available space), so you should wrap the ListView inside an Expanded widget like this:

new Expanded(
    child: new ListView(
      shrinkWrap: true,
      children: <Widget>[
        //Your content
      ],
    )
)
like image 113
Julián Martínez Avatar answered Sep 22 '22 08:09

Julián Martínez