TextField ด้านในของแถวทำให้เกิดข้อยกเว้นโครงร่าง: ไม่สามารถคำนวณขนาดได้

ฉันได้รับข้อยกเว้นการเรนเดอร์ที่ฉันไม่เข้าใจวิธีการแก้ไข ฉันกำลังพยายามสร้างคอลัมน์ที่มี 3 แถว

แถว [ภาพ]

แถว [ฟิลด์ข้อความ]

แถว [ปุ่ม]

นี่คือรหัสของฉันเพื่อสร้างภาชนะ:

Container buildEnterAppContainer(BuildContext context) {
    var container = new Container(
      padding: const EdgeInsets.all(8.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          buildImageRow(context),
          buildAppEntryRow(context),
          buildButtonRow(context)
        ],
      ),
    );
    return container;
  }

และรหัส buildAppEntryRow ของฉันสำหรับคอนเทนเนอร์ข้อความ

Widget buildAppEntryRow(BuildContext context) {
    return new Row(
      children: <Widget>[
        new TextField(
          decoration: const InputDecoration(helperText: "Enter App ID"),
          style: Theme.of(context).textTheme.body1,
        )
      ],
    );
  }

เมื่อฉันเรียกใช้ฉันได้รับข้อยกเว้นต่อไปนี้:

I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674):   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

ถ้าฉันเปลี่ยน buildAppEntryRow เป็นเพียงฟิลด์ข้อความแทนเช่นนี้

 Widget buildAppEntryRow2(BuildContext context) {
    return new TextField(
      decoration: const InputDecoration(helperText: "Enter App ID"),
      style: Theme.of(context).textTheme.body1,
    );
  }

ฉันไม่ได้รับการยกเว้นอีกต่อไป ฉันขาดอะไรบ้างกับการนำ Row ไปใช้ซึ่งทำให้ไม่สามารถคำนวณขนาดของแถวนั้นได้?

(ฉันคิดว่าคุณกำลังใช้Rowเพราะคุณต้องการวางวิดเจ็ตอื่น ๆ ไว้ข้างๆTextFieldในอนาคต)

Rowเครื่องมือต้องการที่จะกำหนดขนาดที่แท้จริงของเด็กที่ไม่ได้มีความยืดหยุ่นเพื่อให้มันรู้ว่าช่องว่างที่ว่ามันมีเหลือสำหรับคนที่มีความยืดหยุ่น อย่างไรก็ตามTextFieldไม่มีความกว้างที่แท้จริง มันรู้วิธีปรับขนาดตัวเองให้เต็มความกว้างของคอนเทนเนอร์พาเรนต์เท่านั้น ลองใส่ในFlexibleหรือExpandedเพื่อบอกRowว่าคุณคาดหวังว่าTextFieldจะใช้พื้นที่ที่เหลือ:

      new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),

คุณได้รับข้อผิดพลาดนี้เนื่องจากTextFieldขยายไปในทิศทางแนวนอนและเช่นRowนั้นเราจำเป็นต้องจำกัดความกว้างของTextFieldมันมีหลายวิธีในการทำ

1. ใช้ Expanded

    Row(
     children: <Widget>[
       Expanded(child: TextField()),
       OtherWidget(),
     ],
   )
   

2. ใช้ Flexible

   Row(
     children: <Widget>[
       Flexible(child: TextField()),
       OtherWidget(),
     ],
   )
   

3. ห่อในContainerหรือSizedBoxและให้width

   Row(
     children: <Widget>[
       SizedBox(width: 100, child: TextField()),
       OtherWidget(),
     ],
   )       
   

คุณควรใช้ Flexible เพื่อใช้ Textfield ในแถว

new Row(
              children: <Widget>[
                new Text("hi there"),
                new Container(
                  child:new Flexible(
                        child: new TextField( ),
                            ),//flexible
                ),//container


              ],//widget
            ),//row

การแก้ปัญหาคือการห่อของคุณText()หนึ่งภายในของเครื่องมือดังต่อไปนี้อย่างใดอย่างหนึ่งหรือExpanded Flexibleดังนั้นโค้ดของคุณที่ใช้ Expanded จะเป็นดังนี้:

Expanded(
           child: TextField(
             decoration: InputDecoration(
               hintText: "Demo Text",
               hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
              ),
           ),
        ),

ดังที่ @ Asif Shiraz พูดถึงฉันมีปัญหาเดียวกันและแก้ไขได้โดย Wrapping Column in a Flexible, ที่นี่เช่นนี้ ,,

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
          body: Row(
            children: <Widget>[
              Flexible(
                  child: Column(
                children: <Widget>[
                  Container(
                    child: TextField(),
                  )
                  //container
                ],
              ))
            ],
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),
        ));
  }
}

วิธีง่ายๆคือการห่อของคุณภายในText() Container()ดังนั้นรหัสของคุณจะเป็นดังนี้:

Container(
      child: TextField()
)

ที่นี่คุณจะได้รับแอตทริบิวต์ความกว้างและความสูงของคอนเทนเนอร์เพื่อปรับรูปลักษณ์ของฟิลด์ข้อความของคุณ ไม่จำเป็นต้องใช้Flexibleถ้าคุณกำลังตัดฟิลด์ข้อความภายในคอนเทนเนอร์