import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Field Test',
      home: Scaffold(
        body: HomeScreen(),
      ),
    );
  }
}

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

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

class HomeScreenState extends State<HomeScreen> {
  late final TextEditingController _textFieldController;
  late bool _isAutoCorrectionOn;

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

    _textFieldController = TextEditingController();
    _isAutoCorrectionOn = true;
  }

  @override
  void dispose() {
    _textFieldController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    InputDecoration inputDecoration = InputDecoration(
      labelText: 'Type a text',
      hintText: 'Type a text',
      floatingLabelBehavior: FloatingLabelBehavior.never,
      contentPadding: const EdgeInsets.all(16),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(24),
        borderSide: const BorderSide(
          width: 1,
          color: Color.fromRGBO(0, 0, 0, 0.05),
        ),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(24),
        borderSide: const BorderSide(
          width: 1,
          color: Color.fromRGBO(127, 202, 222, 1),
        ),
      ),
    );

    return SingleChildScrollView(
      padding: EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Text('Auto correction'),
              Checkbox(
                value: _isAutoCorrectionOn,
                onChanged: (value) {
                  setState(() {
                    _isAutoCorrectionOn = value ?? true;
                  });
                },
              ),
            ],
          ),
          SizedBox(height: 50),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Text field value:'),
              SizedBox(width: 10),
              Expanded(
                child: Text(_textFieldController.text)
              ),
            ],
          ),
          SizedBox(height: 10),
          TextField(
            controller: _textFieldController,
            autocorrect: _isAutoCorrectionOn,
            maxLength: 200,
            minLines: 1,
            maxLines: 5,
            buildCounter: (
              BuildContext context, {
                int? currentLength,
                int? maxLength,
                bool? isFocused
              }
            ) => null,
            keyboardType: TextInputType.text,
            decoration: inputDecoration,
            onChanged: (value) {
              setState(() {
              });
            },
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _textFieldController.text = '';
              });
            },
            child: Text('Clear'),
          ),
        ],
      ),
    );
  }
}