import 'package:flutter/material.dart';

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

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

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  bool isObscureText = true;
  final myController1 = TextEditingController();
  final myController2 = TextEditingController();
  @override
  void dispose() {
    myController1.dispose();
    myController2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    // final width = MediaQuery.of(context).size.width;

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            SizedBox(height: height * 1 / 5),
            TextField(
              controller: myController1,
              decoration: const InputDecoration(
                  labelText: 'Username',
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.green,
                      width: 2,
                    ),
                  )),
            ),
            const SizedBox(height: 20),
            TextField(
              controller: myController2,
              decoration: InputDecoration(
                suffixIcon: IconButton(
                  icon: Icon(
                    isObscureText ? Icons.visibility_off : Icons.visibility,
                  ),
                  onPressed: () {
                    setState(() {
                      isObscureText = !isObscureText;
                    });
                  },
                ),
                labelText: 'Password',
                focusedBorder: const OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.green,
                    width: 2,
                  ),
                ),
              ),
              obscureText: isObscureText,
            ),
            TextButton(
              onPressed: () {
                setState(() {});
              },
              child: const Text('Đăng nhập'),
            ),
            Text(
                'Tên đăng nhập và mật khẩu là \nUsername: ${myController1.text}\nPassword: ${myController2.text}')
          ],
        ),
      ),
    );
  }
}