Skeuomorphic UI for Flutter

A production-ready Flutter package bringing back the rich, tactile, hyper-realistic design language of the iOS 6 and early macOS era.

Every widget feels physical. We use textures, depth, shadows, reflections, material surfaces, and spring-physics animations to mimic real-world objects.

Features

• 🎨 22+ Hyper-Realistic Components: Buttons, cards, sliders, knobs, switches, and more.
• 🧱 Material Variants: Metal, Leather, Wood, Glass, Rubber, Corkboard, and Resin surfaces.
• 💡 Dynamic Lighting: Convex/concave gloss gradients and directional bevels.
• 🕳️ Physical Depth: Multi-layered shadow arrays for raised, pressed, floating, and inset states.
• ⚙️ Procedural Noise: Built-in grain textures via CustomPainter (no external asset dependencies).
• 🔩 Physical Details: Decorative screws, stitching, engraved/embossed typography.
• 🚀 Zero Dependencies: Built entirely with Flutter native primitives (CustomPainter, ShaderMask, BoxDecoration).

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  skeuomorphic_ui: ^1.0.0

Quick Start

Wrap your app or screen in a SkeuTheme:

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return SkeuTheme(
      data: SkeuThemeData.light(),
      child: const MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: SkeuColors.linen,
      appBar: SkeuAppBar(title: 'My App'),
      body: Center(
        child: SkeuButton(
          onPressed: () => print('Pressed!'),
          variant: SkeuButtonVariant.metal,
          child: const Text('Metal Button'),
        ),
      ),
    );
  }
}

Material Variants

Most containers and buttons support multiple physical materials:

SkeuCard(
  variant: SkeuCardVariant.leather, // wood, metal, paper, corkboard, glass
  child: const Text('Leather Panel with Stitching'),
)

Component Overview

• Buttons: SkeuButton, SkeuIconButton, SkeuToggleButton
• Controls: SkeuSlider, SkeuKnob, SkeuSwitch, SkeuCheckbox, SkeuRadioButton, SkeuStepperInput
• Inputs: SkeuTextField, SkeuSearchBar
• Navigation: SkeuAppBar, SkeuNavigationBar, SkeuTabBar
• Display: SkeuGauge, SkeuProgressBar, SkeuBadge, SkeuTooltip, SkeuListTile, SkeuDivider
• Surfaces: SkeuCard, showSkeuDialog(), showSkeuBottomSheet()

Typography

The library includes physical typography extensions. Instead of flat text, you can apply engraved (recessed) or embossed (raised) effects:

Text(
  'Engraved Text',
  style: SkeuTextStyles.engraved(16),
)

Example App

The package includes a comprehensive example app with four demo screens:

1. Widget Gallery: A kitchen-sink view of all components on a corkboard.
2. Audio Mixer: A studio mixer layout using sliders, knobs, and switches on dark rubber and gunmetal.
3. Notes: A skeuomorphic notepad using paper cards and text fields.
4. Settings: A realistic configuration screen on walnut wood.

Run the example:

cd example
flutter run

Performance Note

Procedural noise textures (used in materials like metal and rubber) are beautiful but can be slightly heavy on rasterization. The library automatically wraps textured surfaces in RepaintBoundary to minimize rebuild costs. If you need maximum performance on low-end devices, you can disable textures globally:

SkeuThemeData.light(enableTextures: false)