preview_hub 0.0.4 copy "preview_hub: ^0.0.4" to clipboard
preview_hub: ^0.0.4 copied to clipboard

A runnable gallery for previewing a design system's widgets, icons, images, animations and font families on a real device.

example/lib/main.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:preview_hub/preview_hub.dart';

import 'network_assets.dart';
import 'network_lotties.dart';
import 'network_rives.dart';
import 'preview_widgets.dart';

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

/// Ordinary client app; its bundled assets are what the gallery will preview.
class ExampleApp extends StatelessWidget {
  /// Creates the example app.
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
    title: 'Preview Hub Example',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF6366F1)),
    ),
    home: const CounterPage(title: 'Preview Hub Example'),
  );
}

/// Counter screen standing in for the client's own UI.
class CounterPage extends StatefulWidget {
  /// Creates the counter screen.
  const CounterPage({required this.title, super.key});

  /// Label shown in the app bar.
  final String title;

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  final ValueNotifier<int> _counter = ValueNotifier<int>(0);

  @override
  void dispose() {
    _counter.dispose();
    super.dispose();
  }

  void _openPreviewHub() {
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (BuildContext context) => const PreviewHubDashboard(
          config: PreviewHubConfig(
            networkImages: allNetworkImages,
            networkLotties: lotties,
            networkRives: riveUrls,
            widgets: previewWidgets,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      ),
      floatingActionButton: kDebugMode
          ? FloatingActionButton.extended(
              heroTag: 'open-preview-hub',
              onPressed: _openPreviewHub,
              icon: const Icon(Icons.grid_view_rounded),
              label: const Text('Preview Hub'),
            )
          : null,
    );
  }
}
3
likes
160
points
535
downloads
screenshot

Documentation

Documentation
API reference

Publisher

unverified uploader

Weekly Downloads

A runnable gallery for previewing a design system's widgets, icons, images, animations and font families on a real device.

Repository (GitHub)
View/report issues

Topics

#design-system #preview #gallery #widget #developer-tools

License

MIT (license)

Dependencies

flutter, flutter_svg, http, lottie, rive

More

Packages that depend on preview_hub