Email Autocomplete

readme.md

Email Autocomplete

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

const List<String> popularEmailDomains = [
  'gmail.com',
  'yahoo.com',
  'hotmail.com',
  'yahoo.co.uk',
  'outlook.com',
  'icloud.com',
  'aol.com',
  'protonmail.com',
  'mail.com',
  'yandex.com',
  'zoho.com',
  'gmx.com',
  'fastmail.com',
  'inbox.com',
  'rediffmail.com',
  'live.com',
  'mailinator.com',
  'tutanota.com',
  'rocketmail.com',
  'aol.co.uk',
];

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Theme.of(context).colorScheme.background,
        appBar: AppBar(
          title: const Text('Email Autocomplete'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 16.0),
            Text(
              'Email',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 8.0),
            Autocomplete<String>(
              optionsBuilder: (TextEditingValue textEditingValue) {
                if (textEditingValue.text.contains('@')) {
                  final prefix = textEditingValue.text
                      .substring(0, textEditingValue.text.indexOf('@') + 1);

                  List<String> generatedDomainList = popularEmailDomains
                      .map((domain) => '$prefix$domain')
                      .where(
                          (domain) => domain.startsWith(textEditingValue.text))
                      .toList();

                  return generatedDomainList;
                } else {
                  return const Iterable<String>.empty();
                }
              },
              fieldViewBuilder: (BuildContext context,
                  TextEditingController textEditingController,
                  FocusNode focusNode,
                  VoidCallback onFieldSubmitted) {
                return TextField(
                  controller: textEditingController,
                  focusNode: focusNode,
                  onSubmitted: (String value) {
                    onFieldSubmitted();
                  },
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Theme.of(context).colorScheme.surface,
                    hintText: 'Enter your email',
                    focusedBorder: const OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    ),
                    enabledBorder: const OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}