Jak ustawić szerokość RaisedButton w Flutter?

Widziałem, że nie mogę ustawić szerokości a RaisedButtonwe Flutter. Jeśli dobrze zrozumiałem, powinienem umieścić RaisedButtonw SizedBox. Będę wtedy mógł ustawić szerokość lub wysokość pudełka. Czy to jest poprawne? Czy jest inny sposób, aby to zrobić?

Tworzenie SizedBoxwokół każdego przycisku jest trochę uciążliwe, więc zastanawiam się, dlaczego zdecydowali się to zrobić w ten sposób. Jestem prawie pewien, że mają ku temu dobry powód, ale ja tego nie widzę. Rusztowanie jest dość trudne do odczytania i zbudowania dla początkującego.

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: new RaisedButton(
    child: new Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),

Jak wspomniano w dokumentacji tutaj

Podniesione przyciski mają minimalny rozmiar 88,0 na 36,0, który można przesłonić przyciskiem ButtonTheme.

Możesz to zrobić w ten sposób

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

Dla match_parentmożna użyć

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

Dla dowolnej wartości, której możesz użyć

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

To dlatego, że trzepotanie nie dotyczy rozmiaru. Chodzi o ograniczenia.

Zwykle mamy 2 przypadki użycia:

• Element potomny widżetu definiuje ograniczenie. Sam rozmiar rodzica jest oparty na tych informacjach. np. Padding, który usuwa ograniczenie dziecka i je zwiększa.
• Rodzic wymusza ograniczenie wobec swojego dziecka. np .: SizedBox, ale także Columnw trybie strech, ...

RaisedButtonjest pierwszym przypadkiem. Co oznacza, że ​​jest to przycisk, który definiuje własną wysokość / szerokość. Zgodnie z zasadami materiałowymi, podniesiony rozmiar przycisku jest stały.

Nie chcesz takiego zachowania, dlatego możesz użyć widżetu drugiego typu, aby przesłonić ograniczenia przycisku.

W każdym razie, jeśli bardzo tego potrzebujesz, rozważ utworzenie nowego widżetu, który wykona zadanie za Ciebie. Lub użyj MaterialButton, który ma właściwość wysokości.

Polecam użycie MaterialButton, niż możesz to zrobić w ten sposób:

new MaterialButton( 
 height: 40.0, 
 minWidth: 70.0, 
 color: Theme.of(context).primaryColor, 
 textColor: Colors.white, 
 child: new Text("push"), 
 onPressed: () => {}, 
 splashColor: Colors.redAccent,
)

Musisz użyć rozszerzonego widżetu. Jeśli jednak przycisk znajduje się w kolumnie, rozszerzony widżet wypełnia pozostałą część kolumny. Musisz więc umieścić rozwinięty widżet w wierszu.

Row(children: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])

Moim preferowanym sposobem na zrobienie przycisku Podnieś z elementem nadrzędnym jest owinięcie go Kontenerem. poniżej znajduje się przykładowy kod.

Container(
          width: double.infinity,
          child: RaisedButton(
                 onPressed: () {},
                 color: Colors.deepPurpleAccent[100],
                 child: Text(
                        "Continue",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )

Ten fragment kodu pomoże ci lepiej rozwiązać problem, ponieważ nie możemy określić szerokości bezpośrednio w RaisedButton, możemy określić szerokość dla jego dziecka

double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
            width: width,
            child: Text(
              StringConfig.acceptButton,
              textAlign: TextAlign.center,
            ));

RaisedButton(
        child: maxWidthChild,
        onPressed: (){},
        color: Colors.white,
    );

Po prostu użyj FractionallySizedBox, gdzie widthFactori heightFactor określ procent rozmiaru aplikacji / rodzica.

FractionallySizedBox(
widthFactor: 0.8,   //means 80% of app width
child: RaisedButton(
  onPressed: () {},
  child: Text(
    "Your Text",
    style: TextStyle(color: Colors.white),
  ),
  color: Colors.red,
)),

Użyj zapytania o media, aby mądrze używać szerokości swojego rozwiązania, które będzie działać tak samo na małym i dużym ekranie

  Container(
            width: MediaQuery.of(context).size.width * 0.5, // Will take 50% of screen space
            child: RaisedButton(
              child: Text('Go to screen two'),
              onPressed: () => null
            ),
          )

Możesz zastosować podobne rozwiązanie SizeBoxrównież do .

Jeśli chcesz globalnie zmienić wysokość i minWidth wszystkich swoich RaisedButtons, możesz nadpisać ThemeDatawewnątrz MaterialApp:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
       theme: ThemeData(
       ...
       buttonTheme: ButtonThemeData(
          height: 46,
          minWidth: 100,
       ),
    ));
  }

Zawiń RaisedButton w Container i nadaj szerokość Container Widget.

na przykład

 Container(
 width : 200,
 child : RaisedButton(
         child :YourWidget ,
         onPressed(){}
      ),
    )

Możesz utworzyć globalną metodę, taką jak przycisk używany w całej aplikacji. Zmieni rozmiar zgodnie z długością tekstu wewnątrz kontenera. Widżet FittedBox służy do dopasowania widżetu do dziecka, które się w nim znajduje.

Widget primaryButton(String btnName, {@required Function action}) {
  return FittedBox(
  child: RawMaterialButton(
  fillColor: accentColor,
  splashColor: Colors.black12,
  elevation: 8.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 13.0),
    child: Center(child: Text(btnName, style: TextStyle(fontSize: 18.0))),
  ),
  onPressed: () {
    action();
   },
  ),
 );
}

Jeśli chcesz przycisk o określonej szerokości i wysokości, możesz użyć właściwości ograniczenia RawMaterialButton do podania minimalnej maksymalnej szerokości i wysokości przycisku

constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),

możesz robić to, co mówią w komentarzach lub możesz zaoszczędzić wysiłek i pracować z RawMaterialButton. które mają wszystko i możesz zmienić obramowanie na okrągłe i wiele innych atrybutów. dawny kształt (zwiększ promień, aby uzyskać bardziej okrągły kształt)

shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25

i możesz użyć dowolnego kształtu jako przycisku, używając GestureDetector, który jest widżetem i akceptuje inny widżet w atrybucie potomnym. jak w innym przykładzie tutaj

GestureDetector(
onTap: () {//handle the press action here }
child:Container(

              height: 80,
              width: 80,
              child:new Card(

                color: Colors.blue,
                shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
                elevation: 0.0,                
              child: Icon(Icons.add,color: Colors.white,),
              ),
              )
)

Jeśli przycisk jest umieszczony w Flexwidgecie (w tym Row& Column), możesz go zawinąć za pomocą rozszerzonego widżetu, aby wypełnić dostępne miejsce.

W moim przypadku użyłem marginesu, aby móc zmienić rozmiar:

Container(


     margin: EdgeInsets.all(10),

    // or margin: EdgeInsets.only(left:10, right:10),



        child: RaisedButton(
          padding: EdgeInsets.all(10),

          shape: RoundedRectangleBorder(borderRadius: 
BorderRadius.circular(20)),
          onPressed: () {},
          child: Text("Button"),
        ),
      ),

Wypróbuj to

Expanded(   
  child: RaisedButton(
    onPressed: _onButtonPressed,
    child: Text('Button1')
  )  
)

Jeśli nie chcesz usuwać wszystkich skonfigurowanych motywów przycisków.

ButtonTheme.fromButtonThemeData(
  data: Theme.of(context).buttonTheme.copyWith(
                minWidth: 200.0,
                height: 100.0,,
              )
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

Jeśli masz przycisk wewnątrz kolumny () i chcesz, aby przycisk miał maksymalną szerokość, ustaw:

crossAxisAlignment: CrossAxisAlignment.stretch

w widżecie kolumny. Teraz wszystko pod tą kolumną () będzie miało maksymalną dostępną szerokość

To zadziałało dla mnie. Container zapewnia wysokość, a FractionallySizedBox zapewnia szerokość RaisedButton.

Container(
  height: 50.0, //Provides height for the RaisedButton
  child: FractionallySizedBox(
    widthFactor: 0.7, ////Provides 70% width for the RaisedButton
    child: RaisedButton(
      onPressed: () {},
    ),
  ),
),

Krótkie i przyjemne rozwiązanie dla przycisku o pełnej szerokości:

Row(
  children: [
    Expanded(
      child: ElevatedButton(...),
    ),
  ],
)