Induk Pencocokan Lebar Tombol

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.

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

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

Container(
  width: double.infinity,
  child: RaisedButton(...),
),

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:

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

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

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

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

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

Kode berikut bekerja untuk saya

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

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.

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

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

ListTile(
  title: new RaisedButton(...),
),

Anda dapat melakukannya dengan MaterialButton

MaterialButton(
     padding: EdgeInsets.all(12.0),
     minWidth: double.infinity,
     onPressed: () {},
    child: Text("Btn"),
)

 new SizedBox(
  width: 100.0,
     child: new RaisedButton(...),
)

Yang ini berhasil untuk saya

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

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

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

    )
)

         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.

Tempatkan Anda RaisedButton(...)diSizedBox

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