TextField

 import "package:flutter/material.dart";


void main() {
  runApp(MyDemo(),);
}
class MyDemo extends StatelessWidget {
  MyDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Flutter TextField",
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
      ),
      home: TextFieldDemo(),
    );
  }
}
class TextFieldDemo extends StatelessWidget {
  TextFieldDemo({super.key});

  var email = TextEditingController();
  var password = TextEditingController();
  var phone = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // return FocusScope.of(context).requestFocus(FocusNode());
        return FocusManager.instance.primaryFocus?.unfocus();
      },
      child: Scaffold(
        drawer: Drawer(
          child: ListView(
            children: [
              UserAccountsDrawerHeader(
                accountName: Text("Maximilian Schwarzmuller"),
                accountEmail: Text("maximilian6522@gmail.com"),
                currentAccountPicture: Icon(Icons.account_circle, size: 85.0,),
              ),

              ListTile(
                leading: Icon(Icons.message, color: Colors.black, size: 30.0,),
                title: Text("message", style: TextStyle(fontSize: 20.0,),),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              Divider(thickness: 1.0, color: Colors.black,),

              ListTile(
                leading: Icon(Icons.account_circle, color: Colors.black, size: 30.0,),
                title: Text("profile", style: TextStyle(fontSize: 20.0,),),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              Divider(thickness: 1.0, color: Colors.black,),

              ListTile(
                leading: Icon(Icons.settings, color: Colors.black, size: 30.0,),
                title: Text("Settings", style: TextStyle(fontSize: 20.0,),),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              Divider(thickness: 1.0, color: Colors.black,),

              ListTile(
                leading: Icon(Icons.help_outline, color: Colors.black, size: 30.0,),
                title: Text("Help & feedback", style: TextStyle(fontSize: 20.0,),),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              Divider(thickness: 1.0, color: Colors.black,),

              ListTile(
                leading: Icon(Icons.restore_from_trash, color: Colors.black, size: 30.0,),
                title: Text("Trash", style: TextStyle(fontSize: 20.0,),),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
        appBar: AppBar(
          title: Text("TextField"),
        ),
        body: Container(
          decoration: BoxDecoration(
            // gradient: LinearGradient(
            //   colors: [
            //     Colors.deepPurple,
            //     // Colors.deepPurple.shade500,
            //     // Colors.deepPurple.shade400,
            //     // Colors.deepPurple.shade300,
            //     Colors.deepPurple.shade200,
            //     Colors.deepPurple.shade100,
            //     Colors.deepPurple.shade50,
            //   ],
            //   begin: FractionalOffset(1.0, 0.0),
            //   end: FractionalOffset(1.0, 1.0),
            //   stops: [0.2, 0.0, 0.0, 0.0],
            // ),

            gradient: RadialGradient(
              colors: [
                Colors.brown.shade50,
                Colors.brown.shade100,
                Colors.brown.shade200,
                // Colors.brown.shade300,
                // Colors.brown.shade400,
                // Colors.brown.shade500,
                // Colors.brown,
              ],
              focal: FractionalOffset(0.6,0.6),
            ),
          ),
          child: Center(
            child: SingleChildScrollView(
              child: Container(
                width: 330,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    CircleAvatar(
                      radius: 50.0,
                      backgroundColor: Colors.white,
                      child: Icon(Icons.account_circle, size: 100.0, color: Colors.blueGrey,),
                    ),
                    SizedBox(height: 20.0,),
                    TextField(
                      controller: email,
                      // enabled: false,
                      keyboardType: TextInputType.emailAddress,
                      decoration: InputDecoration(
                        hintText: "Enter Email here...",
                        labelText: "Email",
                        labelStyle: TextStyle(color: Colors.grey.shade600,),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(11,),
                          borderSide: BorderSide(
                            width: 2.0,
                            color: Colors.blueAccent,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(11,),
                          borderSide: BorderSide(
                            color: Colors.orangeAccent,
                            width: 2.0,
                          ),
                        ),
                        disabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(11,),
                          borderSide: BorderSide(
                            width: 2.0,
                            color: Colors.green,
                          ),
                        ),
                        // suffixText: "Username exists",
                        // suffixIcon: IconButton(
                        //   icon: Icon(Icons.remove_red_eye, color: Colors.orangeAccent,),
                        //   onPressed: () {},
                        // ),
                        prefixIcon: Icon(Icons.email, color: Colors.orangeAccent,),
                      ),
                    ),
                    SizedBox(height: 30.0,),
                    TextField(
                      controller: password,
                      obscureText: true,
                      // obscuringCharacter: "*",
                      // enabled: false,
                      keyboardType: TextInputType.visiblePassword,
                      decoration: InputDecoration(
                        hintText: "Enter password here...",
                        labelText: "password",
                        labelStyle: TextStyle(color: Colors.grey.shade600,),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(11.0,),
                          borderSide: BorderSide(
                            width: 2.0,
                            color: Colors.blueAccent,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(11,),
                          borderSide: BorderSide(
                            color: Colors.orangeAccent,
                            width: 2.0,
                          ),
                        ),
                        disabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(11.0,),
                          borderSide: BorderSide(
                            width: 2.0,
                            color: Colors.green,
                          ),
                        ),
                        prefixIcon: Icon(Icons.password, color: Colors.orange,),
                        //For Clickable effect on Icon, "IconButton()" is used(Mandatory)
                        suffixIcon: IconButton(
                          icon: Icon(Icons.remove_red_eye, color: Colors.orange,),
                          onPressed: () {},
                        ),
                      ),
                    ),
                    SizedBox(height: 30.0,),
                    TextField(
                      controller: phone,
                      // enabled: false,
                      keyboardType: TextInputType.phone,
                      decoration: InputDecoration(
                        hintText: "Enter phone no here...",
                        labelText: "phone no",
                        labelStyle: TextStyle(color: Colors.grey.shade600,),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(11.0,),
                          borderSide: BorderSide(
                            width: 2.0,
                            color: Colors.blueAccent,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(11.0,),
                          borderSide: BorderSide(
                            width: 2.0,
                            color: Colors.orange,
                          ),
                        ),
                        disabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(11.0,),
                          borderSide: BorderSide(
                            width: 2.0,
                            color: Colors.green,
                          ),
                        ),
                        prefixIcon: Icon(Icons.phone, color: Colors.orange,),
                      ),
                    ),
                    SizedBox(height: 40,),
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.black,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(11.0,),
                        ),
                        fixedSize: Size(330.0, 60.0,),
                      ),
                      onPressed: () {
                        String uEmail = email.text.toString();  //here, "toString()" is redundant
                        String uPass = password.text;
                        String uPhoneNo = phone.text.toString();

                        print("Email : $uEmail, Password : $uPass, Phone No : $uPhoneNo",);

                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) {
                              return SecondPage(uEmail: uEmail, uPass: uPass, uPhoneNo: uPhoneNo,);
                            },
                          ),
                        );

                      },
                      child: Text("Login",
                        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 25,),),
                    ),
                    SizedBox(height: 12.0,),
                    Text("Or Continue with"),
                    SizedBox(height: 12.0,),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        ElevatedButton(
                          onPressed: () {},
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.blue,
                            fixedSize: Size(120.0, 50.0,),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(17.0,),
                            ),
                          ),
                          child: Text("facebook", style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,
                          fontSize: 20.0,),),
                        ),
                        SizedBox(width: 70.0,),
                        ElevatedButton(
                          onPressed: () {},
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.blue,
                            fixedSize: Size(120.0, 50.0,),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(17.0,),
                            ),
                          ),
                          child: Text("Twitter", style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,
                          fontSize: 20.0,),),
                        ),
                      ],
                    ),
                    SizedBox(height: 50.0,),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text("Don't have an Account ?",
                        style: TextStyle(fontSize: 15.0, color: Colors.white,),),
                        Text("  Sign Up", style: TextStyle(fontSize: 15.0, color: Colors.white, fontWeight: FontWeight.bold,
                        decoration: TextDecoration.underline,),),
                      ],
                    ),
                    SizedBox(height: 11.0,),
                    Text("Forgot Password", style: TextStyle(fontSize: 15.0, color: Colors.white,
                    decoration: TextDecoration.underline, fontWeight: FontWeight.bold,),),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
/// Passing TextField Data to another page named "SecondPage" here below
class SecondPage extends StatefulWidget {
  var uEmail, uPass, uPhoneNo;

  SecondPage({super.key, this.uEmail, this.uPass, this.uPhoneNo,});

  @override
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TextField Information"),
      ),
      body: Center(
        child: Text("Your Email Address is : ${widget.uEmail}, \n\n"
                    "Your password is :  ${widget.uPass}, \n\n"
                    "Your Phone number is : ${widget.uPhoneNo},",
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold,),),
      ),
    );
  }
}

Comments

Post a Comment

Popular posts from this blog

Pagination with Bloc Pattern in Flutter

Image
  import "package:flutter/material.dart" ; import "package:flutter_bloc/flutter_bloc.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/bloc.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/event.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/state.dart" ; import "package:pagination_practice/Pagination_with_Bloc/post_repo.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return RepositoryProvider < PostRepo >( create: ( context ) => PostRepo () , child: BlocProvider < PostBloc > ( create: ( context ) => PostBloc ( context.read < PostRepo > () ) ..add ( FetchPostsEvent () ) , child: MaterialApp ( title: "Pagination" , debugShowCheckedModeBa...
Read more

Pagination First Practical in Flutter

Image
  import "package:dio/dio.dart" ; import "package:flutter/material.dart" ; import "package:flutter_spinkit/flutter_spinkit.dart" ; import "package:pagination_practice/Pagination/Model/productModel.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return MaterialApp ( title: "HomePage" , debugShowCheckedModeBanner: false, theme: ThemeData ( appBarTheme: const AppBarTheme ( backgroundColor: Colors. grey , centerTitle: true, ) , ) , home: const HomePage () , ) ; } } class HomePage extends StatefulWidget { const HomePage ( { super .key } ) ; @override State < HomePage > createState () { return HomePageState () ; } } class HomePageState extends State < HomePage > { final ScrollController scrollController = Scrol...
Read more

ExpansionPanel with ExpansionPanelList with Complete Collapse Operation in Flutter

Image
  import "package:flutter/material.dart" ; import "package:sdreatech_learning_widget/All_widgets_Ui/customWidget.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return MaterialApp ( title: "ExpansionPanel" , debugShowCheckedModeBanner: false, theme: ThemeData ( appBarTheme: const AppBarTheme ( backgroundColor: Colors. grey , centerTitle: true, ) , ) , home: const ExpansionPanelListPracticalCollapseTask () , ) ; } } class ExpansionPanelListPracticalCollapseTask extends StatefulWidget { const ExpansionPanelListPracticalCollapseTask ( { super .key } ) ; @override State < ExpansionPanelListPracticalCollapseTask > createState () => _ExpansionPanelListPracticalCollapseTaskState () ; } class _ExpansionPanelListPracticalCollapseTaskState...
Read more