Pen Settings

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Flutter

              
                import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: LoginPage(),
    ),
  );
}
 
 
class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
} 

class _LoginPageState extends State<LoginPage>
    with SingleTickerProviderStateMixin {

  /// Switch login/signUp section
  TabController tabController;
 
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

   Future<String> tokenFuture;
  Device device;

  final List<Tab> tabLabel = <Tab>[
    Tab(
      child: Text(
        'EXISTING',
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
    ),
    Tab(
      child: Text(
        'NEW',
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
    ),
  ];

  @override
  void initState() {
    super.initState();

    tabController = TabController(length: 2, vsync: this);
    tokenFuture = null;

  }

  @override
  Widget build(BuildContext context) {
    device = Device(
        MediaQuery.of(context).size.height, MediaQuery.of(context).size.width);


    return   Scaffold(
        body: SingleChildScrollView(
          child: Stack(
            alignment: Alignment.center,
            children: [
              /// Login Background
              Container(
                height: device.deviceHeight,
                width: device.deviceWidth,
               decoration: BoxDecoration(
                    image: DecorationImage(image: NetworkImage('https://i.imgur.com/xXHOcBl.jpg' ),fit: BoxFit.fill)
                  ),
                child: Container(
                  /// 2 Images at Corners
                  child: Stack(
                    children: [
                      Align(
                        alignment: Alignment(-1.1, -1.2),
                        child: Opacity(
                            opacity: 0.5,
                            child: Image.network(
                              'https://i.imgur.com/vtSAkUK.png',
                              height: device.isMobile ? 250 : 300,
                              width: device.isMobile ? 250 : 300,
                            )),
                      ),
                      Align(
                        alignment: Alignment(-1.1, -1.2),
                        child: Image.network('https://i.imgur.com/vtSAkUK.png',
                            height: device.isMobile ? 200 : 250,
                            width: device.isMobile ? 200 : 250),
                      ),
                      Align(
                          alignment: Alignment(1.1, 1.3),
                          child: Image.network('https://i.imgur.com/cndiNbG.png',
                              height: 300,
                              width: device.isMobile ? 150 : 300))
                    ],
                  ),
                ),
              ),

              /// Body of Login, After Auth Checked
              Container(
                height: device.deviceHeight,
                width: device.deviceWidth * 0.90,
                child: body(),
              ),
            ],
          ),
        ),
      
    );
  }

  Widget body() {
    return Container(
      child: Flex(
        direction: device.isMobile ? Axis.vertical : Axis.horizontal,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          /// Logo Section UI
          Flexible(
              fit: FlexFit.loose,
              flex: 1,
              child: Container(child: logoDesign())),

          /// Login Form UI
          Flexible(
            fit: FlexFit.loose,
            flex: 2,
            child: Container(
              padding: const EdgeInsets.only(top: 20.0),
              child: Container(
                padding: const EdgeInsets.all(10.0),
                width: device.isMobile
                    ? device.deviceWidth * .90
                    : device.deviceWidth * .50,
                child: loginForm(),
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// Login TAB UI
  Column loginForm() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          fit: FlexFit.loose,
          flex: 1,
          child: Container(
            alignment: Alignment.center,
            height: 50,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(27.5),
                border: Border.all(color: Colors.white)),
            child: TabBar(
              onTap: (i) {},
              controller: tabController,
              indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(27.5),
                gradient: LinearGradient(
                  begin: Alignment(1.0, 0.0),
                  end: Alignment(-1.0, 0.0),
                  colors: [const Color(0xffff470b), const Color(0xfffca10e)],
                  stops: [0.0, 1.0],
                ),
              ),
              indicatorColor: Theme.of(context).primaryColor,
              labelColor: Colors.white,
              unselectedLabelColor: Colors.white,
              tabs: tabLabel,
            ),
          ),
        ),
        Padding(padding: EdgeInsets.only(top: 20)),
        Flexible(
          fit: FlexFit.loose,
          flex: 2,
          child: TabBarView(
              controller: tabController,
              children: <Widget>[loginWidget(), signUpWidget()]),
        ),
      ],
    );
  }

  /// Logo Section UI
  Widget logoDesign() {
    double iconSize = device.isMobile ? 100 : 150;

    return Container(
      height: device.deviceHeight,
      width: device.deviceWidth,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: iconSize,
            width: iconSize,
            margin: EdgeInsets.all(20),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(device.deviceWidth * .12),
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  blurRadius: 1.0,
                  spreadRadius: 2.0,
                ),
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 8.0,
                  spreadRadius: 3.0,
                ),
              ],
            ),
            child: CircleAvatar(
              radius: iconSize,
              backgroundColor: Colors.white,
              child: Padding(
                padding: const EdgeInsets.all(5.0),
                child: Image.network(
                  "https://i.imgur.com/z2MD5vV.png",
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 10.0),
            child: Text(
              "Let's get started now",
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: device.isMobile ? 25 : 30,
                  color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }

  /// Login Form UI
  Widget loginWidget() {
    return Container(
      alignment: Alignment.center,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Flexible(
            fit: FlexFit.loose,
            flex: 1,
            child: Container(
              padding: const EdgeInsets.only(top: 10, right: 10, left: 10),
              child: TextFormField(
                style: TextStyle(color: Colors.white),
                decoration: InputDecoration(
                  labelText: "Email",
                  labelStyle: TextStyle(color: Colors.white),
                  enabledBorder: const OutlineInputBorder(
                    borderSide:
                        const BorderSide(color: Colors.white, width: 0.0),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                        color: Theme.of(context).accentColor, width: 0.0),
                  ),
                ),
                controller: emailController,
              ),
            ),
          ),
          Flexible(
            fit: FlexFit.loose,
            flex: 1,
            child: Container(
              padding: const EdgeInsets.only(top: 20, right: 10, left: 10),
              child: TextField(
                style: TextStyle(color: Colors.white),
                obscureText: true,
                decoration: InputDecoration(
                  labelStyle: TextStyle(color: Colors.white),
                  labelText: "Password",
                  enabledBorder: const OutlineInputBorder(
                    borderSide:
                        const BorderSide(color: Colors.white, width: 0.0),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                        color: Theme.of(context).accentColor, width: 0.0),
                  ),
                ),
                controller: passwordController,
              ),
            ),
          ),
          Flexible(
            fit: FlexFit.loose,
            flex: 1,
            child: GestureDetector(
              onTap: () =>   null
                   ,
              child: Container(
                width: 200,
                height: 50,
                margin: EdgeInsets.only(top: 20),
                child: Container(
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(27.5),
                    gradient: LinearGradient(
                      begin: Alignment(1.0, 0.0),
                      end: Alignment(-1.0, 0.0),
                      colors: [
                        const Color(0xffff470b),
                        const Color(0xfffca10e)
                      ],
                      stops: [0.0, 1.0],
                    ),
                  ),

                  padding: EdgeInsets.all(12),
                  // color: Theme.of(context).primaryColor,
                  child: Text('LOGIN',
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                              fontWeight: FontWeight.bold)),
                ),
              ),
            ),
          ),
          Flexible(
            fit: FlexFit.loose,
            flex: 1,
            child: GestureDetector(
              onTap: () => resetPassword(),
              child: Padding(
                padding: EdgeInsets.all(15.0),
                child: Text(
                  "Forget Password",
                  style: TextStyle(
                      decoration: TextDecoration.underline,
                      color: Colors.white),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  /// SignUp Form UI
  Widget signUpWidget() {
    return Container(
      alignment: Alignment.center,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            padding: const EdgeInsets.only(top: 10, right: 10, left: 10),
            child: TextFormField(
              style: TextStyle(color: Colors.white),
              decoration: InputDecoration(
                labelText: "Email",
                labelStyle: TextStyle(color: Colors.white),
                enabledBorder: const OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.white, width: 0.0),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color: Theme.of(context).accentColor, width: 0.0),
                ),
              ),
              controller: emailController,
            ),
          ),
          Container(
            padding: const EdgeInsets.only(top: 20, right: 10, left: 10),
            child: TextField(
              obscureText: true,
              style: TextStyle(color: Colors.white),
              decoration: InputDecoration(
                labelText: "Password",
                labelStyle: TextStyle(color: Colors.white),
                enabledBorder: const OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.white, width: 0.0),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color: Theme.of(context).accentColor, width: 0.0),
                ),
              ),
              controller: passwordController,
            ),
          ),
          GestureDetector(
            onTap: () =>   null
                 ,
            child: Container(
              width: 200,
              height: 50,
              margin: EdgeInsets.only(top: 20),
              child: Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(27.5),
                  gradient: LinearGradient(
                    begin: Alignment(1.0, 0.0),
                    end: Alignment(-1.0, 0.0),
                    colors: [
                      AppConstants.orangeColor,
                      AppConstants.yellowColor
                    ],
                    stops: [0.0, 1.0],
                  ),
                ),
                padding: EdgeInsets.all(12),
                child: Text('SIGNUP',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold)),
              ),
            ),
          ),
          Flexible(
            fit: FlexFit.loose,
            flex: 1,
            child: Padding(
              padding: EdgeInsets.all(15.0),
            ),
          )
        ],
      ),
    );
  }

  /// Forgot Password Dialog
  void resetPassword() {
    TextEditingController emailController = TextEditingController();
    showDialog(
        context: context,
        child: AlertDialog(
          actions: [
            GestureDetector(
              onTap: () {

              },
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'SUBMIT',
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Theme.of(context).primaryColor),
                ),
              ),
            ),
            GestureDetector(
              onTap: () => Navigator.pop(context),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'CANCEL',
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Theme.of(context).primaryColor),
                ),
              ),
            ),
          ],
          title: Text(
            "Forgot Password?",
            style: TextStyle(fontSize: 16),
          ),
          content: Container(
            height: 70,
            child: TextFormField(
              maxLines: 1,
              decoration: InputDecoration(
                labelText: "Email",
                border: new OutlineInputBorder(
                  borderRadius: new BorderRadius.circular(10.0),
                  borderSide: new BorderSide(),
                ),
              ),
              controller: emailController,
            ),
          ),
        ));
  }
}



class Device {
  Device(this.deviceHeight, this.deviceWidth) {
    isMobile = deviceWidth > deviceHeight ? false : true;
  }

  /// deviceWidth
  double deviceWidth = 0.0;

  /// deviceHeight
  double deviceHeight = 0.0;

  /// Is Platform Mobile
  bool isMobile = true;
}





class AppConstants {
  

  static Color orangeColor = const Color(0xffff470b);
  static Color yellowColor = const Color(0xfffca10e);

  static List socialLinks = [
    {'name': 'youtube', "link": 'https://www.youtube.com/channel/UCP2-MYtIbBnlEcfTvJKo5Og?sub_confirmation=1', 'icon': 'assets/images/youtube.png'},
    {'name': 'github', "link": 'https://www.github.com/theshivamlko', 'icon': 'assets/images/github.png'},
    {'name': 'linkedin', "link": 'https://www.linkedin.com/in/theshivamlko', 'icon': 'assets/images/linkedin.png'},
    {'name': 'twitter', "link": 'https://twitter.com/theshivamlko', 'icon': 'assets/images/twitter.png'},
    {'name': 'website', "link": 'https://navoki.com', 'icon': 'assets/images/website.png'},
  ];
  
}
              
            
!
999px

Console