[英]How to change the ElevatedButton color or shadow Flutter
我一直在使用RaisedButton
,直到 Flutter 棄用它,我們不能再使用它了。 有人建議說“改用ElevatedButton
”。 所以我嘗試使用它,但看不到color
、 elevation
、 focusColor
等屬性。
那么如何個性化ElevatedButton
呢?
要更改ElevatedButton
的屬性,您應該使用style:
屬性,如下所示:
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue, //button's fill color
onPrimary: Colors.red, //specify the color of the button's text and icons as well as the overlay colors used to indicate the hover, focus, and pressed states
onSurface: Colors.orange, //specify the button's disabled text, icon, and fill color
shadowColor: Colors.black, //specify the button's elevation color
elevation: 4.0, //buttons Material shadow
textStyle: TextStyle(fontFamily: 'roboto'), //specify the button's text TextStyle
padding: const EdgeInsets.only(top: 4.0, bottom: 4.0, right: 8.0, left: 8.0), //specify the button's Padding
minimumSize: Size(20, 40), //specify the button's first: width and second: height
side: BorderSide(color: Colors.yellow, width: 2.0, style: BorderStyle.solid), //set border for the button
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(35.0)), // set the buttons shape. Make its birders rounded etc
enabledMouseCursor: MouseCursor.defer, //used to construct ButtonStyle.mouseCursor
disabledMouseCursor: MouseCursor.uncontrolled, //used to construct ButtonStyle.mouseCursor
visualDensity: VisualDensity(horizontal: 0.0, vertical: 0.0), //set the button's visual density
tapTargetSize: MaterialTapTargetSize.padded, // set the MaterialTapTarget size. can set to: values, padded and shrinkWrap properties
animationDuration: Duration(milliseconds: 100), //the buttons animations duration
enableFeedback: true, //to set the feedback to true or false
alignment: Alignment.bottomCenter, //set the button's child Alignment
),
onPressed: () => {} , //set both onPressed and onLongPressed to null to see the disabled properties
onLongPress: () => {}, //set both onPressed and onLongPressed to null to see the disabled properties
child: Text('ElevatedButton')
),
更改單個按鈕顏色。 使用style
屬性。
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( primary: Colors.red, ), )
更改小部件樹下的所有按鈕顏色。 使用ElevatedButtonTheme
:
ElevatedButtonTheme( data: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( primary: Colors.red, // Sets color for all the descendent ElevatedButtons ), ), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () {}, child: Text('Button 1'), ), SizedBox(height: 12), ElevatedButton( onPressed: () {}, child: Text('Button 2'), ), ], ), )
您可以使用ElevatedButton.styleFrom更改陰影和顏色。
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
shadowColor: Colors.black))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.