Apa yang setara dengan wrap_content dan match_parent di flutter?

Di Android match_parentdan wrap_contentdigunakan untuk mengubah ukuran widget secara otomatis relatif terhadap induknya untuk konten yang berisi widget.

Di Flutter, tampaknya secara default semua widget disetel ke wrap_content, bagaimana cara mengubahnya sehingga saya bisa mengisi widgetnya widthdan widget heightinduknya?

Anda dapat melakukannya dengan sedikit Trik: Misalkan Anda memiliki persyaratan: (Lebar, Tinggi)

Wrap_content, Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

Dalam rangka untuk mendapatkan perilaku untuk match_parent dan wrap_content kita perlu menggunakan mainAxisSize properti di Row / Kolom widget, yang mainAxisSize properti membutuhkan MainAxisSize enum memiliki dua nilai yang MainAxisSize.min yang berperilaku sebagai wrap_content dan MainAxisSize.max yang berperilaku sebagai match_parent .

Tautan Artikel asli

Jawaban singkatnya adalah bahwa orang tua tidak memiliki ukuran sampai anak tersebut memiliki ukuran.

Cara kerja tata letak di Flutter adalah setiap widget memberikan batasan untuk setiap turunannya, seperti "Anda bisa sampai selebar ini, Anda harus setinggi ini, Anda harus setidaknya selebar ini", atau apa pun (khususnya, mereka dapatkan lebar minimum, lebar maksimum, tinggi minimum, dan tinggi maksimum). Setiap anak mengambil batasan tersebut, melakukan sesuatu, dan memilih ukuran (lebar dan tinggi) yang cocok dengan batasan tersebut. Kemudian, setelah setiap anak menyelesaikan tugasnya, widget dapat memilih ukurannya sendiri.

Beberapa widget mencoba menjadi sebesar yang diizinkan oleh induknya. Beberapa widget mencoba sekecil yang diizinkan induknya. Beberapa widget mencoba menyesuaikan dengan ukuran "alami" tertentu (mis. Teks, gambar).

Beberapa widget memberi tahu anak-anak mereka bahwa mereka dapat berukuran berapa pun yang mereka inginkan. Beberapa memberi anak mereka kendala yang sama seperti yang mereka dapatkan dari orang tua mereka.

Sebenarnya ada beberapa opsi yang tersedia:

Anda dapat menggunakan SizedBox.expand untuk membuat widget Anda sesuai dengan dimensi orang tua, atau SizedBox (width: double.infinity) untuk mencocokkan hanya lebarnya atau SizedBox (heigth: double.infinity) untuk mencocokkan hanya tinggi.

Jika Anda menginginkan perilaku wrap_content, itu bergantung pada widget induk yang Anda gunakan, misalnya jika Anda meletakkan tombol pada kolom, tombol tersebut akan berperilaku seperti wrap_content dan untuk menggunakannya seperti match_parent Anda dapat membungkus tombol dengan widget yang Diperluas atau kotak ukuran.

Dengan ListView, tombol mendapatkan perilaku match_parent dan untuk mendapatkan perilaku wrap_content Anda bisa membungkusnya dengan widget Flex seperti Row.

Menggunakan widget yang Diperluas membuat anak dari Baris, Kolom, atau Lentur meluas untuk mengisi ruang yang tersedia di sumbu utama (misalnya, secara horizontal untuk Baris atau vertikal untuk Kolom). https://docs.flutter.io/flutter/widgets/Expanded-class.html

Menggunakan widget Fleksibel memberi anak Baris, Kolom, atau Lentur fleksibilitas untuk memperluas untuk mengisi ruang yang tersedia di sumbu utama (misalnya, horizontal untuk Baris atau vertikal untuk Kolom), tetapi, tidak seperti Diperluas, Fleksibel tidak meminta anak untuk mengisi ruang yang tersedia. https://docs.flutter.io/flutter/widgets/Flexible-class.html

Solusi sederhana:

Jika sebuah penampung hanya memiliki satu turunan tingkat atas, Anda dapat menentukan properti penyelarasan untuk anak tersebut dan memberikan nilai yang tersedia. itu akan mengisi semua ruang di wadah.

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

Cara lain:

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

Saya menggunakan solusi ini, Anda harus menentukan tinggi dan lebar layar Anda menggunakan MediaQuery:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

Gunakan widget Wrap.

Untuk Columnperilaku serupa coba:

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

Untuk Rowperilaku serupa coba:

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

Untuk informasi lebih lanjut: Wrap (Flutter Widget)

Gunakan baris kode ini di dalam Kolom. Untuk wrap_content: mainAxisSize: MainAxisSize.min Untuk match_parent:mainAxisSize: MainAxisSize.max

Sebenarnya ada cara yang sangat mudah dan rapi untuk melakukan ini.

Gunakan FractionallySizedBoxwidget.

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

Widget ini juga sangat berguna ketika Anda ingin mengukur anak Anda pada pecahan dari ukuran induknya.

Contoh:

Jika Anda ingin anak menempati lebar 50% dari induknya, berikan widthFactoras0.5

Untuk membuat seorang anak mengisi induknya, cukup bungkus ke dalam FittedBox

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )