view_ui_flutter 1.0.0

view_ui_flutter: ^1.0.0 copied to clipboard

example/example.dart

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:view_ui_flutter/bloc/menu/menu_bloc.dart';
import 'package:view_ui_flutter/data/shp_ui.dart';
import 'package:view_ui_flutter/theme/theme.dart';
import 'package:view_ui_flutter/widgets/widgets.dart';

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

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

  // Initialize theme
  ThemeModel().initTheme();

  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(
          title: 'View UI Flutter Example',
          theme: ThemeModel().lightTheme,
          darkTheme: ThemeModel().darkTheme,
          themeMode: state.theme,
          home: const ExamplePage(),
        );
      },
    );
  }
}

class ExamplePage extends StatefulWidget {
  const ExamplePage({super.key});

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _obscurePassword = true;

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final isDarkMode = context.read<MenuBloc>().state.theme == ThemeMode.dark;

    return Scaffold(
      appBar: AppBar(
        title: TextWidget.titleMedium(texto: 'View UI Flutter Demo'),
        actions: [
          // Theme toggle button
          SelectorTema(
            iconChange: isDarkMode,
            onPressed: () {
              final newTheme = isDarkMode ? ThemeMode.light : ThemeMode.dark;
              context.read<MenuBloc>().add(OnCambiarThemeEvent(theme: newTheme));
            },
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Text widgets showcase
            _buildSection('Text Widgets', [
              TextWidget.textSmall(texto: 'TextWidget.textSmall()'),
              TextWidget.textMedium(texto: 'TextWidget.textMedium()'),
              TextWidget.textLarge(texto: 'TextWidget.textLarge()'),
              TextWidget.titleSmall(texto: 'TextWidget.titleSmall()'),
              TextWidget.titleMedium(texto: 'TextWidget.titleMedium()'),
              TextWidget.headLineSmall(texto: 'TextWidget.headLineSmall()'),
            ]),

            const SizedBox(height: 24),

            // Button widgets showcase
            _buildSection('Button Widgets', [
              ButtonWidget.filled(
                titulo: 'Filled Button',
                onChanged: () => print('Filled pressed'),
              ),
              const SizedBox(height: 8),
              ButtonWidget.outlined(
                titulo: 'Outlined Button',
                onChanged: () => print('Outlined pressed'),
              ),
              const SizedBox(height: 8),
              ButtonWidget.iconFilled(
                icono: Icons.add,
                titulo: 'Icon Filled',
                onChanged: () => print('Icon filled pressed'),
              ),
              const SizedBox(height: 8),
              ButtonWidget.iconOutlined(
                icono: Icons.edit,
                titulo: 'Icon Outlined',
                onChanged: () => print('Icon outlined pressed'),
              ),
            ]),

            const SizedBox(height: 24),

            // TextField widgets showcase
            _buildSection('TextField Widgets', [
              TextfieldWidget.texto(
                labelTitulo: 'Name',
                controller: _nameController,
                hintText: 'Enter your name',
              ),
              const SizedBox(height: 12),
              TextfieldWidget.email(
                labelTitulo: 'Email',
                controller: _emailController,
                hintText: 'Enter your email',
              ),
              const SizedBox(height: 12),
              TextfieldWidget.contrasena(
                labelTitulo: 'Password',
                controller: _passwordController,
                hintText: 'Enter password',
                obscureText: _obscurePassword,
                habilitarSeleccionInteractiva: true,
                ontap: () {
                  setState(() {
                    _obscurePassword = !_obscurePassword;
                  });
                },
              ),
            ]),

            const SizedBox(height: 24),

            // Card widgets showcase
            _buildSection('Card Widgets', [
              TarjetaWidget.rounded(
                titulo: 'Rounded Card',
                descripcion1: 'This is a card description',
                imagenCentro: '',
                onTap: () => print('Card pressed'),
              ),
            ]),

            const SizedBox(height: 24),

            // Other widgets
            _buildSection('Other Widgets', [
              Row(
                children: [
                  TextWidget.textMedium(texto: 'Switch: '),
                  SwichWidget(
                    value: false,
                    onChanged: (value) => print('Switch: $value'),
                  ),
                ],
              ),
              const SizedBox(height: 12),
              CheckboxWidget(
                titulo: 'Checkbox with title',
                value: true,
                onChanged: (value) => print('Checkbox: $value'),
              ),
            ]),
          ],
        ),
      ),
    );
  }

  Widget _buildSection(String title, List<Widget> children) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TextWidget.titleLarge(texto: title),
        const SizedBox(height: 12),
        ...children,
      ],
    );
  }
}