import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(child: MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Text Field Example',
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.green,
          title: const Text('Text Field Example', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30),),
        ),
        body: const Center(
          child: SafeArea(
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: TextFieldExample(),
            ),
          ),
        ),
      ),
    )
    );

  }
}

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

  @override
  _TextFieldExampleState createState() => _TextFieldExampleState();
}

class _TextFieldExampleState extends State {
  // Properties
    final TextEditingController _controller = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextField(
          controller: _controller,
          focusNode: _focusNode,
          onChanged: (value) {
            print('Value changed: $value');
          },
          onSubmitted: (value) {
            print('Submitted: $value');
          },
          decoration: InputDecoration(
            labelText: 'Enter Text',
            hintText: 'Type something here...',
            prefixIcon: const Icon(Icons.person),
            suffixIcon: IconButton(
              icon: const Icon(Icons.clear),
              onPressed: () {
                _controller.clear();
              },
            ),
            border: const OutlineInputBorder(),
            fillColor: Colors.grey[200],
            filled: true,
            enabledBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: Colors.blue, width: 2.0),
            ),
            focusedBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: Colors.green, width: 2.0),
            ),
            errorBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red, width: 2.0),
            ),
            focusedErrorBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red, width: 2.0),
            ),
          ),
          keyboardType: TextInputType.text,
          textInputAction: TextInputAction.done,
          style: const TextStyle(
            color: Colors.black,
            fontSize: 16.0,
          ),
          cursorColor: Colors.blue,
          cursorWidth: 2.0,
          cursorRadius: const Radius.circular(5),
          maxLength: 20,
          maxLines: 1,
          autocorrect: true,
          autofocus: false,
          obscureText: false,
          textAlign: TextAlign.start,
          textAlignVertical: TextAlignVertical.center,
          readOnly: false,
          showCursor: true,
          enableSuggestions: true,
        ),
      ],
    );
  }
}