TextField di dalam Baris menyebabkan pengecualian tata letak: Tidak dapat menghitung ukuran

Saya mendapatkan pengecualian render yang tidak saya mengerti cara memperbaikinya. Saya mencoba membuat kolom yang memiliki 3 baris.

Baris [Gambar]

Baris [TextField]

Baris [tombol]

Ini kode saya untuk membuat wadah:

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;
  }

dan kode buildAppEntryRow saya untuk wadah teks

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

Ketika saya menjalankan saya mendapatkan pengecualian berikut:

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)

Jika saya mengubah buildAppEntryRow menjadi TextField saja seperti ini

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

Saya tidak lagi mendapatkan pengecualian. Apa yang saya lewatkan dengan implementasi Row yang menyebabkannya tidak dapat menghitung ukuran baris itu?

(Saya menganggap Anda menggunakan a Rowkarena Anda ingin meletakkan widget lain di samping TextFielddi masa mendatang.)

The Rowwidget ingin menentukan ukuran intrinsik anak-anak non-fleksibel sehingga tahu berapa banyak ruang yang telah meninggalkan untuk yang fleksibel. Namun, TextFieldtidak memiliki lebar intrinsik; ia hanya tahu bagaimana mengatur ukurannya sendiri dengan lebar penuh dari wadah induknya. Cobalah membungkusnya dalam Flexibleatau Expandeduntuk memberi tahu RowAnda mengharapkan TextFieldruang yang tersisa:

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

Anda mendapatkan kesalahan ini karena TextFieldmengembang dalam arah horizontal dan begitu juga dengan Row, jadi kita perlu membatasi lebar TextField, ada banyak cara untuk melakukannya.

1. Menggunakan Expanded

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

2. Menggunakan Flexible

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

3. Bungkus Containeratau SizedBoxsediakanwidth

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

Anda harus menggunakan Fleksibel untuk menggunakan Textfield di dalam satu baris.

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


              ],//widget
            ),//row

Solusinya adalah membungkus Text()bagian dalam Anda dengan salah satu widget berikut: Baik Expandedatau Flexible. Jadi, kode Anda menggunakan Expanded akan seperti:

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

Seperti yang dikatakan Asif Shiraz, saya memiliki masalah yang sama dan menyelesaikannya dengan Membungkus Kolom secara Fleksibel, di sini seperti ini ,,

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

Solusi sederhana adalah dengan membungkus Text()bagian dalam a Container(). Jadi, kode Anda akan seperti:

Container(
      child: TextField()
)

Di sini Anda juga mendapatkan atribut lebar dan tinggi wadah untuk menyesuaikan tampilan dan nuansa bidang teks Anda. Tidak perlu digunakan Flexiblejika Anda membungkus bidang teks Anda di dalam sebuah Kontainer.