Flutter 自定义SwitchButton

效果：

（AppBar中间的SwitchButton）

代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

typedef SingleCallback<int> = void Function(int obj);

class HomeSwitchButton extends StatefulWidget {
    
    

  final String? onString;
  final String? offString;
  final bool pressed;
  final SingleCallback? onTap;

  HomeSwitchButton({
    
    
    Key? key,
    required this.onString,
    required this.offString,
    required this.pressed,
    required this.onTap
  });

  @override
  State<StatefulWidget> createState() {
    
    
    // TODO: implement createState
    return HomeSwitchButtonState();
  }

}

class HomeSwitchButtonState extends State<HomeSwitchButton> {
    
    

  @override
  Widget build(BuildContext context) {
    
    
    // TODO: implement build
    return _switchButton();
  }

  Widget _switchButton() {
    
    
    BoxDecoration BoxDecoration_left1 = BoxDecoration(
        color: Colors.pinkAccent,
        border: Border.all(
            width: 0.5, style: BorderStyle.solid, color: Colors.white),
        borderRadius: BorderRadius.circular(20));
    BoxDecoration BoxDecoration_left2 = BoxDecoration(
        color: Colors.white,
        border: Border.all(
            width: 0.5, style: BorderStyle.solid, color: Colors.white),
        borderRadius: BorderRadius.circular(20));
    BoxDecoration BoxDecoration_right1 = BoxDecoration(
        color: Colors.white,
        border: Border.all(
            width: 0.5, style: BorderStyle.solid, color: Colors.white),
        borderRadius: BorderRadius.circular(20));
    BoxDecoration BoxDecoration_right2 = BoxDecoration(
        color: Colors.pinkAccent,
        border: Border.all(
            width: 0.5, style: BorderStyle.solid, color: Colors.white),
        borderRadius: BorderRadius.circular(20));

    TextStyle textStyle = const TextStyle(fontSize: 12.0, color: Colors.white);
    TextStyle textStyle1 = const TextStyle(fontSize: 12.0, color: Color.fromARGB(255, 83, 81, 81));

    return Container(
      width: 100,
      height: 28,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        children: <Widget>[
          Container(
            width: 50,
            height: 28,
            alignment: Alignment.center,
            padding: const EdgeInsets.only(top: 3, bottom: 3, right: 3, left: 3),
            decoration: widget.pressed ? BoxDecoration_left1 : BoxDecoration_left2,
            child: GestureDetector(
                child: Text(widget.onString ?? "", style: widget.pressed ? textStyle : textStyle1, ),
                onTap: () {
    
    
                  if (widget.onTap != null){
    
    
                    widget.onTap!(0);
                  }
                }),
          ),
          Container(
            width: 50,
            height: 28,
            alignment: Alignment.center,
            padding: const EdgeInsets.only(top: 3, bottom: 3, right: 3, left: 3),
            decoration: widget.pressed ? BoxDecoration_right1 : BoxDecoration_right2,
            child: GestureDetector(
                child: Text(widget.offString ?? "", style: widget.pressed ? textStyle1 : textStyle),
                onTap: () {
    
    
                  if (widget.onTap != null){
    
    
                    widget.onTap!(1);
                  }
                }),
          ),
        ],
      ),
    );
  }

}

使用：

HomeSwitchButton(onString: "推荐", offString: "关注", pressed: _pressed, onTap: (obj){
    
    
	setState(() {
    
    
		print(obj);
	});
}),