Flutter 创建圆角的RaisedButton

Flutter 创建圆角的RaisedButton

1. MediaQuery.of(context).padding.top 获取顶部安全区域

2. RoundedRectangleBorder 设置按钮圆角样式

   import 'package:flutter/cupertino.dart';
   import 'package:flutter/material.dart';
   
   class RoundCircleButton extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Positioned(
           left: rect.left == 0 ? null : rect.left,
           top: rect.top == 0 ? null : rect.top + MediaQuery
               .of(context)
               .padding
               .top,
           right: rect.right == 0 ? null : rect.right,
           bottom: rect.bottom == 0 ? null : rect.bottom,
           child: Container(
             height: height,
             child: RaisedButton(
               onPressed: onPressed,
               color: Colors.white,
               child: Text(
                 this.title,
                 style: TextStyle(
                     color: textColor == null ? null : textColor,
                     fontSize:fontSize
                 ),
               ),
               shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(radius),
                   side: BorderSide(
                       color: borderColor == null ? null : borderColor)),
             ),
           ));
     }
   
     final double radius;
     final double borderWidth;
     final Color textColor;
     final String title;
     final double height;
     final double width;
     final Rect rect;
     final Color backgroundColor;
     final Color borderColor;
     final VoidCallback onPressed;
     final double fontSize;
   
     RoundCircleButton({
       this.title = "",
       this.radius,
       this.borderWidth,
       this.borderColor,
       this.backgroundColor,
       this.textColor = Colors.white,
       this.height,
       this.width,
       this.fontSize = 15,
       this.rect,
       @required this.onPressed});
   }
   
   
   

使用示例

MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Stack(
          children: [
            RoundCircleButton(
              onPressed: (){},
              title: "中文",
              height: 45,
              width: 120,
              radius: 22.5,
              fontSize: 17,
              backgroundColor: Colors.red,
              textColor: Colors.blue,
              borderColor: Colors.blue,
              rect: Rect.fromLTRB(0, 40, 15, 0),)
          ],
        ),
      )
    );

效果图

Screen Shot 2021-03-04 at 10.36.12.png