만든 물건

마우스 호버에 의해 라벨이 표시되는 아이콘 버튼을 이미지했습니다.
마우스 호버시이므로 Flutter Web 상정입니다.

구현

모든 소스

class AccordionIconButton extends StatefulWidget {
  final IconData _iconData;
  final double _iconSize;
  final String _label;
  final double _maxWidth;
  final void Function()? _onTap;

  const AccordionIconButton(
      {Key? key,
      required IconData iconData,
      required double iconSize,
      required String label,
      required double maxWidth,
      void Function()? onTap})
      : _iconData = iconData,
        _iconSize = iconSize,
        _label = label,
        _maxWidth = maxWidth,
        _onTap = onTap,
        super(key: key);

  @override
  State<StatefulWidget> createState() => _State(width: this._iconSize);
}

class _State extends State<AccordionIconButton> {
  static const double INITIAL_OPACITY = 0.0;

  double opacity;
  double width;

  _State({
    required this.width,
  })  : opacity = INITIAL_OPACITY,
        super();

  @override
  Widget build(BuildContext context) {
    final Duration duration = Duration(milliseconds: 250);
    final Widget iconWidget = Icon(
      widget._iconData,
      size: widget._iconSize,
    );
    final Widget textWidget = Text(
      widget._label,
      softWrap: false,
      overflow: TextOverflow.fade,
    );

    return AnimatedContainer(
      constraints: BoxConstraints(maxWidth: widget._maxWidth),
      width: this.width,
      curve: Curves.easeIn,
      duration: duration,
      child: InkWell(
        borderRadius: BorderRadius.all(Radius.circular(10.0)),
        onHover: (isHover) {
          setState(() {
            if (isHover) {
              opacity = 1.0;
              width = double.infinity;
            } else {
              opacity = INITIAL_OPACITY;
              width = widget._iconSize;
            }
          });
        },
        onTap: widget._onTap,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            iconWidget,
            Flexible(
                child: AnimatedOpacity(
              curve: Curves.easeIn,
              duration: duration,
              opacity: this.opacity,
              child: textWidget,
            ))
          ],
        ),
      ),
    );
  }
}

Github

설명

매우 간단합니다.

마우스 호버 판단

InkWell 클래스의 onHover(bool) 로 검출할 수 있습니다.
호버 상태를 결정하고 전체 너비와 텍스트 항목의 투명도를 변경하고 있습니다.

그 외에도 MouseRegion 클래스등에서도 마우스의 판정은 가능합니다.
(이쪽은 마우스 커서의 위치 등까지 추적 가능)

      InkWell(
        onHover: (isHover) {
          setState(() {
            if (isHover) {
              opacity = 1.0;
              width = double.infinity;
            } else {
              opacity = INITIAL_OPACITY;
              width = widget._iconSize;
            }
          });
        },
        ...
      )

애니메이션 표시

Animated 계 위젯을 사용하여 실현하고 있습니다.
자세한 해설은 공식이나 이 사이트 가 매우 참고가 됩니다.

AnimatedContainer(
      constraints: BoxConstraints(maxWidth: widget._maxWidth),
      width: this.width, // ←widthが変更された際に指定されたアニメーションでWidgetが変化する
      curve: Curves.easeIn,
      duration: duration,
      ...
)

요약

즐거운! ! ! (KONAMI 느낌) 😊

조금 만진 정도입니다만 마우스 조작의 검지 등 모바일 이외의 용도에서도 사용하기 쉬운 라이브러리가 갖추어져 있는 인상이었습니다.

코피페 할 수 없거나, 휠 클릭이 효과가 없거나 등 아직도 있습니다만,
FlutterWeb에서도 여러가지 만들어 가고 싶네요!