Row match parent width - layout

I'm trying to make the Row containing "Short label" wide as the Row below it.
Putting mainAxisSize: MainAxisSize.max isn't enought, since it should match parent width, based on this answer:
The equivalent of wrap_content and match_parent in flutter?
Tried using Expanded outside row, but it causes an error, same using SizedBox.expand.
Can't use constraints like width: double.infinity because the row on the left (// Left part in code) must take only the space it needs, the rest must be taken from the yellow container.
Screenshot and code below:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: [
Row(
children: [
// Left part
Row(
children: [
Column(children: [
// Error using Expanded ...
//Expanded(
//child:
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
Text('Short label:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
//),
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
Text('Long text label:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
]),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
],
),
],
),
),
),
);
}
EDIT (old, check final edit below)
IntrinsicWidth was the correct way to give the rows the same width, as #mohandes suggests.
But it does not work if i add another row below (the one containing the checkbox in the image below), wrapping the rows inside two IntrinsicWidth widgets.
The checkbox row should be wide as the upper one in order to align the checkbox on the left.
In the first row i added an orange container on the right as a placeholder for a similar block.
Screenshot and code below:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: [
Row(children: [
Column(
children: [
IntrinsicWidth(
child: Row(children: [
IntrinsicWidth(
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Short label 1:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Short label 123456:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
]),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 40,
height: 40,
color: Colors.orange,
),
)
]),
),
IntrinsicWidth(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Checkbox(value: true, onChanged: null),
Text('Checkbox'),
],
),
),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
]),
],
),
),
),
);
}
EDIT 2
IntrinsicWidth works fine, the problem with the code above in the first Edit is that i used IntrinsicWidth as wrapper for child widgets (the rows) instead of parent widget (the outer column).

Try adding the column that contains rows (long and short) in intrinsic width widget .
Intrinsic width make all children width as longest child width.

By changing the layout to Row [ Column Column Container ] we get
Code:
Widget alternateLayout() {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.blue[100],
child: Text('Short label:'),
),
Container(
color: Colors.green[100],
child: Text('Long text label:'),
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 20,
width: 20,
color: Colors.red,
),
Container(
height: 20,
width: 20,
color: Colors.red,
),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
],
);
}

Related

when using drawer widget in flutter ,taps make me navigate to another page

this error appears when taping drawer widget ,the page which appeares should appears when taping child of drawer and there is an image descripes what is happening ...............................................................
return Drawer(
child: Column(
children: [
Container(
color: Colors.yellow,
alignment: Alignment.topLeft,
padding:const EdgeInsets.all(20),
height: 120,
width: double.infinity,
child: Text(
'cook up ',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor),
),
),
const SizedBox(height:20),
BuildList('Meals', Icons.restaurant,(){
Navigator.of(context).push(MaterialPageRoute(builder: (_){return FilterScreen();}));
}),
BuildList('Filters ', Icons.settings,(){
Navigator.of(context).push(MaterialPageRoute(builder: (_){return TabsScreen();}));
}),
],
),
);
}
}

RenderBox was not laid out: RenderRepaintBoundary#5291c relayoutBoundary=up1 NEEDS-PAINT

I have a form widget which holds the Column as its child. The reason of Column widget is to have username and password fields one after another-password field in new line. In addition, I need to have username and password logos next to the respective fields, so I decided to use Row widget which will hold the Icon and TextFormField. However, flutter provides me error. Can someone please help?
Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 30),
child: TextFormField(
enabled: formFieldEditable,
validator: emptyNullValidatorForFormField,
decoration: InputDecoration(
focusedBorder: _inputFormFieldOutlineInputBorder(
borderSideWidth: ProjectSpecifics.signinScreenInputBorderWidth,
borderSideColor: ProjectSpecifics.signInPageInputBorder,
),
enabledBorder:_inputFormFieldOutlineInputBorder(
borderSideWidth: ProjectSpecifics.signinScreenInputBorderWidth,
borderSideColor: ProjectSpecifics.signInPageInputBorder,
),
/*icon: Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color(0xFF5663FE),
width: 2,
),
borderRadius: BorderRadius.circular(5),
),
child: const Icon(
Icons.email,
color: ProjectSpecifics.signInPageInputBorder,
),
),*/
labelText: "EMAIL"),
onChanged: (val) {
emailVariableReference = val;
},
),
),],
),
Wrap TextFormField with Flexible or Expanded widget.
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.radar),
Expanded(child: TextFormField()),
],
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.abc),
Flexible(child: TextFormField()),
],
),
],
),

Flutter screenshot without using RepaintBoundary

I am working on a drawing app. I can get a screenshot of a widget using RepaintBoundary but I need to update it with a button which is outside. In my case, I can clear the list of points with a FlatButton but my Container is not clearing because of RepaintBoundary I need to get a screenshot of my Container without RepaintBoundary or I should update my Container from outside they both works for me. Thanks.
return
SingleChildScrollView(//physics: NeverScrollableScrollPhysics(),
child: Column(
children: <Widget>[
RepaintBoundary(
key: _signKey,
child: new Container(
width: 100.0 * MediaQuery.of(context).devicePixelRatio ,
height: 150.0 * MediaQuery.of(context).devicePixelRatio,
color: Colors.black12,
child: GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
RenderBox object = context.findRenderObject();
Offset _localPosition =
object.globalToLocal(details.globalPosition);
points = new List.from(points)
..add(_localPosition);
});
},
onPanEnd: (DragEndDetails details) => points.add(null),
child: new CustomPaint(
painter: new DrawingPainter(points: points),
size: Size.infinite,
),
),
),
),
Row(
children: <Widget>[
FlatButton( //Button to clear container
padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
color: Colors.redAccent,
textColor: Colors.black,
onPressed: (){
setState(() {
points.clear();
});
},
child: Text('Sil'),
),
],
),
],
),
);

Put fixed widget above TabBarView

I want to build a UI where I have some fixed widgets (visible on all tabs) on top of my screen and then below them I want a TabBarView (with the tab bar at the bottom), is this possible without making your own tab widget or does the TabBarView have to take the whole screen?
Think I found the answer here:
https://camposha.info/course/flutter-widgets/lesson/flutter-nested-tabbar/
This is how I did it:
return Scaffold(
body: Stack(
children: [
Container(
alignment: Alignment.topCenter,
child: Image.asset('assets/images/logo.png',
fit: BoxFit.fitWidth, width: Get.width / 2.5)),
Align(
alignment: Alignment.bottomCenter,
child: DraggableScrollableSheet(
initialChildSize: 0.7,
minChildSize: 0.7,
builder:
(BuildContext context, ScrollController scrollController) =>
SingleChildScrollView(
controller: scrollController,
child: DefaultTabController(
initialIndex: 0,
length: 2,
child: Column(
children: [
TabBar(tabs: <Widget>[
Tab(child: Text('Text1')),
Tab(child: Text('Text2'))
]),
Container(
height: MediaQuery.of(context).size.height,
child: TabBarView(
children: <Widget>[Widget1(), Widget2()],
),
)
],
)),
),
),
),
],
));

How to align first item at the start and second item of a row at the end?

I am not able to separate two items with space so that first item appears at the start of row and second at the end of it.
Container(
margin: EdgeInsets.all(12.0),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
InkWell(
child: Text("Select your service",
style: profileValueTextStyle),
onTap: () {
print("-----" + result);
}),
Icon(Icons.close)
],
),),
I want to separate the text and close icon.
You should wrap your InkWell into a Expanded Widget:
Container(
margin: EdgeInsets.all(12.0),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Expanded( //Here's the widget you need
InkWell(
child: Text("Select your service",
style: profileValueTextStyle),
onTap: () {
print("-----" + result);
}),
),
Icon(Icons.close)
],
),),
It's gonna "push" the Icon to the end of the row.
Hope it's helps !!

Resources