ListView is not showing nested inside Row and Column-CodePudding

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.

CodePudding user response：

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'),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

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

child: Column(
    children: <Widget>[
      Expanded(//this
        child: Row(
          children: <Widget>[
            Expanded(//this
              child: ListView(
                children: [
                  Text('Text 1'),
                  Text('Text 2'),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),

Check more about Unbounded height / width | Decoding Flutter