smart_multi_form_fields 1.1.0

A single, production-grade Flutter form field widget rendering text, password, phone, OTP, date, dropdown, and file inputs via sealed configurations.

example/lib/main.dart

// example/lib/main.dart
//
// Complete working example for package:smart_multi_form_fields.
// Rendered on pub.dev's Example tab.

import 'package:flutter/material.dart';
import 'package:smart_multi_form_fields/smart_multi_form_fields.dart';
import 'screens/all_field_demo_screen.dart';

void main() {
  runApp(const SmartFormFieldExampleApp());
}

/// Root widget for the example application.
class SmartFormFieldExampleApp extends StatelessWidget {
  const SmartFormFieldExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Smart Form Field Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF02569B),
          brightness: Brightness.light,
        ),
        useMaterial3: true,
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(color: Color(0xFF54C5F8), width: 1.5),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(color: Color(0xFF54C5F8), width: 1.5),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(color: Color(0xFF02569B), width: 2.0),
          ),
          errorBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(color: Colors.redAccent, width: 1.5),
          ),
          focusedErrorBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: BorderSide(color: Colors.red.shade700, width: 2.0),
          ),
        ),
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF02569B),
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(color: Color(0xFF02569B), width: 1.5),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(color: Color(0xFF02569B), width: 1.5),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(color: Color(0xFF54C5F8), width: 2.0),
          ),
          errorBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: BorderSide(color: Colors.red.shade700, width: 1.5),
          ),
          focusedErrorBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(color: Colors.redAccent, width: 2.0),
          ),
        ),
      ),
      themeMode: ThemeMode.system,
      home: const ExampleFormScreen(),
    );
  }
}

/// A complete, working form demonstrating SmartFormField usage.
class ExampleFormScreen extends StatefulWidget {
  const ExampleFormScreen({super.key});

  @override
  State<ExampleFormScreen> createState() => _ExampleFormScreenState();
}

class _ExampleFormScreenState extends State<ExampleFormScreen> {
  final _nameKey = GlobalKey<SmartBaseShellState>();
  final _emailKey = GlobalKey<SmartBaseShellState>();
  final _passwordKey = GlobalKey<SmartBaseShellState>();
  final _confirmKey = GlobalKey<SmartBaseShellState>();

  final _passwordController = TextEditingController();

  String? _submittedData;

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

  void _submitForm() {
    final nameError = _nameKey.currentState?.validate();
    final emailError = _emailKey.currentState?.validate();
    final passwordError = _passwordKey.currentState?.validate();
    final confirmError = _confirmKey.currentState?.validate();

    if (nameError == null &&
        emailError == null &&
        passwordError == null &&
        confirmError == null) {
      setState(() {
        _submittedData =
            'Name: ${_nameKey.currentState?.value}\n'
            'Email: ${_emailKey.currentState?.value}\n'
            'Password: ${_passwordKey.currentState?.value}';
        'Password: ${_confirmKey.currentState?.value}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SmartFormField Demo'),
        actions: [
          IconButton(
            icon: const Icon(Icons.tune),
            tooltip: 'All Demos',
            onPressed: () => Navigator.push(
              context,
              MaterialPageRoute<void>(
                builder: (_) => const AllFieldsDemoScreen(),
              ),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // ── 1. Full Name Input ──────────────────────────────────────────
            SmartFormField(
              key: _nameKey,
              config: SmartTextConfig(
                label: 'Full Name',
                hint: 'John Doe',
                isRequired: true,
                autoCapitalizeWords: true,
                prefixIcon: const Icon(Icons.person),
              ),
            ),
            const SizedBox(height: 16),

            // ── 2. Email Address Input ──────────────────────────────────────
            SmartFormField(
              key: _emailKey,
              config: SmartTextConfig(
                label: 'Email Address',
                hint: '[e-mail]',
                isRequired: true,
                validators: [SmartValidators.email],
                prefixIcon: const Icon(Icons.email),
              ),
            ),
            const SizedBox(height: 16),

            // ── 3. Password Input with Strength Meter ───────────────────────
            SmartFormField(
              key: _passwordKey,
              config: SmartPasswordConfig(
                label: 'Password',
                hint: 'Enter your password',
                isRequired: true,
                minPasswordLength: 8,
                showStrengthMeter: true,
                controller: _passwordController,
              ),
            ),
            const SizedBox(height: 16),

            // ── 4. Confirm Password Match Input ──────────────────────────────
            SmartFormField(
              key: _confirmKey,
              config: SmartPasswordConfig(
                label: 'Confirm Password',
                hint: 'Re-enter your password',
                isRequired: true,
                showStrengthMeter: false,
                confirmPasswordController: _passwordController,
                confirmMismatchMessage: 'Passwords do not match',
              ),
            ),
            const SizedBox(height: 24),

            ElevatedButton(
              onPressed: _submitForm,
              child: const Text('Submit Registration'),
            ),
            if (_submittedData != null) ...[
              const SizedBox(height: 24),
              Card(
                color: Theme.of(context).colorScheme.primaryContainer,
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Text(
                    'Submitted Values:\n\n$_submittedData',
                    style: TextStyle(
                      color: Theme.of(context).colorScheme.onPrimaryContainer,
                    ),
                  ),
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }
}