DEV Community

Dastani Ferdinandi
Dastani Ferdinandi

Posted on

Flutter KFC Login Ui

GitHub

Image description

`import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Login extends StatelessWidget {
  const Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          SizedBox(
            height: 100,
          ),
          SizedBox(
            height: 300,
            width: 300,
            child: Center(
              child: Image(
                  image: NetworkImage(
                      'https://1000logos.net/wp-content/uploads/2017/03/Kfc_logo-768x432.png')),
            ),
          ),
          SizedBox(
            height: 50,
          ),
          Center(
            child: SizedBox(
              width: 350,
              height: 100,
              child: TextFormField(
                keyboardType: TextInputType.emailAddress,
                decoration: InputDecoration(
                    label: Text('Enter Email'), prefixIcon: Icon(Icons.mail)),
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          SizedBox(
            height: 100,
            width: 350,
            child: TextFormField(
              keyboardType: TextInputType.visiblePassword,
              obscureText: true,
              decoration: InputDecoration(
                  label: Text("Enter Password"),
                  prefixIcon: Icon(Icons.lock),
                  suffixIcon: Icon(Icons.remove_red_eye)),
            ),
          ),
          Text("Forget Password?"),
          SizedBox(
            height: 50,
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Colors.red, // background color
              onPrimary: Colors.white, // text color
              minimumSize: Size(200, 50),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0),
              ), // set minimum size
            ),
            onPressed: () {
              // do something when the button is pressed
            },
            child: Text('Login'),
          ),
        ],
      ),
    );
  }
}`
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
bellaestel38145 profile image
Bella Estella

Creating a Flutter KFC Login UI involves designing a sleek and user-friendly interface with authentication features such as email/password login, social media sign-in, and OTP verification. Using Flutter widgets like TextField for input fields, ElevatedButton for login actions, and Firebase Authentication for backend support ensures a smooth user experience. Just like a well-structured login UI enhances user interaction, having an updated Today KFC menu with prices helps customers easily browse and order their favorite meals, ensuring a seamless and enjoyable experience.