Largura do botão corresponde ao pai

119

Quero saber como posso definir uma largura para corresponder à largura do layout pai

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

Eu sei um pouco sobre o Expandedwidget, mas Expandedexpande a visão para ambas as direções, eu não sei como fazer isso.

Mohit Suthar
fonte
1
Em vez disso, talvez uma coluna?
Günter Zöchbauer
Sim, eu anexei a coluna em vez do recipiente, mas a largura do botão é Wrap Content como posso esticar a largura para o pai
Mohit Suthar
Você pode simplesmente usar um FlatButton e envolvê-lo dentro de um contêiner e adicionar largura do contêiner à largura da tela usando mediaquery, procure minha resposta abaixo
maheshmnj

Respostas:

263

A solução correta seria usar o SizedBox.expandwidget, que obriga childa corresponder ao tamanho de seu pai.

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

Existem muitas alternativas, o que permite mais ou menos personalização:

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

ou usando um ConstrainedBox

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)
Rémi Rousselet
fonte
31
SizedBox.expand fará com que o botão ocupe toda a largura e altura, o que não é a questão. A questão é sobre um botão que cobre toda a largura, mas não a altura.
Vinoth Kumar
3
O comentário de @RémiRousselet Vinoth é válido. Uma vez que esta agora é a resposta aceita, você poderia adicionar os construtores certos para SizedBox para expandir especificamente apenas a largura?
user823447
Estou recebendo este erroFailed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true.
kapsid
Obrigado pela solução
Ajay Kumar,
Eu amo a resposta bidirecional, é mais completa.
Raiden Core
30

O atributo de tamanho pode ser fornecido usando ButtonThemecomminWidth: double.infinity

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

ou após https://github.com/flutter/flutter/pull/19416 pousar

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

A maneira mais simples é usar um FlatButtonempacotado dentro de um Container. Por padrão, o botão assume o tamanho de seu pai e, portanto, atribui a largura desejada a 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,
                      ),
                    ),
                  ),
                )

Resultado:

insira a descrição da imagem aqui

maheshmnj
fonte
17

Depois de alguma pesquisa, descobri uma solução e, graças a @ Günter Zöchbauer,

Usei coluna em vez de recipiente e

defina a propriedade para a coluna CrossAxisAlignment.stretch para Preencher correspondência pai de Botão

    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
fonte
8
Column/ Rownão deve ser usado para layout de filho único. Use a alternativa de filho único. Tais como Align, SizedBoxe semelhantes.
Rémi Rousselet
4

@Mohit Suthar,

Encontrou uma das melhores soluções para combinar o pai com a largura e a altura abaixo

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

Aqui você pode verificar se o ExpandedControlador adquire toda a largura e altura restantes .

TejaDroid
fonte
1
Até agora, é a melhor solução
M David
4

Isso funcionou para mim.

A maneira mais simples de fornecer largura ou altura correspondente ao pai no código fornecido acima.

...
width: double.infinity,
height: double.infinity,
...
Coelho
fonte
4

Para match_parentvocê pode usar

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

Para qualquer valor específico, você pode usar

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)
CopsOnRoad
fonte
4

Você pode definir a correspondência parente do widget por

1) defina a largura como 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) Use 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
fonte
1

O código a seguir funciona para mim

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

Isso está funcionando para mim em um widget independente.

  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
fonte
1

Isso está funcionando para mim.

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

Usar um ListTiletambém funciona bem, já que uma lista preenche toda a largura:

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

você pode fazer isso com o MaterialButton

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

Este funcionou para mim

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

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) Funciona para mim.

TaoZang
fonte
0

A abordagem mais básica é usar o Container definindo sua largura para infinito. Veja abaixo o exemplo de código

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

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

Algo assim funciona para mim.

Adam Smaka
fonte
0

Coloque o seu RaisedButton(...)em umSizedBox

SizedBox(
  width: double.infinity,
  child: RaisedButton(...),
)
Bom homem
fonte