Styjun

How does Ctrl+c and Ctrl+v work?

Will there be more tax deductions if I put the house completely under my name, versus doing a joint ownership?

How would you translate "grit" (personality trait) to Chinese?

How to continually let my readers know what time it is in my story, in an organic way?

What color to choose as "danger" if the main color of my app is red

Were any of the books mentioned in this scene from the movie Hackers real?

Assembly writer vs compiler

Do high-wing aircraft represent more difficult engineering challenges than low-wing aircraft?

enumitem: Understanding the usage of asterisk and exclamation mark in setting the different lengths

Why would company (decision makers) wait for someone to retire, rather than lay them off, when their role is no longer needed?

How to rename multiple files in a directory at the same time

How could it be that 80% of townspeople were farmers during the Edo period in Japan?

Was the dragon prowess intentionally downplayed in S08E04?

Why did the metro bus stop at each railway crossing, despite no warning indicating a train was coming?

Slice a list based on an index and items behind it in python

What is the effect of the Feeblemind spell on Ability Score Improvements?

c++ conditional uni-directional iterator

What is the status of the Lannisters after Season 8 Episode 5, "The Bells"?

Were any toxic metals used in the International Space Station?

Formal Definition of Dot Product

Will the volt, ampere, ohm or other electrical units change on May 20th, 2019?

Why can't I share a one use code with anyone else?

Is random forest for regression a 'true' regression?

Which creature is depicted in this Xanathar's Guide illustration of a war mage?

How to constrain widget with a listview to the size of their children?

The equivalent of wrap_content and match_parent in flutter?Flutter column auto height by parent rowFlutter : Can I add a Header Row to a ListViewHow to pass multiple widgets as children in Flutter?How to Read the size of a Widget in the Layout Phase and Use the size for another widget in the Build Phase Before drawFrame()How to use the sizes of other widgets before the widget tree is drawn ? [with Example]How to offset a scaffold widget in Flutter?Flutter : Bad state: Stream has already been listened toExpanded() widget not working in listviewFlutter Widget Composition - Nested ListviewFlutter: Is the Column widget constrained or unconstrained vertically?hello ,,,,,when I am clicking on card then show me this error how to fix this error

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I have this SectorWidget that I meant it to be something decoupled.

I will pass to it a list of views (of the same height) but I wouldn't like to specify the height hardcoded inside ListView nor outside. I would like it to occupy the same height of widgets, something like wrap_content in Android. But I tried a lot of ways (like this or this) after search and cannot achieve this. Is there a way to do that in my specific case?

import 'package:flixapp/colors.dart';
import 'package:flutter/material.dart';

class SectorWidget extends StatelessWidget 
 final SectorViewModel viewModel;

 SectorWidget(this.viewModel);

 @override
 Widget build(BuildContext context) 
 return Column(
 mainAxisAlignment: MainAxisAlignment.start,
 crossAxisAlignment: CrossAxisAlignment.start,
 children: <Widget>[
 Container(
 width: MediaQuery.of(context).size.width,
 child: Material(
 color: Colors.transparent,
 child: InkWell(
 splashColor: kSplashColor,
 onTap: () ,
 child: Align(
 alignment: Alignment.centerLeft,
 child: Padding(
 padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
 child: Text(
 viewModel.title,
 style: TextStyle(
 fontWeight: FontWeight.w600,
 color: Colors.black54,
 fontSize: 30),
 ),
 ),
 ),
 ),
 ),
 decoration: BoxDecoration(
 color: viewModel.titleBackgroundColor ?? Colors.amber),
 ),
 Container(
 color: Colors.red,
 child: ListView.builder(
 shrinkWrap: true,
 scrollDirection: Axis.horizontal,
 itemCount: viewModel.data?.length ?? 0,
 itemBuilder: (BuildContext context, int index) 
 var data = viewModel.data;
 if (data.isNotEmpty) return viewModel.data[index];
 ,
 ),
 )
 ],
 );
 


class SectorViewModel 
 String title;
 Color titleBackgroundColor;
 List<Widget> data;

 SectorViewModel(this.title, this.titleBackgroundColor, this.data);

flutter flutter-layout

share|improve this question

edited Mar 23 at 15:24

Mazin Ibrahim

1,6972817

asked Mar 23 at 15:18

alexpfxalexpfx

1,94642245

add a comment | 

0

I have this SectorWidget that I meant it to be something decoupled.

I will pass to it a list of views (of the same height) but I wouldn't like to specify the height hardcoded inside ListView nor outside. I would like it to occupy the same height of widgets, something like wrap_content in Android. But I tried a lot of ways (like this or this) after search and cannot achieve this. Is there a way to do that in my specific case?

import 'package:flixapp/colors.dart';
import 'package:flutter/material.dart';

class SectorWidget extends StatelessWidget 
 final SectorViewModel viewModel;

 SectorWidget(this.viewModel);

 @override
 Widget build(BuildContext context) 
 return Column(
 mainAxisAlignment: MainAxisAlignment.start,
 crossAxisAlignment: CrossAxisAlignment.start,
 children: <Widget>[
 Container(
 width: MediaQuery.of(context).size.width,
 child: Material(
 color: Colors.transparent,
 child: InkWell(
 splashColor: kSplashColor,
 onTap: () ,
 child: Align(
 alignment: Alignment.centerLeft,
 child: Padding(
 padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
 child: Text(
 viewModel.title,
 style: TextStyle(
 fontWeight: FontWeight.w600,
 color: Colors.black54,
 fontSize: 30),
 ),
 ),
 ),
 ),
 ),
 decoration: BoxDecoration(
 color: viewModel.titleBackgroundColor ?? Colors.amber),
 ),
 Container(
 color: Colors.red,
 child: ListView.builder(
 shrinkWrap: true,
 scrollDirection: Axis.horizontal,
 itemCount: viewModel.data?.length ?? 0,
 itemBuilder: (BuildContext context, int index) 
 var data = viewModel.data;
 if (data.isNotEmpty) return viewModel.data[index];
 ,
 ),
 )
 ],
 );
 


class SectorViewModel 
 String title;
 Color titleBackgroundColor;
 List<Widget> data;

 SectorViewModel(this.title, this.titleBackgroundColor, this.data);

flutter flutter-layout

share|improve this question

edited Mar 23 at 15:24

Mazin Ibrahim

1,6972817

asked Mar 23 at 15:18

alexpfxalexpfx

1,94642245

add a comment | 

I have this SectorWidget that I meant it to be something decoupled.

I will pass to it a list of views (of the same height) but I wouldn't like to specify the height hardcoded inside ListView nor outside. I would like it to occupy the same height of widgets, something like wrap_content in Android. But I tried a lot of ways (like this or this) after search and cannot achieve this. Is there a way to do that in my specific case?

import 'package:flixapp/colors.dart';
import 'package:flutter/material.dart';

class SectorWidget extends StatelessWidget 
 final SectorViewModel viewModel;

 SectorWidget(this.viewModel);

 @override
 Widget build(BuildContext context) 
 return Column(
 mainAxisAlignment: MainAxisAlignment.start,
 crossAxisAlignment: CrossAxisAlignment.start,
 children: <Widget>[
 Container(
 width: MediaQuery.of(context).size.width,
 child: Material(
 color: Colors.transparent,
 child: InkWell(
 splashColor: kSplashColor,
 onTap: () ,
 child: Align(
 alignment: Alignment.centerLeft,
 child: Padding(
 padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
 child: Text(
 viewModel.title,
 style: TextStyle(
 fontWeight: FontWeight.w600,
 color: Colors.black54,
 fontSize: 30),
 ),
 ),
 ),
 ),
 ),
 decoration: BoxDecoration(
 color: viewModel.titleBackgroundColor ?? Colors.amber),
 ),
 Container(
 color: Colors.red,
 child: ListView.builder(
 shrinkWrap: true,
 scrollDirection: Axis.horizontal,
 itemCount: viewModel.data?.length ?? 0,
 itemBuilder: (BuildContext context, int index) 
 var data = viewModel.data;
 if (data.isNotEmpty) return viewModel.data[index];
 ,
 ),
 )
 ],
 );
 


class SectorViewModel 
 String title;
 Color titleBackgroundColor;
 List<Widget> data;

 SectorViewModel(this.title, this.titleBackgroundColor, this.data);

flutter flutter-layout

share|improve this question

edited Mar 23 at 15:24

Mazin Ibrahim

1,6972817

asked Mar 23 at 15:18

alexpfxalexpfx

1,94642245

import 'package:flixapp/colors.dart';
import 'package:flutter/material.dart';

class SectorWidget extends StatelessWidget 
 final SectorViewModel viewModel;

 SectorWidget(this.viewModel);

 @override
 Widget build(BuildContext context) 
 return Column(
 mainAxisAlignment: MainAxisAlignment.start,
 crossAxisAlignment: CrossAxisAlignment.start,
 children: <Widget>[
 Container(
 width: MediaQuery.of(context).size.width,
 child: Material(
 color: Colors.transparent,
 child: InkWell(
 splashColor: kSplashColor,
 onTap: () ,
 child: Align(
 alignment: Alignment.centerLeft,
 child: Padding(
 padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
 child: Text(
 viewModel.title,
 style: TextStyle(
 fontWeight: FontWeight.w600,
 color: Colors.black54,
 fontSize: 30),
 ),
 ),
 ),
 ),
 ),
 decoration: BoxDecoration(
 color: viewModel.titleBackgroundColor ?? Colors.amber),
 ),
 Container(
 color: Colors.red,
 child: ListView.builder(
 shrinkWrap: true,
 scrollDirection: Axis.horizontal,
 itemCount: viewModel.data?.length ?? 0,
 itemBuilder: (BuildContext context, int index) 
 var data = viewModel.data;
 if (data.isNotEmpty) return viewModel.data[index];
 ,
 ),
 )
 ],
 );
 


class SectorViewModel 
 String title;
 Color titleBackgroundColor;
 List<Widget> data;

 SectorViewModel(this.title, this.titleBackgroundColor, this.data);

flutter flutter-layout

flutter flutter-layout

share|improve this question

edited Mar 23 at 15:24

Mazin Ibrahim

1,6972817

asked Mar 23 at 15:18

alexpfxalexpfx

1,94642245

share|improve this question

edited Mar 23 at 15:24

Mazin Ibrahim

1,6972817

asked Mar 23 at 15:18

alexpfxalexpfx

1,94642245

edited Mar 23 at 15:24

Mazin Ibrahim

1,6972817

edited Mar 23 at 15:24

Mazin Ibrahim

1,6972817

asked Mar 23 at 15:18

alexpfxalexpfx

1,94642245

asked Mar 23 at 15:18

alexpfxalexpfx

1,94642245

1 Answer
1

active

oldest

votes

0

When I understand you correctly, you want the root Column widget to match the size of it's children. For this, simply pass in mainAxisSize: MainAxisSize.min (the default is MainAxisSize.max - which I find a bit annoying as well, but anyway.)

also: There is no need for width: MediaQuery.of(context).size.width, in the child Container.. just tell the parent Column() to stretch it's children cross axis: crossAxisAlignment: CrossAxisAlignment.stretch.

share|improve this answer

answered Mar 24 at 19:07

herbertherbert

1,05011425

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It doesn't work. I have to set the height of the container that wraps listview. The column fit the same size of this container, but I need that this container have the same size of its listview shields, because i don't know the size of the childrens of this listview.
  
  – alexpfx
  Mar 24 at 20:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  okay i think I finally understood what you are asking.. but i'm still not sure how it should work.. you are lazily creating children in the ListView.. how is the ListView supposed to know the height of children that aren't even created yet?
  
  – herbert
  Mar 24 at 20:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes, maybe it couldn't be possible. but, if I set the height of the listview (via container), is there a way to make each item to fit exactly in a cell of the listview, keeping the aspect ratio?
  
  – alexpfx
  Mar 24 at 21:00
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  take a look at the AspectRatio widget docs.flutter.io/flutter/widgets/AspectRatio-class.html .. if this doesn't solve your problem, maybe provide some more details.
  
  – herbert
  Mar 24 at 21:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already tried with aspect ratio, but I could not make it work the way I want it to.
  
  – alexpfx
  Mar 24 at 21:11
  

  
  
  
  

 | 
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55315230%2fhow-to-constrain-widget-with-a-listview-to-the-size-of-their-children%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

When I understand you correctly, you want the root Column widget to match the size of it's children. For this, simply pass in mainAxisSize: MainAxisSize.min (the default is MainAxisSize.max - which I find a bit annoying as well, but anyway.)

also: There is no need for width: MediaQuery.of(context).size.width, in the child Container.. just tell the parent Column() to stretch it's children cross axis: crossAxisAlignment: CrossAxisAlignment.stretch.

share|improve this answer

answered Mar 24 at 19:07

herbertherbert

1,05011425

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It doesn't work. I have to set the height of the container that wraps listview. The column fit the same size of this container, but I need that this container have the same size of its listview shields, because i don't know the size of the childrens of this listview.
  
  – alexpfx
  Mar 24 at 20:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  okay i think I finally understood what you are asking.. but i'm still not sure how it should work.. you are lazily creating children in the ListView.. how is the ListView supposed to know the height of children that aren't even created yet?
  
  – herbert
  Mar 24 at 20:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes, maybe it couldn't be possible. but, if I set the height of the listview (via container), is there a way to make each item to fit exactly in a cell of the listview, keeping the aspect ratio?
  
  – alexpfx
  Mar 24 at 21:00
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  take a look at the AspectRatio widget docs.flutter.io/flutter/widgets/AspectRatio-class.html .. if this doesn't solve your problem, maybe provide some more details.
  
  – herbert
  Mar 24 at 21:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already tried with aspect ratio, but I could not make it work the way I want it to.
  
  – alexpfx
  Mar 24 at 21:11
  

  
  
  
  

 | 
show 1 more comment

0

When I understand you correctly, you want the root Column widget to match the size of it's children. For this, simply pass in mainAxisSize: MainAxisSize.min (the default is MainAxisSize.max - which I find a bit annoying as well, but anyway.)

also: There is no need for width: MediaQuery.of(context).size.width, in the child Container.. just tell the parent Column() to stretch it's children cross axis: crossAxisAlignment: CrossAxisAlignment.stretch.

share|improve this answer

answered Mar 24 at 19:07

herbertherbert

1,05011425

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It doesn't work. I have to set the height of the container that wraps listview. The column fit the same size of this container, but I need that this container have the same size of its listview shields, because i don't know the size of the childrens of this listview.
  
  – alexpfx
  Mar 24 at 20:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  okay i think I finally understood what you are asking.. but i'm still not sure how it should work.. you are lazily creating children in the ListView.. how is the ListView supposed to know the height of children that aren't even created yet?
  
  – herbert
  Mar 24 at 20:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes, maybe it couldn't be possible. but, if I set the height of the listview (via container), is there a way to make each item to fit exactly in a cell of the listview, keeping the aspect ratio?
  
  – alexpfx
  Mar 24 at 21:00
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  take a look at the AspectRatio widget docs.flutter.io/flutter/widgets/AspectRatio-class.html .. if this doesn't solve your problem, maybe provide some more details.
  
  – herbert
  Mar 24 at 21:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already tried with aspect ratio, but I could not make it work the way I want it to.
  
  – alexpfx
  Mar 24 at 21:11
  

  
  
  
  

 | 
show 1 more comment

When I understand you correctly, you want the root Column widget to match the size of it's children. For this, simply pass in mainAxisSize: MainAxisSize.min (the default is MainAxisSize.max - which I find a bit annoying as well, but anyway.)

also: There is no need for width: MediaQuery.of(context).size.width, in the child Container.. just tell the parent Column() to stretch it's children cross axis: crossAxisAlignment: CrossAxisAlignment.stretch.

share|improve this answer

answered Mar 24 at 19:07

herbertherbert

1,05011425

share|improve this answer

answered Mar 24 at 19:07

herbertherbert

1,05011425

answered Mar 24 at 19:07

herbertherbert

1,05011425

answered Mar 24 at 19:07

herbertherbert

1,05011425