TextField

import "package:flutter/material.dart";

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hello Flutter",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors
            .blue, /*If Not any specific color given to TextField,then By default Theme color
        will be applied to it. we can change color of "focusedBorder","enabledBorder","disabledBorder". But the borderRadius
        should be maintained same so that UI will remain symmetric.*/
      ),
      home: FlutterApp(),
    );
  }
}

class FlutterApp extends StatelessWidget {
  var emailText =
      TextEditingController(); //TextEditingController for controller property of TextField.
  var passText = TextEditingController();

  FlutterApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const Drawer(),
      appBar: AppBar(
        title: const Text("Welcome Flutter"),
      ),
      body: Center(
        child: Container(
          width: 300,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                keyboardType: TextInputType.phone,
                /*we can add any type of keyboard using "keyboardType" & also can change
                    the symbol from prefixIcon as per the requirement*/

                controller: emailText,
                //"controller" will give the value of TextField.
                //enabled: false, //TextField will be disabled. "disabledBorder" will be applied on it.

                decoration: InputDecoration(
                  hintText: "Enter Email here...",
                  //For giving hint to user, "hintText" is used
                  focusedBorder: OutlineInputBorder(
                    //"focusedBorder" is used to give focus when tapped on it.
                    borderRadius: BorderRadius.circular(25),
                    //"borderRadius" gives shape of the TextField.
                    borderSide: const BorderSide(
                      color: Colors.pink,
                      width:
                          2, //Here "width" gives the focusedBorder's width whenever tapped on it.
                    ),
                  ),

                  enabledBorder: OutlineInputBorder(
                    //By default, TextFields are enabled.
                    borderRadius: BorderRadius.circular(25),
                    borderSide: const BorderSide(
                      color: Colors.purpleAccent,
                      /*Here color is Unfocused color. When user focused or clicked on TextField then
                          color will change to pink. we can keep different colors for Focused & Unfocused situations.*/
                      width: 2,
                    ),
                  ),

                  disabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(25),
                    borderSide: const BorderSide(
                      color: Colors.green,
                      width: 2,
                    ),
                  ),

                  /*border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(25),
                        borderSide: BorderSide(
                          color: Colors.pinkAccent,
                        ),
                      ),*/
                  /*suffixText: "Username exists",*/

                  /*To show Username exists which is already exists or To show any Text at
                         right end side in suffixText, in this way we can show.*/

                  suffixIcon: IconButton(
                    /*IconButton is a button which is expect Icon as a child and have Tap feature. when
                      we want to "Clickable feature" on Icon then use IconButton. otherwise we can use Icon directly. It's
                      not compulsory to take IconButton.*/

                    icon: const Icon(
                      Icons.remove_red_eye,
                      color: Colors.pink,
                    ),
                    onPressed: () {},
                  ),
                  prefixIcon:
                      const Icon(Icons.email, color: Colors.pink), //Unclickable
                  //prefixIcon: IconButton(icon: Icon(Icons.email, color: Colors.pink), onPressed: (){},),  //clickable
                ),
              ),
              Container(
                height: 30.0,
              ),
              TextField(
                controller: passText,
                obscureText: true,
                //To hide password, use obscureText
                //obscuringCharacter: "*",  //This is the another format for hiding the password.
                //obscuringCharacter: "-",
                decoration: InputDecoration(
                  hintText: "Enter password here...",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(11),
                    borderSide: const BorderSide(
                      color: Colors.pinkAccent,
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 50.0),
              ElevatedButton(
                onPressed: () {
                  String uEmail = emailText.text
                      .toString(); //Here, "toString()" is redundant.
                  String uPass = passText
                      .text; //"text" property of the controller to get the value entered in the TextField

                  print("Email: $uEmail, Pass: $uPass");
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,
                  fixedSize: const Size(350.0, 50.0),
                ),
                child: const Text(
                  "Login",
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20.0,
                      color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}