Flutter-如何使可重復使用的按鈕更改其圖像和顏色？

Question

我有一個按鈕，可以在多個不同頁面上使用。 我希望能夠更改圖像並在按下按鈕時用一種顏色填充OutlineButton。 如何做到這一點？

class BackArrowButton extends StatelessWidget {
  final Widget child;
  final GestureTapCallback onPressed;
  BackArrowButton({@required this.onPressed, this.child});

  @override
  Widget build(BuildContext context) {
    return OutlineButton(
      padding: const EdgeInsets.all(15.0),
      child: child,
      borderSide: BorderSide(width: 1.0, color: Color(0xff1A1A1A)),
      highlightElevation: 0.0,
      highlightedBorderColor: Color(0xFF1A1A1A),
      splashColor: Color(0x1F1A1A1A),
      shape: CircleBorder(),
      onPressed: onPressed,
    );
  }

這就是我在多個頁面上顯示的按鈕。

BackArrowButton(
  child: ClipOval(
    child: Container(
      child: Image.asset(
        'assets/images/icons/arrow_back.png',
      ),
    ),
  ),
  onPressed: () {
    Navigator.pop(context, '/home');
  },
),

Answer 1

將按鈕設置為statefullWidget，然后將setState添加到onPress調用中。

class BackArrowButton extends StatefulWidget {
  final Widget child;
  final GestureTapCallback onPressed;

  BackArrowButton({@required this.onPressed, this.child});

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


class _BackArrowButtonState extends State<BackArrowButton> {



  @override
  void initState() {
    _color = Colors.green;
    super.initState();
  }

  Color _color;
  @override
  Widget build(BuildContext context) {
    return OutlineButton(
      padding: const EdgeInsets.all(15.0),
      child: widget.child,
      borderSide: BorderSide(width: 1.0, color: Color(0xff1A1A1A)),
      highlightElevation: 0.0,
      highlightedBorderColor: _color,
      splashColor: Color(0x1F1A1A1A),
      shape: CircleBorder(),
      onPressed: (){
        setState((){
           _color = Colors.red;
        });
        widget.onPressed();
      },
    );
  }
}