foreground 1.0.2

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

example/lib/main.dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  // Generating a list of items for the demo.
  final List<String> items = List.generate(20, (i) => 'Item $i');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        backgroundColor: Colors.grey.shade200,
        appBar: AppBar(title: Text('Hover Card Elevation Demo')),
        body: CardList(items: items),
      ),
    );
  }
}

class CardList extends StatefulWidget {
  const CardList({super.key, required this.items});

  final List<String> items;

  @override
  State<CardList> createState() => _CardListState();
}

class _CardListState extends State<CardList> {
  final _listViewKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      key: _listViewKey,
      padding: EdgeInsets.symmetric(vertical: 16),
      itemCount: widget.items.length,
      itemBuilder: (context, index) {
        return CardListItem(
          listViewKey: _listViewKey,
          item: widget.items[index],
        );
      },
    );
  }
}

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)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}