textfieldpackages 0.0.1

A customizable and feature-rich TextField widget for Flutter applications with built-in validation, styling, and accessibility features.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TextField Package Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const ExampleScreen(),
    );
  }
}

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

  @override
  State<ExampleScreen> createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  final TextEditingController _basicController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _multilineController = TextEditingController();
  bool _obscureText = true;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextField Examples'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Basic TextField with Clear Button',
                style: TextStyle(fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            CustomTextField(
              controller: _basicController,
              hintText: 'Enter text',
              labelText: 'Basic Input',
              showClearButton: true,
              onChanged: (value) => print('Text changed: $value'),
            ),
            const SizedBox(height: 24),

            const Text('Password Field with Custom Styling',
                style: TextStyle(fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            CustomTextField(
              controller: _passwordController,
              hintText: 'Enter password',
              labelText: 'Password',
              obscureText: _obscureText,
              borderRadius: 12.0,
              borderColor: Colors.purple,
              backgroundColor: Colors.purple.withOpacity(0.1),
              suffixIcon: IconButton(
                icon: Icon(_obscureText ? Icons.visibility : Icons.visibility_off),
                onPressed: () {
                  setState(() {
                    _obscureText = !_obscureText;
                  });
                },
              ),
            ),
            const SizedBox(height: 24),

            const Text('Email Field with Validation',
                style: TextStyle(fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            CustomTextField(
              controller: _emailController,
              hintText: 'Enter email',
              labelText: 'Email',
              keyboardType: TextInputType.emailAddress,
              borderColor: Colors.blue,
              backgroundColor: Colors.blue.withOpacity(0.1),
              onSubmitted: (value) {
                if (!value.contains('@')) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Please enter a valid email')),
                  );
                }
              },
            ),
            const SizedBox(height: 24),

            const Text('Multiline TextField',
                style: TextStyle(fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            CustomTextField(
              controller: _multilineController,
              hintText: 'Enter multiple lines',
              labelText: 'Notes',
              maxLines: 5,
              borderRadius: 8.0,
              borderColor: Colors.green,
              backgroundColor: Colors.green.withOpacity(0.1),
            ),
            const SizedBox(height: 24),

            const Text('Form with Validation',
                style: TextStyle(fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            Form(
              child: Column(
                children: [
                  CustomTextField(
                    hintText: 'Enter username',
                    labelText: 'Username',
                    borderColor: Colors.teal,
                    backgroundColor: Colors.teal.withOpacity(0.1),
                    autovalidate: true,
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Username is required';
                      }
                      if (value.length < 3) {
                        return 'Username must be at least 3 characters';
                      }
                      return null;
                    },
                  ),
                  const SizedBox(height: 16),
                  CustomTextField(
                    hintText: 'Enter a strong password',
                    labelText: 'Password',
                    obscureText: true,
                    borderColor: Colors.teal,
                    backgroundColor: Colors.teal.withOpacity(0.1),
                    autovalidate: true,
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Password is required';
                      }
                      if (value.length < 8) {
                        return 'Password must be at least 8 characters';
                      }
                      if (!value.contains(RegExp(r'[A-Z]'))) {
                        return 'Password must contain at least one uppercase letter';
                      }
                      if (!value.contains(RegExp(r'[0-9]'))) {
                        return 'Password must contain at least one number';
                      }
                      return null;
                    },
                    errorStyle: const TextStyle(color: Colors.red),
                    errorBorderColor: Colors.red,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}