Flutter TextButton相關

flutter 2.0版本新增了三個按鈕

TextButton、OutlinedButton、ElevatedButton

以TextButton爲例：
屬性：

const TextButton({
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    required Widget child,
  }) : super(
    key: key,
    onPressed: onPressed,
    onLongPress: onLongPress,
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );

當想改變按鈕圓角時需要在style中設置，看一下style屬性裏有什麼？
style屬性

class ButtonStyle with Diagnosticable {
  /// Create a [ButtonStyle].
  const ButtonStyle({
    this.textStyle,
    this.backgroundColor,
    this.foregroundColor,
    this.overlayColor,
    this.shadowColor,
    this.elevation,
    this.padding,
    this.minimumSize,
    this.side,
    this.shape,
    this.mouseCursor,
    this.visualDensity,
    this.tapTargetSize,
    this.animationDuration,
    this.enableFeedback,
    this.alignment,
  });

其中side控制邊框final MaterialStateProperty<BorderSide?>? side;
使用：

side: MaterialStateProperty.all(
                              BorderSide(
                                color: Colors.blue,
                                width: 4),
                            )

其中shape可以包含side的作用，作用範圍比side廣，這裏使用shape時

/// The shape of the button's underlying [Material].
  ///
  /// This shape is combined with [side] to create a shape decorated
  /// with an outline.
  final MaterialStateProperty<OutlinedBorder?>? shape;

用到MaterialStateProperty<OutlinedBorder?>這個OutlinedBorder是個抽象類，不能直接使用，直接使用會報錯，需要用它的子類，這裏可以使用：RoundedRectangleBorder

style: ButtonStyle(
                            shape: MaterialStateProperty.all(RoundedRectangleBorder(
                              side: BorderSide(
                                width: 0.5,
                                color: Color(0xFFB4B4B4),
                              ),
                              borderRadius: BorderRadius.circular(20),
                            ),
                              
                            ),
                            // side: MaterialStateProperty.all(
                            //   BorderSide(
                            //     color: Colors.blue,
                            //     width: 4),
                            // )
                          ),