Flutter : Errors when adding TextFields
1,861
The idea is this:
You have a Row, which sets your width to infinite. Inside that, you have a column, which sets your height to infinite.
Then you have a container, but you haven't defined its width or height, so it inherits them from its parents (infinite).
The Text widget doesn't care (I think) because internally, it sizes itself. But the TextField does.
You need to restrict its width (or the width of its parent container).
Edit:
The easy way is to set the width property for the Container that encloses your TextField. I've provided an example below.
You should also look at the Row property mainAxisAlignment for centering your field in the Row:
return Row(
mainAxisAlignment: MainAxisAlignment.center, // Center the child elements of the Row, along the Horizontal Axis
children: <Widget>[
Column(
children: <Widget>[
//Login Label
Container(
width: 200, // Set the width of the Container containing the Label so that it left aligns with your TextField below it
...
//Login Textfield
Container(
width: 200, // Set the width of the TextField container to restrict it from being infinite
Comments
-
PeakGen over 1 year
Please check my below code.
import 'package:flutter/material.dart'; class LoginPage extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( body: Container( color: Colors.black, child: Column( children: <Widget>[_buildTitle(), _buildInputFields()], ), ), ); } Widget _buildTitle() { return Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( margin: EdgeInsets.only(top: 100), child: Column( children: <Widget>[ Text( "something.xyz", style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, ), // textAlign: TextAlign.center, ), ], ), ) ], ); } Widget _buildInputFields() { return Row( children: <Widget>[ Column( children: <Widget>[ //Login Label Container( margin: EdgeInsets.only( top: 30, left: 20, right: 20, ), child: Text( "Login with Email", style: TextStyle( color: Colors.white, ), ), ), //Login Textfield Container( margin: EdgeInsets.only( top: 5, left: 20, right: 20, ), child: TextField( decoration: InputDecoration( border: InputBorder.none, )), )], ) ], ); } }I am trying to achieve the below, but still at the stage of implementing the
TextField.
As you can see my
TextFieldsare square type boxes in white color.When I run the code I get the below error.
I/flutter ( 4577): The following assertion was thrown during performLayout(): I/flutter ( 4577): BoxConstraints forces an infinite width. I/flutter ( 4577): These invalid constraints were provided to RenderRepaintBoundary's layout() function by the I/flutter ( 4577): following function, which probably computed the invalid constraints in question: I/flutter ( 4577): _RenderDecoration._layout.layoutLineBox (package:flutter/src/material/input_decorator.dart:819:11) I/flutter ( 4577): The offending constraints were: I/flutter ( 4577): BoxConstraints(w=Infinity, 0.0<=h<=Infinity) I/flutter ( 4577): When the exception was thrown, this was the stack: I/flutter ( 4577): #0 BoxConstraints.debugAssertIsValid.<anonymous closure>.throwError I/flutter ( 4577): #1 BoxConstraints.debugAssertIsValid.<anonymous closure> I/flutter ( 4577): #2 BoxConstraints.debugAssertIsValid I/flutter ( 4577): #3 RenderObject.layout I/flutter ( 4577): #4 _RenderDecoration._layout.layoutLineBox I/flutter ( 4577): #5 _RenderDecoration._layout I/flutter ( 4577): #6 _RenderDecoration.performLayout I/flutter ( 4577): #7 RenderObject.layout I/flutter ( 4577): #8 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #9 RenderObject.layout I/flutter ( 4577): #10 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #11 RenderObject.layout I/flutter ( 4577): #12 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #13 RenderObject.layout I/flutter ( 4577): #14 RenderPadding.performLayout I/flutter ( 4577): #15 RenderObject.layout I/flutter ( 4577): #16 RenderFlex.performLayout I/flutter ( 4577): #17 RenderObject.layout I/flutter ( 4577): #18 RenderFlex.performLayout I/flutter ( 4577): #19 RenderObject.layout I/flutter ( 4577): #20 RenderFlex.performLayout I/flutter ( 4577): #21 RenderObject.layout I/flutter ( 4577): #22 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #23 RenderObject.layout I/flutter ( 4577): #24 MultiChildLayoutDelegate.layoutChild I/flutter ( 4577): #25 _ScaffoldLayout.performLayout I/flutter ( 4577): #26 MultiChildLayoutDelegate._callPerformLayout I/flutter ( 4577): #27 RenderCustomMultiChildLayoutBox.performLayout I/flutter ( 4577): #28 RenderObject.layout I/flutter ( 4577): #29 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #30 RenderObject.layout I/flutter ( 4577): #31 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #32 _RenderCustomClip.performLayout I/flutter ( 4577): #33 RenderObject.layout I/flutter ( 4577): #34 MultiChildLayoutDelegate.layoutChild I/flutter ( 4577): #35 _ScaffoldLayout.performLayout I/flutter ( 4577): #36 MultiChildLayoutDelegate._callPerformLayout I/flutter ( 4577): #37 RenderCustomMultiChildLayoutBox.performLayout I/flutter ( 4577): #38 RenderObject.layout I/flutter ( 4577): #39 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #40 RenderObject.layout I/flutter ( 4577): #41 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #42 _RenderCustomClip.performLayout I/flutter ( 4577): #43 RenderObject.layout I/flutter ( 4577): #44 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #45 RenderObject.layout I/flutter ( 4577): #46 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #47 RenderObject.layout I/flutter ( 4577): #48 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #49 RenderObject.layout I/flutter ( 4577): #50 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #51 RenderObject.layout I/flutter ( 4577): #52 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #53 RenderObject.layout I/flutter ( 4577): #54 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #55 RenderObject.layout I/flutter ( 4577): #56 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #57 RenderObject.layout I/flutter ( 4577): #58 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #59 RenderOffstage.performLayout I/flutter ( 4577): #60 RenderObject.layout I/flutter ( 4577): #61 RenderStack.performLayout I/flutter ( 4577): #62 RenderObject.layout I/flutter ( 4577): #63 __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #64 RenderObject.layout I/flutter ( 4577): #65 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #66 RenderObject.layout I/flutter ( 4577): #67 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #68 RenderObject.layout I/flutter ( 4577): #69 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #70 RenderObject.layout I/flutter ( 4577): #71 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #72 RenderObject.layout I/flutter ( 4577): #73 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout I/flutter ( 4577): #74 RenderObject.layout I/flutter ( 4577): #75 RenderView.performLayout I/flutter ( 4577): #76 RenderObject._layoutWithoutResize I/flutter ( 4577): #77 PipelineOwner.flushLayout I/flutter ( 4577): #78 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame I/flutter ( 4577): #79 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame I/flutter ( 4577): #80 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback I/flutter ( 4577): #81 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback I/flutter ( 4577): #82 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame I/flutter ( 4577): #83 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> I/flutter ( 4577): #92 _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19) I/flutter ( 4577): #93 _Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5) I/flutter ( 4577): #94 _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12) I/flutter ( 4577): (elided 8 frames from package dart:async) I/flutter ( 4577): The following RenderObject was being processed when the exception was fired: I/flutter ( 4577): _RenderDecoration#1bed1 relayoutBoundary=up12 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 4577): creator: _Decorator ← InputDecorator ← AnimatedBuilder ← Listener ← RawGestureDetector ← I/flutter ( 4577): GestureDetector ← TextSelectionGestureDetector ← IgnorePointer ← Semantics ← TextField ← Padding ← I/flutter ( 4577): Container ← ⋯ I/flutter ( 4577): parentData: <none> (can use size) I/flutter ( 4577): constraints: BoxConstraints(unconstrained) I/flutter ( 4577): size: MISSING I/flutter ( 4577): This RenderObject had the following descendants (showing up to depth 5): I/flutter ( 4577): RenderRepaintBoundary#00fdc NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 4577): RenderRepaintBoundary#48615 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 4577): RenderCustomPaint#30d09 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 4577): RenderRepaintBoundary#83a25 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 4577): RenderPointerListener#5441a NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 4577): RenderConstrainedBox#9c2d7 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 4577): RenderCustomPaint#193bb NEEDS-LAYOUT NEEDS-PAINTHow can I fix this problem? Also how can I fix the
TextFieldso they look like the ones in my image? -
PeakGen about 5 yearsThank you. But how can I do that?