Text Fields and Formsخانەکانی دەق و فۆرمەکان

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.all(16),
      child: TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'User Name',
          hintText: 'Enter Your Name',
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.all(16),
      child: TextField(
        maxLength: 11, // also shows a counter such as 4/11
        decoration: InputDecoration(
          icon: Icon(Icons.person), // outside the box
          prefixIcon: Icon(Icons.phone), // inside, at the start
          suffixIcon: Icon(Icons.check_circle), // inside, at the end
          labelText: 'Phone',
          hintText: '0750 123 4567',
          helperText: 'We call you only about your order',
          border: OutlineInputBorder(),
          filled: true, // a light background colour
        ),
      ),
    );
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(16),
      children: [
        const TextField(
          keyboardType: TextInputType.emailAddress, // a keyboard with @
          textInputAction: TextInputAction.next, // the Enter key says Next
          autocorrect: false,
          decoration: InputDecoration(labelText: 'Email'),
        ),
        TextField(
          keyboardType: TextInputType.number, // digits only on the keyboard
          inputFormatters: [FilteringTextInputFormatter.digitsOnly],
          decoration: const InputDecoration(labelText: 'Age'),
        ),
        const TextField(
          obscureText: true, // shows dots instead of letters
          decoration: InputDecoration(labelText: 'Password'),
        ),
        const TextField(
          maxLines: 4, // a bigger box for an address or a message
          textCapitalization: TextCapitalization.sentences,
          decoration: InputDecoration(labelText: 'Address'),
        ),
      ],
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  State<LiveGreeting> createState() => _LiveGreetingState();
}

class _LiveGreetingState extends State<LiveGreeting> {
  String _name = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          decoration: const InputDecoration(labelText: 'Name'),
          // called after every change: each letter typed or deleted
          onChanged: (String text) {
            setState(() => _name = text);
          },
        ),
        const SizedBox(height: 16),
        Text('Hello, $_name (${_name.characters.length} letters)'),
      ],
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  State<CityForm> createState() => _CityFormState();
}

class _CityFormState extends State<CityForm> {
  // Created once, when the State is created — never inside build().
  final TextEditingController _cityController = TextEditingController();

  @override
  void dispose() {
    _cityController.dispose(); // free its resources
    super.dispose();
  }

  void _send() {
    final String city = _cityController.text.trim(); // read it now
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Delivery to $city')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _cityController,
          decoration: InputDecoration(
            labelText: 'City',
            suffixIcon: IconButton(
              tooltip: 'Clear',
              icon: const Icon(Icons.clear),
              onPressed: () => _cityController.clear(), // write to it
            ),
          ),
        ),
        const SizedBox(height: 16),
        FilledButton(onPressed: _send, child: const Text('Send')),
      ],
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  State<NameForm> createState() => _NameFormState();
}

class _NameFormState extends State<NameForm> {
  // The key that lets us reach the Form's state from the button.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            decoration: const InputDecoration(labelText: 'Name'),
            // Return an error message, or null when the value is fine.
            validator: (String? value) {
              if (value == null || value.trim().isEmpty) {
                return 'Please enter your name';
              }
              return null;
            },
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              // Runs every validator; true only if all return null.
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Saved')),
                );
              }
            },
            child: const Text('Submit'),
          ),
        ],
      ),
    );
  }
}

// Small validator functions you can reuse in many forms.

String? requiredField(String? value) {
  if (value == null || value.trim().isEmpty) return 'This field is required';
  return null;
}

String? emailField(String? value) {
  final v = value?.trim() ?? '';
  if (v.isEmpty) return 'Please enter your email';
  // A simple check: something@something.something
  final ok = RegExp(r'^[^@\s]+@[^@\s]+\.[^@\s]+$').hasMatch(v);
  return ok ? null : 'This does not look like an email address';
}

String? ageField(String? value) {
  final age = int.tryParse(value ?? ''); // null if it is not a number
  if (age == null) return 'Please enter a number';
  if (age < 16 || age > 99) return 'Age must be between 16 and 99';
  return null;
}

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: LoginPage()));

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _hidePassword = true;

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

  void _logIn() {
    if (!_formKey.currentState!.validate()) return; // show the errors
    // Here a real app sends the data to its server over HTTPS.
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Welcome, ${_emailController.text.trim()}')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Log in')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            children: [
              TextFormField(
                controller: _emailController,
                keyboardType: TextInputType.emailAddress,
                textInputAction: TextInputAction.next,
                autofillHints: const [AutofillHints.email],
                decoration: const InputDecoration(
                  labelText: 'Email',
                  prefixIcon: Icon(Icons.email_outlined),
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  final v = value?.trim() ?? '';
                  if (v.isEmpty) return 'Please enter your email';
                  if (!v.contains('@')) return 'An email address has an @';
                  return null;
                },
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _passwordController,
                obscureText: _hidePassword,
                textInputAction: TextInputAction.done,
                autofillHints: const [AutofillHints.password],
                onFieldSubmitted: (_) => _logIn(),
                decoration: InputDecoration(
                  labelText: 'Password',
                  prefixIcon: const Icon(Icons.lock_outline),
                  border: const OutlineInputBorder(),
                  suffixIcon: IconButton(
                    tooltip: _hidePassword ? 'Show password' : 'Hide password',
                    icon: Icon(
                      _hidePassword ? Icons.visibility : Icons.visibility_off,
                    ),
                    onPressed: () =>
                        setState(() => _hidePassword = !_hidePassword),
                  ),
                ),
                // At log-in only check that something was typed:
                // length rules belong to the sign-up form.
                validator: (value) => (value == null || value.isEmpty)
                    ? 'Please enter your password'
                    : null,
              ),
              const SizedBox(height: 24),
              SizedBox(
                width: double.infinity,
                child: FilledButton(onPressed: _logIn, child: const Text('Log in')),
              ),
            ],
          ),
        ),
      ),
    );
  }
}