Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expanded widget inside Column not expanded, instead it's got invisible

Tags:

flutter

dart

I am trying to expand widget inside of Column widget but not able to make it expended.

When giving constant height to parent widget, the layout will be rendered as expected. But as I remove the constant height layout is not as expected as I want to make Listview with it and I should not give a constant height to the widget which will be used as listview item.

Below is my layout code.

 import 'package:flutter/material.dart';

 void main() {

 runApp(MaterialApp(
title: 'layout test',
home: Layout_test_class(),
));

 }



class Layout_test_class extends StatelessWidget {

Widget cell() {

return Container(
  color: Colors.yellow,
//      height: 200, after un commenting this will work. but i want to make it without this

  child: Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[

      Expanded(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[

            Expanded(
              child: Container(
                color: Colors.green,
                child: Text('apple z'),
              ),
            ),

            Container(
              color: Colors.red,
              child:Text('apple 2'),
            )
          ],
        ),
      ),

      Column(
        children: <Widget>[
          Container(
            color: Colors.black,
            width: 200,
            height: 200,
          ),
        ],
      ),

    ],
  ),

);

}

@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
  appBar: AppBar(
    title: Text('title'),
  ),
  body: Center(
   child: ListView(
     children: <Widget>[
       cell(),
     ],
   )
  ),
);
}

}

Below is my expected output screenshot.

enter image description here

like image 227
user3686123 Avatar asked Feb 02 '19 12:02

user3686123


People also ask

What is the difference between expanded and flexible widgets?

Flexible is a built-in widget in flutter which controls how a child of base flex widgets that are Row, Column, and Flex will fill the space available to it. The Expanded widget in flutter is shorthand of Flexible with the default fit of FlexFit.

How do you center expanded widgets in flutter?

Just wrap your ListView. builder inside a container class and give it a height, either explicitly in double or as a percentage of screen height.


1 Answers

Try to wrap your Container with IntrinsicHeight

return IntrinsicHeight(
        Container(
          color: Colors.yellow
          child: ...
        )
)
like image 131
Figen Güngör Avatar answered Sep 30 '22 19:09

Figen Güngör