smart_datetime_input 0.0.3

A smart, segmented, and editable text field for handling Date, Time, and DateTime input in Flutter. Supports validation, auto-jump, pasting, and custom localization.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'DateTime Field Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
        useMaterial3: true,
        inputDecorationTheme: const InputDecorationTheme(
          filled: true,
          fillColor: Colors.white,
          border: OutlineInputBorder(),
        ),
      ),
      home: const ExampleHome(),
    );
  }
}

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

  @override
  State<ExampleHome> createState() => _ExampleHomeState();
}

class _ExampleHomeState extends State<ExampleHome> {
  final _formKey = GlobalKey<FormState>();
  DateTime? _selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[50],
      appBar: AppBar(
        title: const Text('DateTime Field 📅'),
        backgroundColor: Colors.teal,
        foregroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // ---------------------------------------------------------
              // 1. Basic Example (Date Only)
              // ---------------------------------------------------------
              const SectionTitle("1. Basic Date Input"),
              SmartDateTimeField(
                mode: DateTimeMode.date,
                decoration: const InputDecoration(
                  labelText: 'Enter Date',
                  hintText: 'DD / MM / YYYY',
                ),
                onChanged: (value) {
                  setState(() => _selectedDate = value);
                },
              ),
              const SizedBox(height: 5),
              Text(
                "Selected: ${_selectedDate?.toString().split(' ')[0] ?? 'None'}",
                style: const TextStyle(color: Colors.grey),
              ),

              const SizedBox(height: 30),

              // ---------------------------------------------------------
              // 2. Validation & Time (Required)
              // ---------------------------------------------------------
              const SectionTitle("2. Validation (Date & Time)"),
              SmartDateTimeField(
                mode: DateTimeMode.dateTime,
                decoration: const InputDecoration(
                  labelText: 'Meeting Time',
                  suffixIcon: Icon(Icons.event_note),
                ),
                // This validator handles the "null" logic internally
                validator: (value) {
                  if (value == null) {
                    return 'Please ensure date and time are fully entered';
                  }
                  return null;
                },
              ),

              const SizedBox(height: 30),

              // ---------------------------------------------------------
              // 3. Arabic Localization (Using Theme)
              // ---------------------------------------------------------
              const SectionTitle("3. Arabic Theme & Styling"),
              // Wrapping this section with a Theme to show localization
              SmartDateTimeFieldTheme(
                labels: const DateTimeLabels.arabic(),
                child: Directionality(
                  textDirection: TextDirection.rtl,
                  child: SmartDateTimeField(
                    mode: DateTimeMode.date,
                    dateSeparator: "-", // Custom separator
                    decoration: const InputDecoration(
                      labelText: 'تاريخ الميلاد',
                      isDense: true, // Compact layout
                    ),
                  ),
                ),
              ),

              const SizedBox(height: 30),

              // ---------------------------------------------------------
              // 4. Time Only (Custom Colors)
              // ---------------------------------------------------------
              const SectionTitle("4. Time Only (Custom Style)"),
              SmartDateTimeField(
                mode: DateTimeMode.time,
                showPickerIcon: false, // Hide icon, let user type only
                style: const TextStyle(
                  color: Colors.purple,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  letterSpacing: 2,
                ),
                decoration: InputDecoration(
                  labelText: 'Alarm Time',
                  fillColor: Colors.purple.shade50,
                  border: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.purple.shade200),
                  ),
                ),
              ),

              const SizedBox(height: 40),

              // ---------------------------------------------------------
              // Submit Button
              // ---------------------------------------------------------
              ElevatedButton.icon(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('Processing Data...'),
                        backgroundColor: Colors.green,
                      ),
                    );
                  }
                },
                icon: const Icon(Icons.check),
                label: const Text('Submit Form'),
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.all(16),
                  backgroundColor: Colors.teal,
                  foregroundColor: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class SectionTitle extends StatelessWidget {
  final String title;
  const SectionTitle(this.title, {super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: Text(
        title,
        style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black87),
      ),
    );
  }
}