Flutter: ошибки при добавлении TextFields - PullRequest
Новая
       18

Flutter: ошибки при добавлении TextFields

1 голос
/ 14 марта 2019

Пожалуйста, проверьте мой приведенный ниже код. 

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,
                  )),

              )],
        )
      ],
    );
  }
}

Я пытаюсь достичь нижеприведенного, но все еще на стадии реализации TextField.

enter image description here

Как видите, мои TextFields представляют собой квадратные коробки белого цвета.

Когда я запускаю код, я получаю следующую ошибку. 

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

Как я могу решить эту проблему?Также, как я могу исправить TextField, чтобы они выглядели так, как на моем изображении?

1 Ответ

0 голосов
/ 14 марта 2019

Идея такова:

У вас есть строка, которая устанавливает вашу ширину в бесконечность.Внутри этого у вас есть столбец, который устанавливает вашу высоту на бесконечность.

Затем у вас есть контейнер, но вы не определили его ширину или высоту, поэтому он наследует их от своих родителей (бесконечно).

Виджет Текст не заботится (я думаю), потому что внутренне он сам себя масштабирует.Но TextField делает.

Вам необходимо ограничить его ширину (или ширину его родительского контейнера).

Редактировать: Самый простой способ - установить свойство width для контейнера, которыйзаключает ваш TextField.Я привел пример ниже.Вам также следует обратить внимание на свойство Row mainAxisAlignment для центрирования поля в строке: 

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
...