Induk Pencocokan Lebar Tombol

120

Saya ingin tahu bagaimana cara mengatur lebar agar sesuai dengan induk lebar tata letak

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: new RaisedButton(
    child: new Text(
        "Submit",
        style: new TextStyle(
          color: Colors.white,
        )
    ),
    colorBrightness: Brightness.dark,
    onPressed: () {
      _loginAttempt(context);
    },
    color: Colors.blue,
  ),
),

Saya tahu sedikit tentang Expandedwidget tetapi Expandedmemperluas tampilan ke kedua arah, saya tidak tahu bagaimana melakukannya.

Mohit Suthar
sumber
1
Mungkin Kolom sebagai gantinya?
Günter Zöchbauer
Ya, saya lampirkan kolom alih-alih Wadah tetapi lebar tombol adalah Bungkus Konten bagaimana bisa meregangkan lebar ke induk
Mohit Suthar
Anda cukup menggunakan FlatButton dan membungkusnya di dalam wadah dan menambahkan lebar wadah ke lebar layar dengan menggunakan mediaquery, cari jawaban saya di bawah ini
maheshmnj

Jawaban:

264

Solusi yang tepat adalah dengan menggunakan SizedBox.expandwidget, yang memaksakannya childagar sesuai dengan ukuran induknya.

SizedBox.expand(
  child: RaisedButton(...),
)

Ada banyak alternatif, yang memungkinkan lebih banyak atau lebih sedikit penyesuaian:

SizedBox(
  width: double.infinity,
  // height: double.infinity,
  child: RaisedButton(...),
)

atau menggunakan ConstrainedBox

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)
Rémi Rousselet
sumber
31
SizedBox.expand akan membuat tombol mengambil lebar dan tinggi penuh, yang bukan pertanyaannya. Pertanyaannya adalah tentang tombol yang hanya menutupi lebar penuh, bukan tinggi.
Vinoth Kumar
3
Komentar @ RémiRousselet Vinoth valid. Karena sekarang ini adalah jawaban yang diterima, dapatkah Anda menambahkan konstruktor yang tepat untuk SizedBox untuk secara khusus memperluas hanya lebarnya?
pengguna823447
Saya menerima kesalahan iniFailed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true.
kapsid
Terima kasih untuk solusinya
Ajay Kumar
Saya suka jawaban keduanya, lebih lengkap.
Raiden Core
31

Atribut ukuran dapat diberikan menggunakan ButtonThemedenganminWidth: double.infinity

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

atau setelah https://github.com/flutter/flutter/pull/19416 mendarat

MaterialButton(
  onPressed: () {},
  child: SizedBox.expand(
    width: double.infinity, 
    child: Text('Raised Button'),
  ),
),
Günter Zöchbauer
sumber
26
Container(
  width: double.infinity,
  child: RaisedButton(...),
),
Vinoth Kumar
sumber
24

Cara termudah adalah dengan menggunakan FlatButtonbungkus di dalam a Container, Tombol secara default mengambil ukuran induknya dan menetapkan lebar yang diinginkan ke Container.

            Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                  height: 60,
                  child: FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    onPressed: () {},
                    color: Colors.red[300],
                    child: Text(
                      "Button",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'Raleway',
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                )

Keluaran:

masukkan deskripsi gambar di sini

maheshmnj.dll
sumber
17

Setelah beberapa penelitian, saya menemukan beberapa solusi, dan terima kasih kepada @ Günter Zöchbauer,

Saya menggunakan kolom, bukan Container dan

atur properti ke kolom CrossAxisAlignment.stretch ke Fill match parent of Button

    new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new RaisedButton(
                  child: new Text(
                      "Submit",
                      style: new TextStyle(
                        color: Colors.white,
                      )
                  ),
                  colorBrightness: Brightness.dark,
                  onPressed: () {
                    _loginAttempt(context);
                  },
                  color: Colors.blue,
                ),
              ],
            ),
Mohit Suthar
sumber
8
Column/ Rowtidak boleh digunakan untuk tata letak anak tunggal. Gunakan alternatif anak tunggal sebagai gantinya. Seperti Align, SizedBox, dan yang sejenis.
Rémi Rousselet
5

Anda dapat mengatur orang tua yang cocok dari widget dengan

1) setel lebar menjadi double.infinity :

new Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

2) Gunakan MediaQuery:

new Container(
          width: MedialQuery.of(context).size.width,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),
Hetal
sumber
4

@Bayu_joo

Menemukan salah satu solusi terbaik untuk mencocokkan induk dengan lebar dan tinggi seperti di bawah ini

new Expanded(
          child: new Container(
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.all(16.0),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8.0)),
                  border: new Border.all(color: Colors.black, width: 1.0)),
              child: new Text("TejaDroid")),
        ), 

Di sini Anda dapat memeriksa bahwa ExpandedPengontrol memperoleh lebar dan tinggi sisa .

TejaDroid
sumber
1
Sejauh ini solusi terbaiknya
M David
4

Ini berhasil untuk saya.

Cara termudah untuk memberikan lebar atau tinggi orang tua yang cocok dalam kode yang diberikan di atas.

...
width: double.infinity,
height: double.infinity,
...
kelinci
sumber
4

Untuk match_parentAnda bisa menggunakan

SizedBox(
  width: double.infinity, // match_parent
  child: RaisedButton(...)
)

Untuk nilai tertentu yang dapat Anda gunakan

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)
CopsOnRoad
sumber
1

Kode berikut bekerja untuk saya

       ButtonTheme(
            minWidth: double.infinity,
            child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))
rinkesh
sumber
1

Ini berfungsi untuk saya di widget mandiri.

  Widget signinButton() {
    return ButtonTheme(
      minWidth: double.infinity,
      child: new FlatButton(
        onPressed: () {},
        color: Colors.green[400],
        textColor: Colors.white,
        child: Text('Flat Button'),
      ),
    );
  }

// It can then be used in a class that contains a widget tree.
PaulDef515
sumber
1

Ini bekerja untuk saya.

    SizedBox(
             width: double.maxFinite,
             child: RaisedButton(
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 child: new Text("Button 2"),
                 color: Colors.lightBlueAccent,
                 onPressed: () => debugPrint("Button 2"),
              ),
     ), 
kelvincer.dll
sumber
1

Menggunakan a ListTilejuga berfungsi dengan baik, karena daftar memenuhi seluruh lebar:

ListTile(
  title: new RaisedButton(...),
),
Oush
sumber
1

Anda dapat melakukannya dengan MaterialButton

MaterialButton(
     padding: EdgeInsets.all(12.0),
     minWidth: double.infinity,
     onPressed: () {},
    child: Text("Btn"),
)
Mahmoud Abu Elheja
sumber
0
 new SizedBox(
  width: 100.0,
     child: new RaisedButton(...),
)
Raj008
sumber
0

Yang ini berhasil untuk saya

width: MediaQuery.of(context).size.width-100,
kapsid
sumber
0

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) Ini bekerja untuk saya.

TaoZang
sumber
0

Pendekatan paling dasar adalah menggunakan Container dengan mendefinisikan lebarnya menjadi tak terbatas. Lihat contoh kode di bawah ini

Container(
    width: double.infinity,
    child:FlatButton(
        onPressed: () {
            //your action here
        },
        child: Text("Button"),

    )
)
Tajul Asri
sumber
0
         OutlineButton(
              onPressed: () {
                logInButtonPressed(context);
              },
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                child: Text(Log in,
                  textAlign: TextAlign.center,
                ),
              ),
            )

Sesuatu seperti ini berhasil untuk saya.

Adam Smaka
sumber
0

Tempatkan Anda RaisedButton(...)diSizedBox

SizedBox(
  width: double.infinity,
  child: RaisedButton(...),
)
Orang baik
sumber