Jak ustawić szerokość RaisedButton w Flutter?

126

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,
  ),
),
OlivierGrenoble
źródło
2
Przeczytaj ten numer: github.com/flutter/flutter/issues/10492
Blasanka
3
Pamiętaj, że projekt interfejsu użytkownika ze stałą szerokością może przyprawić Cię o ból głowy, jeśli kiedykolwiek zdecydujesz się udostępnić swoją aplikację (oferować większe rozmiary czcionek) lub wielojęzyczną (niektóre języki są bardziej szczegółowe niż inne).
Ruud Helderman
Sprawdź ten link
Athira Reddy

Odpowiedzi:

240

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"),
  ),
);
Airon Tark
źródło
8
Czy jest coś takiego jak „match_parent”?
Pawan
2
możesz użyć width:MediaQuery.of(context).size.widthlubwidth:double.infinity
Oush
2
Po prostu zawiń go w rozszerzony widżet
janosch
2
usuwa wszystkie podstawowe wartości buttheme
Murat Özbayraktar
101

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(...)
)
CopsOnRoad
źródło
Ciekawe rozwiązanie. Myślę, że powinniśmy wtedy użyć marginesu, aby zostawić trochę pustej przestrzeni po bokach.
OlivierGrenoble
W takim przypadku powinieneś użyć ContainerzamiastSizedBox
CopsOnRoad
@CopsOnRoad SizedBox tworzy pudełko o stałym rozmiarze. W przeciwieństwie do widżetu Pojemnik, Sized Box nie ma parametrów koloru ani dekoracji. Tak więc, jeśli potrzebujesz tylko ustawić szerokość, w takim przypadku SizedBox jest bardziej przejrzysty. Możesz również sprawdzić tę odpowiedź, aby znaleźć więcej stackoverflow.com/questions/55716322
Hasan El-Hefnawy
1
@ HasanEl-Hefnawy Jestem tego świadomy, dlatego użyłem rozmiaru box. Ale ktoś prosił o marżę, a ja odpowiedziałem mu z rozwiązaniem Container
CopsOnRoad
19

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.

Rémi Rousselet
źródło
15

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,
)
hui00
źródło
użycie minWidth nie odpowiada w pełni na pytanie o ustawienie szerokości. Pomocne może być tutaj użycie widżetu nadrzędnego Wrap.
AlanKley
Jest to idealne rozwiązanie, aby uzyskać mniejsze guziki, które ciasno owijają etykiety.
hawkbee
6

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,
    ),
  ),),])
Elton Morais
źródło
„The Expanded You” - masz na myśli rozszerzony widżet?
Jasir
Domyślna wartość flex to 1, nie ma potrzeby jej określania.
c49
Rozszerzone prace. dziękuję
Sravan
6

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),
                      ),
                    ),
                  )
Hitesh Dhamshaniya
źródło
5

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,
    );
Fayaz
źródło
również, jeśli chcesz, aby twój przycisk width * 0.8
Kirill Karmazin
5

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,
)),
MST
źródło
4

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 .

jitsm555
źródło
3

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,
       ),
    ));
  }
Saeed Masoumi
źródło
3

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

na przykład

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

źródło
3

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),
Shikhar Singh
źródło
1

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,),
              ),
              )
)
youssef ali
źródło
1

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.

xinthink
źródło
2
Rozszerzony może działać tylko wtedy, gdy Twoi rodzice wspierają Cię w jego posiadaniu.
CopsOnRoad
Expandedma być używany w widżetach dla wielu dzieci, takich jak Rowi Column.
Loolooii,
0

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"),
        ),
      ),
Amir Vazirifar
źródło
0

Wypróbuj to

Expanded(   
  child: RaisedButton(
    onPressed: _onButtonPressed,
    child: Text('Button1')
  )  
)
Artem
źródło
0

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

謝 Richard
źródło
0

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ść

Irfandi D. Vendy
źródło
-1

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: () {},
    ),
  ),
),
Raj A
źródło
-2

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

Row(
  children: [
    Expanded(
      child: ElevatedButton(...),
    ),
  ],
)
fromvega
źródło
Nie jest ani krótkie, ani słodkie. Po prostu dodajesz nadmiarowe widżety w hierarchii drzewa. Dlaczego nie po prostu użyć double.infinityw SizedBox? To będzie znacznie „krótsze” i „słodsze”.
iDecode
W przykładzie nie zastosowano nadmiarowych widżetów. Jeśli masz na myśli, że możesz osiągnąć ten sam wynik za pomocą różnych widżetów, to powiedziałbym, że jest inaczej. W każdym razie nie wiedziałem, że możemy używać SizedBox bez stałego rozmiaru. SizedBox.expand()Przyjrzawszy się temu stwierdziłem, co prawdopodobnie byłoby lepsze niż użycie double.infinity.
fromvega
SizedBox.expandjest zasadniczo SizedBoxz widthi heightustawiony double.infinity. Więc nawet SizedBox.expandnie odpowiesz na pytanie OP, które dotyczy, widtha które nie width + height.
iDecode
Zresztą tytuł pytania dotyczy ustawienia szerokości przycisku. Myślę, że moja odpowiedź jest pomocna dla innych takich jak ja, którzy przybyli tutaj, szukając sposobu, aby guzik miał pełną szerokość.
fromvega
Twoja odpowiedź dodaje niepotrzebne widżety, aby wykonać prostsze zadanie. Może to negatywnie wpłynąć na wydajność.
iDecode