Large Content Viewer #

A Flutter widget that mimics the iOS Large Content Viewer behavior, showing a magnified view of its child on long-press. This is particularly useful for improving accessibility for all users by making UI elements easier to see on demand.

Works on both iOS and Android.

Features #

Wraps any widget (child).
Activates on long-press.
Shows a styled, magnified popup above the child.
Popup content can be a scaled version of the child (controlled by scaleFactor) or a completely custom customOverlayChild widget.
Smooth popup appearance/disappearance.
Includes haptic feedback on activation.
Highly customizable appearance (background color, border radius, elevation, padding, constraints, text style, icon theme, content scale factor) via LargeContentViewerTheme and LargeContentViewerThemeData.
Lightweight and uses only Flutter SDK components.

Usage #

Wrap the widget you want to provide a large content view for with LargeContentViewer.

Basic Example (Scaled Child):

LargeContentViewer(
  scaleFactor: 2.5, // How much to scale the child if customOverlayChild is null
  child: IconButton(
    icon: Icon(Icons.settings),
    onPressed: () {
      // Action for settings
    },
    tooltip: 'Settings',
  ),
)

Example with Custom Overlay Child and Theming:

LargeContentViewerTheme(
  data: LargeContentViewerThemeData(
    backgroundColor: Colors.blueGrey.withOpacity(0.9),
    borderRadius: BorderRadius.circular(16.0),
    elevation: 10.0,
    padding: const EdgeInsets.all(16.0),
    textStyle: const TextStyle(fontSize: 18, color: Colors.white),
    iconTheme: const IconThemeData(size: 32, color: Colors.white),
  ),
  child: LargeContentViewer(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: const [
        Icon(Icons.home),
        Text('Home'),
      ],
    ),
    // Optional: Provide a completely custom widget for the popup
    customOverlayChild: Container(
      padding: const EdgeInsets.all(20.0),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: const [
          Icon(Icons.home, size: 40, color: Colors.lightBlueAccent),
          SizedBox(width: 12),
          Text('Enlarged Home', style: TextStyle(fontSize: 22, color: Colors.lightBlueAccent)),
        ],
      ),
    ),
  ),
)

See the example/ directory for a more detailed example using BottomNavigationBar.

Configuration #