import 'package:flutter/material.dart';

​

void main() {

  runApp(MyApp());

}

​

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Login Page',

      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,

      ),

      home: LoginPage(),

    );

  }

}

​

class LoginPage extends StatefulWidget {

  @override

  _LoginPageState createState() => _LoginPageState();

}

​

class _LoginPageState extends State<LoginPage> {

  final TextEditingController emailController = TextEditingController();

  final TextEditingController passwordController = TextEditingController();

  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

​

  @override

  void initState() {

    super.initState();

  }

​

  @override

  void dispose() {

    emailController.dispose();

    passwordController.dispose();

    super.dispose();

  }

​

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: Padding(

          padding: const EdgeInsets.all(16.0),

          child: Form(

            key: formKey,

            child: Column(

              mainAxisAlignment: MainAxisAlignment.center,

              children: [

                // Email Input

                TextFormField(

                  controller: emailController,

                  decoration: InputDecoration(

                    labelText: 'Email',

                    hintText: 'Enter your email',

                    prefixIcon: Icon(Icons.email),

                    border: OutlineInputBorder(

                      borderRadius: BorderRadius.circular(12.0),

                    ),

                  ),

                  validator: (value) {

                    if (value.isEmpty) {

                      return 'Please enter your email';

                    }

                    return null;

                  },

                ),

                SizedBox(height: 20),

​

                // Password Input

                TextFormField(

                  controller: passwordController,

                  obscureText: true,

                  decoration: InputDecoration(

                    labelText: 'Password',

                    hintText: 'Enter your password',

                    prefixIcon: Icon(Icons.lock),

                    border: OutlineInputBorder(

                      borderRadius: BorderRadius.circular(12.0),

                    ),

                  ),

                  validator: (value) {

                    if (value.isEmpty) {

                      return 'Please enter your password';

                    }

                    return null;

                  },

                ),

                SizedBox(height: 30),

​

                // Login Button

                ElevatedButton(

                  onPressed: () {

                    if (formKey.currentState.validate()) {

                      // Handle login logic

                      // For example, you can access the entered values using:

                      // emailController.text

                      // passwordController.text

                    }

                  },

                  style: ElevatedButton.styleFrom(

                    primary: Colors.blue,

                    shape: RoundedRectangleBorder(

                      borderRadius: BorderRadius.circular(20),

                    ),

                  ),

                  child: Padding(

                    padding: const EdgeInsets.symmetric(

                      vertical: 12.0,

                      horizontal: 24.0,

                    ),

                    child: Text(

                      'Login',

                      style: TextStyle(fontSize: 18),

                    ),

                  ),

                ),

              ],

            ),

          ),

        ),

      ),

    );

  }

}