Login Page UI in Flutter

Here we implement some essential component in Login Page with Flutter. here we take a Title, App Logo, Username Input box, Password Input box and Login Button.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        body: Center(
            child: Column(children: [
          SizedBox(height: 70),
          Text("Login Page",
              style: TextStyle(
                fontSize: 28.0,
                fontWeight: FontWeight.bold,
              )),
          SizedBox(height: 50),
          ClipRRect(
            borderRadius: BorderRadius.circular(100.0),
            child: Image.network('https://via.placeholder.com/150', height: 150),
          ),
          SizedBox(height: 50),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 12.0),
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Enter Username',
              ),
            ),
          ),
          SizedBox(height: 10),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 12.0),
            child: TextField(
              obscureText: true,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Enter Password',
              ),
            ),
          ),
          SizedBox(height: 20),
          RaisedButton(child: Text("Login"), onPressed: () {}),
        ])),
      ),
    );
  }
}

ClipRRect widget is used to make Image Circular.

TextField Widget is the input box widget to get input from User. It has some properties like

• obscureText: true means is it Password Field
• decoration: to give TextField Border, hint Text, label Text. here, hint and label text are different