v360_ui 1.0.2

A comprehensive Flutter UI component library built on top of ForUI with styled buttons, dialogs, tiles, cards, and input controls.

v360_ui is a comprehensive Flutter UI component library providing a collection of reusable, well-designed widgets for building modern user interfaces.

Features

• Display Components: Alert, Avatar, Badge, Icon, Progress, Info Item
• Form Components: Button, Checkbox, Select, Text Field
• Layout Components: Card, Collapsible Panel, Divider, Image Container, List, List Item, Table, Tile, Tile Group
• Overlay Components: Dialog, Popover, Popover Menu, Toaster
• Typography Components: Detail, Text List, Title
• Common Utilities: Color definitions and utilities

Getting started

Add the package:

flutter pub add v360_ui

Or add it to pubspec.yaml manually:

dependencies:
  v360_ui: ^1.0.2

v360_ui is built on ForUI and re-exports it, so a single import gives you both the v360_ui widgets and the ForUI primitives (FTheme, FThemes, FScaffold, FToaster, …):

import 'package:v360_ui/v360_ui.dart';

Usage

1. Set up the theme

Every v360_ui widget wraps a ForUI widget, so the app must sit under an FTheme. Wire it up once in your root widget:

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

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

  @override
  Widget build(BuildContext context) {
    final theme = FThemes.zinc.light; // or .dark

    return MaterialApp(
      localizationsDelegates: FLocalizations.localizationsDelegates,
      supportedLocales: FLocalizations.supportedLocales,
      theme: theme.touch.toApproximateMaterialTheme(),
      builder: (context, child) => FTheme(
        data: theme.touch, // use theme.desktop on desktop/web
        child: FToaster(child: FTooltipGroup(child: child!)),
      ),
      home: const FScaffold(
        header: FHeader(title: Text('Home')),
        child: Center(child: VTitle('Hello v360_ui')),
      ),
    );
  }
}

2. Use the components

// Buttons — variant, size, icons, tooltip, full width
VButton(
  onPress: () => submit(),
  variant: VButtonVariant.primary,
  prefix: const Icon(Icons.save),
  child: const Text('Save changes'),
)

// Alerts
VAlert(
  icon: Icons.warning_amber_outlined,
  title: 'Payment failed',
  subtitle: 'Your transaction could not be processed.',
  variant: VAlertVariant.destructive,
)

// Badges
VBadge(variant: VBadgeVariant.success, child: const Text('Active'))

// Form controls
VTextField(label: 'Email', type: VTextFieldType.email, controller: emailController)

VSelect(
  label: 'Role',
  value: role,
  items: const {'admin': 'Administrator', 'viewer': 'Viewer'},
  onChange: (value) => setState(() => role = value),
)

VCheckbox(
  label: 'I agree to the terms',
  value: agreed,
  onChange: (value) => setState(() => agreed = value),
)

// Layout
VCard(
  title: const Text('Gratitude'),
  subtitle: const Text('Readiness to show appreciation.'),
  content: const Text('Card body'),
  footer: VButton(onPress: () {}, child: const Text('Submit')),
)

VTileGroup(
  label: const Text('Connected devices'),
  children: [
    VTile(title: const Text('Router'), prefix: const Icon(Icons.router), onPress: () {}),
    VTile(title: const Text('Printer'), prefix: const Icon(Icons.print), onPress: () {}),
  ],
)

3. Dialogs

// Confirmation dialog — resolves to true / false / null
final confirmed = await VDailog.confirmDialog(
  context: context,
  title: const Text('Delete item?'),
  body: const Text('This action cannot be undone.'),
  onConfirm: () => deleteItem(),
);

// Prompt for a value
await TextEditDialog.show(
  context,
  title: 'Rename',
  initialValue: 'Untitled',
  onSave: (value) async => rename(value),
);

await NumericEditDialog.show(
  context,
  title: 'Set threshold',
  initialValue: 42,
  suffix: '%',
  onSave: (value) async => setThreshold(value),
);

Full runnable example

See the example/ directory (also shown on the Example tab on pub.dev) for a complete app that renders every component above.

Additional information

For contributing or reporting issues, please refer to the project repository.