Sign In Screen Simple UI in Flutter

 import "package:flutter/material.dart";

import "package:praxware_tasks/Custom_Widget/CustomWidget.dart";

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Sign In",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.white,
          centerTitle: true,
        ),
      ),
      home: SignInScreenTutorial(),
    );
  }
}

class SignInScreenTutorial extends StatelessWidget {
  SignInScreenTutorial({super.key});

  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        return FocusManager.instance.primaryFocus?.unfocus();
      },
      child: Scaffold(
        appBar: AppBar(
          leading: const Icon(Icons.arrow_back),
        ),
        body: Center(
          child: SizedBox(
            width: 350.0,
            child: Column(
              children: <Widget>[
                const SizedBox(height: 30.0),
                Container(
                  alignment: Alignment.centerLeft,
                  child: const Text(
                    "Sign In",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.red,
                      fontSize: 25.0,
                    ),
                  ),
                ),
                const SizedBox(height: 30.0),
                UiHelper.customTextFormField(emailController, 30.0,
                    "E-mail Address", TextInputType.emailAddress),
                const SizedBox(height: 30.0),
                UiHelper.customTextFormField(passwordController, 30.0,
                    "Password", TextInputType.visiblePassword),
                const SizedBox(height: 50.0),
                UiHelper.customElevatedButton(
                  "Log In",
                  () {},
                  Colors.red,
                  300.0,
                  50.0,
                  context,
                  Colors.white,
                  20.0,
                ),
                const SizedBox(height: 27.0),
                const Text(
                  "OR",
                  style: TextStyle(fontSize: 20.0),
                ),
                const SizedBox(height: 27.0),
                UiHelper.customElevatedButton("Sign Up", () {}, Colors.indigo,
                    300.0, 50.0, context, Colors.white, 20.0)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

import "package:flutter/material.dart";

class UiHelper {
  static customAppBar(String text) {
    return AppBar(
      title: Text(
        text,
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
      centerTitle: true,
    );
  }

  static customElevatedButton(
      String text,
      VoidCallback callback,
      Color color,
      double width,
      double height,
      BuildContext context,
      Color color2,
      double size) {
    return ElevatedButton(
      onPressed: callback,
      style: ElevatedButton.styleFrom(
        backgroundColor: color,
        fixedSize: Size(width, height),
      ),
      child: Text(
        text,
        style: TextStyle(
            fontWeight: FontWeight.bold, color: color2, fontSize: size),
      ),
    );
  }

  static customTextFormField(TextEditingController controller, double radius,
      String text, TextInputType type) {
    return TextFormField(
      controller: controller,
      keyboardType: type,
      decoration: InputDecoration(
        hintText: text,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(radius),
        ),
      ),
    );
  }
}