Flutter'da RaisedButton'un genişliği nasıl ayarlanır?

RaisedButtonFlutter'da a'nın genişliğini ayarlayamadığımı gördüm . İyi anladıysam, RaisedButtona SizedBox. Daha sonra kutunun genişliğini veya yüksekliğini ayarlayabileceğim. Doğru mu? Bunu yapmanın başka bir yolu var mı?

Bu, SizedBoxher düğmenin etrafında bir oluşturmak biraz sıkıcı, bu yüzden neden bu şekilde yapmayı seçtiklerini merak ediyorum. Bunu yapmak için iyi bir nedenleri olduğundan oldukça eminim ama ben görmüyorum. Yeni başlayanlar için iskeleyi okumak ve inşa etmek oldukça zordur.

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

Buradaki belgelerde söylendiği gibi

Yükseltilmiş düğmelerin minimum boyutu 88.0 x 36.0'dır ve ButtonTheme ile geçersiz kılınabilir.

Bunu böyle yapabilirsin

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

İçin match_parentkullanabilirsiniz

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

Herhangi bir özel değer için kullanabilirsiniz

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

Çünkü flutter boyutla ilgili değil. Kısıtlamalarla ilgili.

Genellikle 2 kullanım durumumuz vardır:

• Bir parçacığın alt öğesi bir kısıtlamayı tanımlar. Ebeveyn boyutunun kendisi bu bilgiye dayanmaktadır. örn:, Paddingalt sınırlamayı alır ve artırır.
• Ebeveyn, çocuğuna bir kısıtlama uygular. örn:, SizedBoxaynı zamanda Columnstrech modunda, ...

RaisedButtonilk durumdur. Bu, kendi yüksekliğini / genişliğini tanımlayan düğme olduğu anlamına gelir. Ve malzeme kurallarına göre, yükseltilmiş düğme boyutu sabittir.

Bu davranışı istemezsiniz, bu nedenle düğme kısıtlamalarını geçersiz kılmak için ikinci türden bir widget kullanabilirsiniz.

Her neyse, buna çok ihtiyacınız varsa, işi sizin için yapacak yeni bir pencere öğesi oluşturmayı düşünün. Veya MaterialButtonbir yükseklik özelliğine sahip olan kullanın .

Bunu şu şekilde yapabileceğinizden bir MaterialButton kullanmanızı tavsiye ederim:

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

Yükselt düğmesini eşleştir ebeveyn ile yapmak için tercih ettiğim yol, onu Kapsayıcıyla sarmalamaktır. Aşağıda örnek kod verilmiştir.

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

Bu kod parçası sorununuzu daha iyi çözmenize yardımcı olacaktır, çünkü genişliği doğrudan RaisedButton'a belirtemiyoruz, alt öğesi için genişliği belirleyebiliriz

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

Genişletilmiş Widget kullanmanız gerekir. Ancak, düğmeniz bir sütunun üzerindeyse, Genişletilmiş Pencere Öğesi sütunun geri kalanını doldurur. Bu nedenle, Genişletilmiş Widget'ı bir satır içine almanız gerekir.

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

Sadece FractionallySizedBox'ı kullanabilirsiniz.

widthFactor ve heightFactor, uygulama / üst boyut yüzdesini tanımlar

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

RaisedButton'ı Container'a sarın ve Container Widget'a genişlik verin.

Örneğin

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

Uygulamanın her yerinde kullanılan düğme gibi global bir yöntem oluşturabilirsiniz. Kap içindeki metin uzunluğuna göre yeniden boyutlandırılacaktır. FittedBox widget'ı, widget'ı içindeki çocuğa göre sığdırmak için kullanılır.

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

Belirli genişlik ve yükseklikte düğme istiyorsanız, minimum maksimum genişlik ve düğme yüksekliği vermek için RawMaterialButton'ın kısıtlama özelliğini kullanabilirsiniz.

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

Eğer global yükseklik ve tüm arasında minWidth değiştirmek istediğiniz takdirde RaisedButtons, o zaman geçersiz kılabilirsiniz ThemeDatagözündeki MaterialApp:

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

Çözümünüz için genişliği akıllıca kullanmak için Medya Sorgusunu kullanı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
            ),
          )

Benzer çözümü de uygulayabilirsiniz SizeBox.

yorumlarda söylediklerini yapabilir ya da çabadan tasarruf edebilir ve RawMaterialButton ile çalışabilirsiniz. Her şeye sahip olan ve sınırı dairesel ve diğer birçok özelliğe sahip olacak şekilde değiştirebilirsiniz. ex şekil (daha dairesel bir şekle sahip olmak için yarıçapı artırın)

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

ve bir pencere öğesi olan ve child niteliği altında başka bir pencere öğesi kabul eden GestureDetector'ı kullanarak istediğiniz şekli düğme olarak kullanabilirsiniz. buradaki diğer örnekte olduğu gibi

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

Düğme bir Flexwidget'a ( Row& dahil Column) yerleştirilmişse , mevcut alanı doldurmak için Genişletilmiş Widget kullanarak onu kaydırabilirsiniz .

Benim durumumda boyutu değiştirebilmek için marj kullandım:

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

Denemek

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

Tüm düğme teması kurulumunu kaldırmak istemiyorsanız.

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

Tam genişlikte bir düğme için kısa ve güzel çözüm:

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