smart_chip_field 1.0.0

A Gmail-style chip input widget for Flutter. Create chips from text input with proper backspace handling, validation, and customization.

example/lib/main.dart

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smart Chip Field Example',
      debugShowCheckedModeBanner: false,
      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 List<String> _emails = [];
  final List<String> _tags = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Smart Chip Field Examples'),
        elevation: 2,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          // Example 1: Email Recipients
          const Text(
            '1. Email Recipients',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          SmartChipField(
            hintText: 'To: Add recipients',
            validator: ChipValidators.email,
            separators: const [',', ' ', ';'],
            initialChips: const ['[e-mail]'],
            onChanged: (chips) {
              setState(() {
                _emails.clear();
                _emails.addAll(chips);
              });
            },
          ),
          const SizedBox(height: 8),
          Text(
            'Recipients: ${_emails.length}',
            style: TextStyle(color: Colors.grey.shade600),
          ),

          const SizedBox(height: 32),

          // Example 2: Tags
          const Text(
            '2. Tags (No Spaces)',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          SmartChipField(
            hintText: 'Add tags',
            validator: ChipValidators.combine([
              ChipValidators.noSpaces,
              ChipValidators.minLength(3),
            ]),
            onChanged: (chips) {
              setState(() {
                _tags.clear();
                _tags.addAll(chips);
              });
            },
          ),
          const SizedBox(height: 8),
          Wrap(
            spacing: 8,
            children: _tags.map((tag) => Chip(label: Text('#$tag'))).toList(),
          ),

          const SizedBox(height: 32),

          // Example 3: Custom Styling
          const Text(
            '3. Custom Chip Design',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          SmartChipField(
            hintText: 'Custom chips',
            chipBuilder: (text, onDelete) {
              return Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Colors.purple.shade200, Colors.blue.shade200],
                  ),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Icon(Icons.star, size: 14, color: Colors.white),
                    const SizedBox(width: 4),
                    Text(text, style: const TextStyle(color: Colors.white)),
                    const SizedBox(width: 4),
                    GestureDetector(
                      onTap: onDelete,
                      child: const Icon(Icons.close,
                          size: 14, color: Colors.white),
                    ),
                  ],
                ),
              );
            },
          ),

          const SizedBox(height: 32),

          // Instructions
          Card(
            color: Colors.blue.shade50,
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '📖 How to Use',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Colors.blue.shade900,
                    ),
                  ),
                  const SizedBox(height: 8),
                  const Text('• Type text and press Space, Enter, or Comma'),
                  const Text('• Press Backspace once to highlight last chip'),
                  const Text(
                      '• Press Backspace again to delete highlighted chip'),
                  const Text('• Click any chip to remove it'),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}