Question 79874 in Flutter Question posted in
The official Flutter documentation can be found here.

ListView is not showing nested inside Row and Column – Flutter

I would like to know why I can not see the ListView content if I put it in Row that is inside Column?
Thank you

body: Center(
  child: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Flexible(
            child: ListView(
              children: [
                Text('Text 1'),
                Text('Text 2'),
              ],
            ),
          ),
        ],
      ),
    ],
  ),
),

I did put the ListView inside Flexible but it is not working.

Tags:

2

Answers


  1. 0

    If you run your code, you will see this error:

    Vertical viewport was given unbounded height.

    Which means that the height isn’t constrained.

    You should set shrinkWrap:

    Whether the extent of the scroll view in the scrollDirection should be
    determined by the contents being viewed.

    If the scroll view does not shrink wrap, then the scroll view will
    expand to the maximum allowed size in the scrollDirection. If the
    scroll view has unbounded constraints in the scrollDirection, then
    shrinkWrap must be true.

    to true:

    ListView(
  shrinkWrap: true,
   children: [
   Text('Text 1'),
   Text('Text 2'),
    ],
)

    import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Flexible(
                    child: ListView(
                      shrinkWrap: true,
                      children: [
                        Text('Text 1'),
                        Text('Text 2'),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    You can wrap the ListView with Expanded widget, it will take available space.

     Padding(
  padding: EdgeInsets.all(10),
  child: Column(
    children: <Widget>[
      Expanded(
        //this
        child: Row(
          children: <Widget>[
            Expanded(
              //this
              child: ListView(
                children: [
                  for (int i = 0; i < 100; i++) Text('Text $i'),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
),

    Check more about Unbounded height / width | Decoding Flutter

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search