Làm cách nào để đặt chiều rộng của RaisedButton trong Flutter?

Tôi đã thấy rằng tôi không thể đặt chiều rộng của a RaisedButtontrong Flutter. Nếu tôi đã hiểu rõ, tôi nên đưa RaisedButtonvào a SizedBox. Sau đó, tôi sẽ có thể đặt chiều rộng hoặc chiều cao của hộp. Nó có đúng không? Có cách nào khác để làm điều đó không?

Điều này hơi tẻ nhạt để tạo SizedBoxxung quanh mọi nút nên tôi tự hỏi tại sao họ lại chọn làm theo cách này. Tôi khá chắc rằng họ có lý do chính đáng để làm như vậy nhưng tôi không hiểu. Dàn giáo khá khó đọc và khó xây dựng đối với người mới bắt đầu.

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

Như đã nói trong tài liệu ở đây

Các nút nâng cao có kích thước tối thiểu là 88,0 x 36,0 có thể được ghi đè bằng ButtonTheme.

Bạn có thể làm điều đó như thế

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

Cho match_parentbạn có thể sử dụng

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

Đối với bất kỳ giá trị cụ thể nào bạn có thể sử dụng

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

Đó là bởi vì sự rung động không phải là về kích thước. Đó là về những ràng buộc.

Thông thường chúng ta có 2 trường hợp sử dụng:

• Con của một widget định nghĩa một ràng buộc. Kích thước chính dựa trên thông tin đó. ví dụ:, Paddinglấy ràng buộc con và tăng nó lên.
• Cha thực thi một ràng buộc đối với con của nó. ví dụ :, SizedBoxnhưng cũng Columnở chế độ liên tục, ...

RaisedButtonlà trường hợp đầu tiên. Có nghĩa đó là nút xác định chiều cao / chiều rộng của chính nó. Và, theo quy tắc vật liệu, kích thước nút nâng là cố định.

Bạn không muốn hành vi đó, do đó, bạn có thể sử dụng tiện ích loại thứ hai để ghi đè các ràng buộc của nút.

Dù sao, nếu bạn cần điều này nhiều, hãy cân nhắc tạo một widget mới để thực hiện công việc cho bạn. Hoặc sử dụng MaterialButton, sở hữu thuộc tính chiều cao.

tôi muốn khuyên bạn nên sử dụng MaterialButton, hơn là bạn có thể làm như thế này:

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

Cách ưa thích của tôi để tạo nút Raise với match cha là bọc nó bằng Container. dưới đây là mã mẫu.

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

Đoạn mã này sẽ giúp bạn giải quyết vấn đề của mình tốt hơn, vì chúng tôi không thể chỉ định chiều rộng trực tiếp cho RaisedButton, chúng tôi có thể chỉ định chiều rộng cho con của nó

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

Bạn cần sử dụng một Widget mở rộng. Tuy nhiên, nếu nút của bạn nằm trên một cột, thì Tiện ích con được mở rộng sẽ lấp đầy phần còn lại của cột. Vì vậy, bạn cần đặt Widget được Mở rộng trong một hàng.

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

Đơn giản có thể sử dụng FractionallySizedBox.

trong đó widthFactor & heightFactor xác định phần trăm kích thước ứng dụng / gốc

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

Bao bọc RaisedButton bên trong Container và cung cấp chiều rộng cho Container Widget.

ví dụ

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

Bạn có thể tạo phương thức chung như cho nút đang được sử dụng trên toàn ứng dụng. Nó sẽ thay đổi kích thước theo độ dài văn bản bên trong vùng chứa. Tiện ích FittedBox được sử dụng để làm cho tiện ích phù hợp theo đứa trẻ bên trong nó.

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();
   },
  ),
 );
}

Nếu bạn muốn nút có chiều rộng và chiều cao cụ thể, bạn có thể sử dụng thuộc tính ràng buộc của RawMaterialButton để cung cấp chiều rộng và chiều cao tối đa tối thiểu của nút

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

Nếu bạn muốn thay đổi toàn cầu chiều cao và chiều rộng tối thiểu của tất cả các RaisedButtons của mình, thì bạn có thể ghi đè ThemeDatabên trong MaterialApp:

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

Sử dụng Media Query để sử dụng chiều rộng một cách khôn ngoan cho giải pháp của bạn, giải pháp này sẽ chạy tương tự cho màn hình nhỏ và lớn

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

Bạn cũng có thể áp dụng giải pháp tương tự SizeBox.

bạn có thể làm như họ nói trong các nhận xét hoặc bạn có thể tiết kiệm công sức và làm việc với RawMaterialButton. trong đó có mọi thứ và bạn có thể thay đổi đường viền thành hình tròn và nhiều thuộc tính khác. hình dạng cũ (tăng bán kính để có hình dạng tròn hơn)

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

và bạn có thể sử dụng bất kỳ hình dạng nào bạn muốn làm nút bằng cách sử dụng GestureDetector là một tiện ích con và chấp nhận một tiện ích con khác theo thuộc tính con. như trong ví dụ khác ở đây

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

Nếu nút được đặt trong Flextiện ích con (bao gồm Row& Column), bạn có thể bọc nó bằng Tiện ích con mở rộng để lấp đầy không gian có sẵn.

Trong trường hợp của tôi, tôi đã sử dụng ký quỹ để có thể thay đổi kích thước:

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

Hãy dùng thử

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

Nếu bạn không muốn xóa tất cả chủ đề nút đã thiết lập.

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

Giải pháp ngắn gọn và hấp dẫn cho một nút có chiều rộng đầy đủ:

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