how to get parent widget width in flutter? - flutter

anyone know how can i get parent widget width ? i try to solve this problem on my UI below
here my widget tree
row
expanded
flex:8
row
column
container(
width : ???? // here i want to get width size of expanded flex: 8
Wrap(
children: [
Text('item A'),
Text('item B'),
Text('item C'),
Text('item D'),
],
),)

You can use LayoutBuilder, when you wrap the widget in it it will give you parent contraints

Related

Weights to the fields in flutter

In Android studio we give the height or width zero and give it some weight. Is there any way we can do this in flutter ? if Yes then how ?
<EditText
android:id="#+id/etInputOTP1"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"/> //Like this
You can use the Expanded widget to give a child widget a specific weight when laying out a row or column.
To give a widget a weight of 2 in a row:
Row(
children: [
Expanded(
child: Text('Widget 1'),
flex: 2,
),
Expanded(
child: Text('Widget 2'),
flex: 1,
),
],
)

ExpansionTile and SingleChildScrollView not working together in Flutter?

How can I avoid the overflowing in my text when using ExpansionTile widget? When I was not using this widget my text was not overflowing and using SingleChildScrollView was enough.
ExpansionTile(
title: Text('History'),
children: [
SingleChildScrollView(
child:Text(widget.descriptionText as String),
),
]
)
A single child scroll view can take infinite height if not bound. You can try wrapping it with a sizedBox of specific height
ExpansionTile(
title: Text('History'),
children: [
SizedBox(
height: 500,
width: MediaQuery.of(context).size width*0.7,
child: SingleChildScrollView(
child:Text(widget.descriptionText as String),
),
)
]
)

Make Column begin in a fixed position on the screen

I'm trying to make a column with two children begin at a certain position on the screen. The 2nd child is a dynamic ListView where I do not want the number of children changing the position of the column.
How is this possible?
Just wrap your ListView with Expanded widget .
Example:
Column(
children: [
Expanded( //here
child: ListView.builder(
itemBuilder: (context, index) => Text('test $index'),
itemCount: 50, ),
),
Column(
children: [
Container(height: 100, color: Colors.yellow),
OutlinedButton(onPressed: (){}, child: Text('Test'),),
Text('Another Test')
]
)
],
),
I used a Listview.builder because I don't want to do it one by one. Just for the example
You can learn more about Expanded widget by watching this Official video or by visiting flutter.dev

How to use ListTile inside horizontal ListView in Flutter?

I am trying to use ListTiles as items of the horizontal ListView.
final brandsWidget = SizedBox(
height: 200,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
ListTile(
leading: Image.asset('img_1.png'),
title: Text('Product 1'),
subtitle: Text('\$5'),
),
ListTile(
leading: Image.asset('img_1.png),
title: Text('Product 2'),
subtitle: Text('\$3'),
)
],
),
);
I got the following error:
Another exception was thrown: BoxConstraints forces an infinite width.
Exception caught by rendering library.
BoxConstraints forces an infinite width.
The relevant error-causing widget was ListTile
You can uses ListTile widget by wrapping it with Container or SizedBox widget.
Error Explanation:
You are getting this error because ListTiles have infinite width. If you don't give them a proper one they will surely generate such errors.

Flutter: How to adjust the height of a container as the maximum height of its sibling in a row

I have two widgets in a row. The first widget is a black line with width 5.0, the second widget is a text widget whose size may vary according to the content. I want the first container to have the same height as of the second widget
One way is to make both widget child of an IntrinsicHeight widget and then declare the height of the first container as double.infinity. This should solve your problem. Example code is given below:
IntrinsicHeight(
child: Row(
children: <Widget>[
Container( //this is the first container
height: double.infinity
),
secondWidget(
)
],
)
Let me know if you have further query. Happy coding!
You can use Expanded widget. It divides siblings to the same height or width.
here is the code:
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
),
),
Expanded(
child: Container(
color: Colors.green,
),
)
And here is the result:
That is so easy. I wish it could help.