App/Flutter

[ FLUTTER 커스텀 ] ActiveButton

거북 2021. 12. 13. 11:08

* Screen

 

* active_button.dart

class ActiveButton extends StatefulWidget {
  final EdgeInsets padding;
  final dynamic onPressed;
  final String title;
  bool isActive;
  final Color activeColor;
  final Color inativeColor;

  ActiveButton({
    Key? key,
    this.padding = const EdgeInsets.symmetric(
        vertical: 15, horizontal: 20),
    required this.onPressed,
    this.title = 'ActiveButton',
    this.isActive = true,
    this.activeColor = Colors.black,
    this.inativeColor = const Color(0xFFCCCCCC),
  }) : super(key: key);

  @override
  _ActiveButtonState createState() => _ActiveButtonState();
}

class _ActiveButtonState extends State<ActiveButton> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: widget.padding,
      child: OutlinedButton(
        onPressed: widget.onPressed,
        style: OutlinedButton.styleFrom(
          side: BorderSide(
              color:
                  widget.isActive ? widget.activeColor : widget.inativeColor),
          shape: RoundedRectangleBorder(
            borderRadius: RadiusConfig.shallow,
          ),
          primary: widget.isActive ? widget.inativeColor : widget.activeColor,
          backgroundColor:
              widget.isActive ? widget.activeColor : widget.inativeColor,
        ),
        child: Container(
          alignment: Alignment.center,
          height: 50,
          child: Text('${widget.title}',
              style: TextStyle(
                  fontWeight: NotoSansKR.kBold, color: ColorConfig.white)),
        ),
      ),
    );
  }
}
 

 

* example

ActiveButton(
  onPressed: () {},
  title: '확인',
),