Skip to content

Instantly share code, notes, and snippets.

@Nash0x7E2

Nash0x7E2/interactive_card.dart

Last active August 31, 2022 20:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Nash0x7E2/1e046b3f465ac14ecaf3969812342273 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Nash0x7E2/1e046b3f465ac14ecaf3969812342273 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Nash0x7E2 revised this gist Jun 9, 2021. 1 changed file with 12 additions and 18 deletions.
    30 changes: 12 additions & 18 deletions interactive_card.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    /// Implementation of [Card] using the new [MaterialStateProperty] for handling
    /// and reacting to user interactions.
    class InteractiveCard extends StatefulWidget {
    @@ -62,12 +61,6 @@ class _InteractiveCardState extends State<InteractiveCard> {
    });
    }

    void _handleFocus(bool isFocused) {
    setState(() {
    _updateState(MaterialState.focused, isFocused);
    });
    }

    void _handleHover(bool isHovered) {
    setState(() {
    _updateState(MaterialState.hovered, isHovered);
    @@ -101,20 +94,21 @@ class _InteractiveCardState extends State<InteractiveCard> {
    borderOnForeground: widget.borderOnForeground,
    clipBehavior:
    widget.clipBehavior ?? cardTheme.clipBehavior ?? Clip.none,
    child: InkResponse(
    hoverColor: Colors.transparent,
    onFocusChange: _handleFocus,
    onTap: _handleTap,
    onTapDown: _handleTapDown,
    onTapCancel: _handleTapCancel,
    onHover: _handleHover,
    child: Semantics(
    explicitChildNodes: !widget.semanticContainer,
    child: widget.child,
    child: MouseRegion(
    onExit: (_) => _handleHover(false),
    onHover: (_) => _handleHover(true),
    child: GestureDetector(
    onTapDown: _handleTapDown,
    onTap: _handleTap,
    onTapCancel: _handleTapCancel,
    child: Semantics(
    explicitChildNodes: !widget.semanticContainer,
    child: widget.child,
    ),
    ),
    ),
    ),
    ),
    );
    }
    }
    }
  2. Nash0x7E2 created this gist Jun 9, 2021.
    120 changes: 120 additions & 0 deletions interactive_card.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,120 @@

    /// Implementation of [Card] using the new [MaterialStateProperty] for handling
    /// and reacting to user interactions.
    class InteractiveCard extends StatefulWidget {
    const InteractiveCard({
    Key? key,
    this.color,
    this.shadowColor,
    this.elevation,
    this.shape,
    this.borderOnForeground = true,
    this.margin,
    this.clipBehavior,
    this.child,
    this.semanticContainer = true,
    }) : super(key: key);

    final MaterialStateProperty<Color>? color;

    final MaterialStateProperty<Color>? shadowColor;

    final MaterialStateProperty<double>? elevation;

    final MaterialStateProperty<ShapeBorder>? shape;

    final bool borderOnForeground;

    final Clip? clipBehavior;

    final EdgeInsetsGeometry? margin;

    final bool semanticContainer;

    final Widget? child;

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

    class _InteractiveCardState extends State<InteractiveCard> {
    final Set<MaterialState> _states = <MaterialState>{};

    void _updateState(MaterialState state, bool value) {
    value ? _states.add(state) : _states.remove(state);
    }

    void _handleTapDown(TapDownDetails details) {
    setState(() {
    _updateState(MaterialState.pressed, true);
    });
    }

    void _handleTapCancel() {
    setState(() {
    _updateState(MaterialState.pressed, false);
    });
    }

    void _handleTap() {
    setState(() {
    _updateState(MaterialState.pressed, false);
    });
    }

    void _handleFocus(bool isFocused) {
    setState(() {
    _updateState(MaterialState.focused, isFocused);
    });
    }

    void _handleHover(bool isHovered) {
    setState(() {
    _updateState(MaterialState.hovered, isHovered);
    });
    }

    @override
    Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final CardTheme cardTheme = CardTheme.of(context);

    return Semantics(
    container: widget.semanticContainer,
    child: Container(
    margin: widget.margin ?? cardTheme.margin ?? const EdgeInsets.all(4.0),
    child: Material(
    type: MaterialType.card,
    shadowColor: widget.shadowColor?.resolve(_states) ??
    cardTheme.shadowColor ??
    theme.shadowColor,
    color: widget.color?.resolve(_states) ??
    cardTheme.color ??
    theme.cardColor,
    elevation:
    widget.elevation?.resolve(_states) ?? cardTheme.elevation ?? 1.0,
    shape: widget.shape?.resolve(_states) ??
    cardTheme.shape ??
    const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(4.0)),
    ),
    borderOnForeground: widget.borderOnForeground,
    clipBehavior:
    widget.clipBehavior ?? cardTheme.clipBehavior ?? Clip.none,
    child: InkResponse(
    hoverColor: Colors.transparent,
    onFocusChange: _handleFocus,
    onTap: _handleTap,
    onTapDown: _handleTapDown,
    onTapCancel: _handleTapCancel,
    onHover: _handleHover,
    child: Semantics(
    explicitChildNodes: !widget.semanticContainer,
    child: widget.child,
    ),
    ),
    ),
    ),
    );
    }
    }