View UI Flutter

A comprehensive Flutter UI widget library providing consistent theming, responsive design, BLoC state management integration, and Material 3 support.

Features

• 30+ Pre-built Widgets: Text, buttons, text fields, cards, dialogs, selectors, loading indicators, and more
• Factory Constructor Pattern: Clean, consistent API across all widgets
• Material 3 Theming: Built on FlexColorScheme with full light/dark mode support
• Responsive Design: Adaptive layouts using flutter_adaptive_scaffold breakpoints
• BLoC Integration: Built-in state management with MenuBloc for theme and navigation
• Platform Adaptive: Widgets automatically adapt to iOS/Android styles

Installation

Add to your pubspec.yaml:

dependencies:
  view_ui_flutter: ^1.0.0

Then run:

flutter pub get

Quick Start

1. Initialize Theme and BLoC

import 'package:view_ui_flutter/view_ui_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize shared preferences
  final shp = ShpUi();
  await shp.initPrefs();

  runApp(
    MultiBlocProvider(
      providers: [
        BlocProvider(create: (_) => MenuBloc(shp: shp)),
      ],
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MenuBloc, MenuState>(
      builder: (context, state) {
        return MaterialApp(
          theme: ThemeModel().themeLight,
          darkTheme: ThemeModel().themeDark,
          themeMode: state.theme,
          home: const HomePage(),
        );
      },
    );
  }
}

2. Use Widgets

// Text widgets (9 sizes available)
TextWidget.textSmall(texto: 'Small text')
TextWidget.titleMedium(texto: 'Title')
TextWidget.headLineLarge(texto: 'Headline')

// Buttons (6 types)
ButtonWidget.filled(
  titulo: 'Submit',
  onChanged: () => print('Pressed'),
)

ButtonWidget.outlined(
  icono: Icon(Icons.add),
  titulo: 'Add Item',
  onChanged: () {},
)

// Text fields (8 types)
TextfieldWidget.texto(
  titulo: 'Name',
  controller: _controller,
)

TextfieldWidget.email(
  titulo: 'Email',
  controller: _emailController,
)

TextfieldWidget.contrasena(
  titulo: 'Password',
  controller: _passwordController,
)

// Cards (4 variants)
TarjetaWidget.rounded(
  titulo: 'Card Title',
  subtitulo: 'Subtitle',
  child: Text('Content'),
)

// Loading indicators
LoadingWidget()
LoadingWidget.blur(descripcion: 'Loading...')
LoadingWidget.linear()

// Dialogs
DialogWidget(
  titulo: 'Confirm',
  child: Text('Are you sure?'),
  tituloConfirmar: 'Yes',
  tituloCancelar: 'No',
  onAceptar: () {},
  onCancelar: () {},
)

Widget Catalog

Text Widgets

Constructor	Description
TextWidget.textSmall()	Small body text (13sp)
TextWidget.textMedium()	Medium body text (15sp)
TextWidget.textLarge()	Large body text (17sp)
TextWidget.titleSmall()	Small title (20sp)
TextWidget.titleMedium()	Medium title (22sp)
TextWidget.titleLarge()	Large title (24sp)
TextWidget.headLineSmall()	Small headline (28sp)
TextWidget.headLineMedium()	Medium headline (30sp)
TextWidget.headLineLarge()	Large headline (32sp)

Button Widgets

Constructor	Description
ButtonWidget.filled()	Filled button
ButtonWidget.outlined()	Outlined button
ButtonWidget.text()	Text-only button
ButtonWidget.iconFilled()	Filled button with icon
ButtonWidget.iconOutlined()	Outlined button with icon
ButtonWidget.iconText()	Text button with icon
SegmentedButtonWidget.segmented()	Segmented button group

TextField Widgets

Constructor	Description
TextfieldWidget.texto()	General text input
TextfieldWidget.contrasena()	Password field with visibility toggle
TextfieldWidget.email()	Email input with @ keyboard
TextfieldWidget.numero()	Numeric input
TextfieldWidget.busqueda()	Search field with suggestions
TextfieldWidget.validaClave()	Password validation with confirmation
TextfieldWidget.telefono()	Phone input with country code
TextfieldWidget.fecha()	Date picker field

Card Widgets

Constructor	Description
TarjetaWidget.cuadrada()	Square card
TarjetaWidget.logoElevado()	Card with elevated logo
TarjetaWidget.borderColor()	Card with colored border
TarjetaWidget.rounded()	Rounded card

Other Widgets

• LoadingWidget - Circular loading indicator
• LoadingWidget.blur() - Loading with blur background
• LoadingWidget.linear() - Linear progress indicator
• DialogWidget - Platform-adaptive dialogs
• SwitchWidget - Platform-adaptive switch
• CheckboxWidget - Checkbox with title
• DropdownWidget - Dropdown selector
• SelectorSexoWidget - Gender selector
• SelectorTipoDocumentoWidget - Document type selector
• SelectorThemeWidget - Theme toggle (light/dark)
• ScaffoldWidget - Responsive scaffold with side menu

Responsive Design

Use breakpoints for adaptive layouts:

SlotLayout(
  config: {
    Breakpoints.small: SlotLayout.from(
      builder: (_) => MobileView(),
    ),
    Breakpoints.medium: SlotLayout.from(
      builder: (_) => TabletView(),
    ),
    Breakpoints.large: SlotLayout.from(
      builder: (_) => DesktopView(),
    ),
  },
)

Breakpoints:

• small: < 600dp
• medium: 600-840dp
• large: > 840dp

Theme Customization

// Access theme model
final theme = ThemeModel();

// Initialize with custom schemes
theme.initTheme(
  schemeLight: FlexScheme.blue,
  schemeDark: FlexScheme.blueDark,
);

// Toggle theme via BLoC
context.read<MenuBloc>().add(
  OnUiEvent(evento: EnvironmentView.onCambiarThemeEvent),
);

// Check current theme in widgets
final isDarkMode = context.read<MenuBloc>().state.theme == ThemeMode.dark;

Web Setup

For web builds using webview, add to /web/index.html:

<script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>

Dependencies

This package includes:

• flutter_bloc - State management
• go_router - Navigation
• flex_color_scheme - Theming
• flutter_adaptive_scaffold - Responsive layouts
• google_fonts - Typography

License

Copyright 2025 Roble Sistemas

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

See LICENSE for details.