How to put List View in children [], in Flutter

Viewed 667

I need helps. I am new on Flutter and Dart. I was trying to put List View in children [], like this so I can make a new Row after that :

class ListViewColumn extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(
     body: new Container(
      child: Column(
       children: <Widget>[
         new ListView(
           children: <Widget>[
             new ListTile(
               title: Text('Name : Kareen'),
             ),
             new ListTile(
               title: Text('Class : 12th grade'),
             ),
             new ListTile(
               title: Text('Student Number : 27'),
             )
           ],
         ),
         new Row(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: <Widget>[
             new Column(
               children: <Widget>[
                 Icon(
                   Icons.thumb_up_alt,
                   color: Colors.blue
                 ),
                 Text('Like', style: new TextStyle(fontWeight: FontWeight.bold))
               ],
             ),
             new Column(
               children: <Widget>[
                 Icon(
                   Icons.chat_outlined,
                   color: Colors.black
                 ),
                 Text('Comment', style: new TextStyle(fontWeight: FontWeight.bold))
               ],
             ),
             new Column(
               children: <Widget>[
                 Icon(
                   Icons.favorite,
                   color: Colors.pink
                 ),
                 Text('Save', style: new TextStyle(fontWeight: FontWeight.bold))
               ],
             ),
           ],
         )
       ],
     ),  ),  );  } }

I was looking for the solution in internet but the websites just kept giving me the information that List View can just be applied on body: , and child: ,. I wonder if someone can help me. Thank you in advance.

2 Answers

Have a look. you missed outshrinkWrap: true

import 'package:flutter/material.dart';

class ListViewColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        new ListView(
          shrinkWrap: true,
          children: <Widget>[
            new ListTile(
              title: Text('Name : Kareen'),
            ),
            new ListTile(
              title: Text('Class : 12th grade'),
            ),
            new ListTile(
              title: Text('Student Number : 27'),
            )
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            new Column(
              children: <Widget>[
                Icon(Icons.thumb_up_alt, color: Colors.blue),
                Text('Like', style: new TextStyle(fontWeight: FontWeight.bold))
              ],
            ),
            new Column(
              children: <Widget>[
                Icon(Icons.chat_outlined, color: Colors.black),
                Text('Comment',
                    style: new TextStyle(fontWeight: FontWeight.bold))
              ],
            ),
            new Column(
              children: <Widget>[
                Icon(Icons.favorite, color: Colors.pink),
                Text('Save', style: new TextStyle(fontWeight: FontWeight.bold))
              ],
            ),
          ],
        )
      ],
    ));
  }
}

Output:

enter image description here

Just wrap the ListView with the Expanded widget:

class ListViewColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(  /// insert this widget.
            child: new ListView(
              children: <Widget>[
                new ListTile(
                  title: Text('Name : Kareen'),
                ),
                new ListTile(
                  title: Text('Class : 12th grade'),
                ),
                new ListTile(
                  title: Text('Student Number : 27'),
                )
              ],
            ),
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Column(
                children: <Widget>[
                  Icon(Icons.thumb_up_alt, color: Colors.blue),
                  Text('Like',
                      style: new TextStyle(fontWeight: FontWeight.bold))
                ],
              ),
              new Column(
                children: <Widget>[
                  Icon(Icons.chat_outlined, color: Colors.black),
                  Text('Comment',
                      style: new TextStyle(fontWeight: FontWeight.bold))
                ],
              ),
              new Column(
                children: <Widget>[
                  Icon(Icons.favorite, color: Colors.pink),
                  Text('Save',
                      style: new TextStyle(fontWeight: FontWeight.bold))
                ],
              ),
            ],
          )
        ],
      ),
    );
  }
}
Related