Foreground

A Flutter package that provides a widget for showing a widget in the foreground.

Features

  • Show a widget in the foreground
  • Clean foreground removal on mouse exit

Installation

Add the following to your pubspec.yaml:

dependencies:
  foreground: ^1.0.0

Usage

Here's a simple example of how to use the Foreground widget:

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

class CardListItem extends StatefulWidget {
  const CardListItem({
    super.key,
    required this.item,
    required this.listViewKey,
  });

  final String item;
  final GlobalKey listViewKey;

  @override
  State<CardListItem> createState() => _CardListItemState();
}

class _CardListItemState extends State<CardListItem> {
  bool _isHovering = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ConstrainedBox(
        constraints: BoxConstraints(maxWidth: 300),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 16),
          child: MouseRegion(
            onEnter: (_) => setState(() => _isHovering = true),
            onExit: (_) => setState(() => _isHovering = false),
            child: Foreground(
              clipBoundsKey: widget.listViewKey,
              overlay: _isHovering,
              child: Card(
                elevation: _isHovering ? 8 : 2,
                margin: EdgeInsets.zero,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                child: ListTile(title: Text(widget.item)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Libraries

foreground