CODEWITHSUNDEEP
androiduser-interfacedartflutterflutter-layout
PeakGen
PeakGen

Reputation: 22995

Flutter : Errors when adding TextFields

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.

enter image description here

As you can see my TextFields are 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-PAINT

How can I fix this problem? Also how can I fix the TextField so they look like the ones in my image?

Upvotes: 2

Views: 2147

Answers (1)

Cyclonus
Cyclonus

Reputation: 537

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

Upvotes: 2

Related Questions