Neumorphic Flutter Login Screen Design [Free Source Code]

In this tutorial, we’ll learn how to create this beautiful neumorphic Flutter login screen design. The complete source code of the mentioned neumorphic Flutter login screen design will be provided in the end.

Outline

Introduction: Neumorphic Flutter Login Screen Design
Beautiful Neumorphic Flutter Login Screen Source Code
Conclusion

Introduction: Neumorphic Flutter Login Screen UI Design

We’ve created this beautiful neumorphic Flutter login screen UI design by using multiple Flutter widgets.

Click here if you want to learn and practically understand how to import and customize Flutter neumorphic.

Widgets that are used in creating this amazing neumorphic Flutter login screen design are listed below:

Flutter Column Widget
Flutter Textfield Widget
Flutter Gesture Detector Widget
Flutter Inkwell Widget
Flutter Text Widget
Flutter Neumorphic
Flutter Neumorphic Text
Flutter Snackbar Widget
Flutter Container Widget
Flutter Single Child Scroll View Widget
Flutter Padding Widget

I’ve written detailed articles on the widgets listed above, you can check them out using the menu bar or search box of this site.

The complete source code of this beautiful neumorphic Flutter login screen UI is available in the below section.

Try to understand how every Flutter widget is doing its role in this neumorphic Flutter login screen UI design and implement this design from scratch.

You can paste this code inside your main file. Just import the Flutter neumorphic package in your pubspec.yaml file. Hope you’ll like it. Also, try to customize it according to your set of requirements.

Beautiful Neumorphic Flutter Login Screen Source Code

import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ' Neumorphic flutter login screen ',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          // primarySwatch: Colors.green,
          accentColor: Colors.white,
          primaryColor: Colors.white,
          focusColor: Colors.white,
          cursorColor: Colors.white),
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);
  @override
  State<Homepage> createState() => _HomepageState();
}
// neumorphic flutter login screen design template
class _HomepageState extends State<Homepage> {
  bool isPasswordVisible = false;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          height: double.infinity,
          width: double.infinity,
          alignment: Alignment.center,
          color: Colors.white,
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Column(
                  children: [
                    Neumorphic(
                      padding: EdgeInsets.all(13),
                      style: NeumorphicStyle(
                          color: Colors.white,
                          boxShape: NeumorphicBoxShape.circle(),
                          depth: -3,
                          lightSource: LightSource.bottomLeft,
                          intensity: 1,
                          // oppositeShadowLightSource: true,
                          shadowLightColorEmboss: Colors.white),
                      child: Neumorphic(
                        style: NeumorphicStyle(
                            color: Colors.white,
                            boxShape: NeumorphicBoxShape.circle(),
                            depth: -3,
                            lightSource: LightSource.bottomLeft,
                            intensity: 1,
                            // oppositeShadowLightSource: true,
                            shadowLightColorEmboss: Colors.white),
                        child: SizedBox(
                          height: 70,
                          width: 70,
                          child: Center(
                            child: NeumorphicText('Login',
                                textStyle: NeumorphicTextStyle(
                                    fontSize: 15, fontWeight: FontWeight.bold),
                                style: NeumorphicStyle(
                                  color: Colors.purple,
                                  depth: 3,
                                  intensity: .5,
                                )),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 30.0,
                    ),
                    emailField(),
                    passwordField(),
                    forgotPassword(),
                    SizedBox(
                      height: 30.0,
                    ),
                    loginButton(),
                    SizedBox(
                      height: 15.0,
                    ),
                    signUpButton()
                  ],
                ),
                SizedBox(
                  height: 20.0,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
  // neumorphic flutter login screen design template
  Widget emailField() {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
        child: Neumorphic(
          style: NeumorphicStyle(
              color: Colors.white,
              boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(50)),
              depth: -3,
              lightSource: LightSource.bottomLeft,
              intensity: 1,
              // oppositeShadowLightSource: true,
              shadowLightColorEmboss: Colors.white),
          child: Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            height: 53,
            width: double.infinity,
            child: TextField(
              style: TextStyle(color: Colors.purple, fontSize: 14),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Enter email',
                hintStyle: TextStyle(color: Colors.purple, fontSize: 14),
              ),
            ),
          ),
        ));
  }
  // neumorphic flutter login screen design template
  Widget passwordField() {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
        child: Neumorphic(
          style: NeumorphicStyle(
              color: Colors.white,
              boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(50)),
              depth: -3,
              lightSource: LightSource.bottomLeft,
              intensity: 1,
              // oppositeShadowLightSource: true,
              shadowLightColorEmboss: Colors.white),
          child: Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            height: 53,
            width: double.infinity,
            child: TextField(
              obscureText: isPasswordVisible ? false : true,
              style: TextStyle(color: Colors.purple, fontSize: 14),
              decoration: InputDecoration(
                border: InputBorder.none,
                suffixIcon: Padding(
                  padding: EdgeInsets.only(left: 10),
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        isPasswordVisible = !isPasswordVisible;
                      });
                    },
                    child: Icon(
                      isPasswordVisible
                          ? Icons.visibility
                          : Icons.visibility_off,
                      color: Colors.purple,
                      size: 20,
                    ),
                  ),
                ),
                hintText: 'Enter password',
                hintStyle: TextStyle(color: Colors.purple, fontSize: 14),
              ),
            ),
          ),
        ));
  }
  // neumorphic flutter login screen design template
  Widget loginButton() {
    return GestureDetector(
      onTap: () {
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text('Clicked')));
      },
      child: Neumorphic(
        margin: EdgeInsets.symmetric(horizontal: 20),
        style: NeumorphicStyle(
            color: Colors.white,
            boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(50)),
            depth: -3,
            lightSource: LightSource.bottomLeft,
            intensity: 1,
            // oppositeShadowLightSource: true,
            shadowLightColorEmboss: Colors.white),
        child: Container(
          height: 53,
          width: double.infinity,
          margin: EdgeInsets.symmetric(horizontal: 30),
          alignment: Alignment.center,
          child: Text('Login',
              style: TextStyle(
                  color: Colors.purple,
                  fontSize: 15,
                  fontWeight: FontWeight.bold)),
        ),
      ),
    );
  }
  Widget signUpButton() {
    return GestureDetector(
      onTap: () {
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text('Clicked')));
      },
      child: Neumorphic(
        margin: EdgeInsets.symmetric(horizontal: 20),
        style: NeumorphicStyle(
            color: Colors.white,
            boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(50)),
            depth: -3,
            lightSource: LightSource.bottomLeft,
            intensity: 1,
            // oppositeShadowLightSource: true,
            shadowLightColorEmboss: Colors.white),
        child: Container(
          height: 53,
          width: double.infinity,
          margin: EdgeInsets.symmetric(horizontal: 30),
          alignment: Alignment.center,
          child: Text('Register',
              style: TextStyle(
                  color: Colors.purple,
                  fontSize: 15,
                  fontWeight: FontWeight.bold)),
        ),
      ),
    );
  }
  // neumorphic flutter login screen design UI template
  Widget forgotPassword() {
    return Align(
      alignment: Alignment.centerRight,
      child: Padding(
        padding: const EdgeInsets.only(top: 10, right: 30),
        child: InkWell(
          onTap: () {
            // can specify actions here
          },
          child: Text(
            'Forgot password?',
            style: TextStyle(
                color: Colors.purple.shade400,
                fontSize: 12.0,
                fontWeight: FontWeight.w700),
          ),
        ),
      ),
    );
  }
}

Conclusion

To conclude this tutorial, hope you now have a complete and in-depth practical knowledge of how to create this amazing neumorphic Flutter login screen UI design. I’d be looking forward to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.

Outline

Introduction: Neumorphic Flutter Login Screen UI Design

Beautiful Neumorphic Flutter Login Screen Source Code

Conclusion

Share this post:

Related Posts

Leave a Reply Cancel reply