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 #

Button Widgets #

TextField Widgets #

Card Widgets #

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.