Design An Amazing Flutter Neumorphic Login Page UI [Free Source Code]

In this tutorial, we will learn how to create this really amazing Flutter neumorphic login page UI. The complete source code of the mentioned Flutter neumorphic login page UI will be provided at the end.

Outline

Introduction: Flutter Neumorphic Login Page UI Design
Flutter Neumorphic Login Page UI Design Complete Source Code
Conclusion

Introduction: Flutter Neumorphic Login Page UI Design

We’ve created this amazing Flutter neumorphic login page UI 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 constructing this eye catching Flutter neumorphic login page UI template are listed below:

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

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

The complete source code of this beautiful Flutter neumorphic login page form is provided in the section below.

Try to understand how every Flutter widget is doing its role in this Flutter neumorphic login page UI template and seek inspiration for implementing 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 this Flutter UI form design. Also, try to customize it according to your set of requirements.

Flutter Neumorphic Login Page UI Design Complete 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: ' Flutter neumorphic login page UI ',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          //  primarySwatch: Color(0XFFF2F2F2),
          accentColor: Color(0XFFF2F2F2),
          primaryColor: Color(0XFFF2F2F2),
          focusColor: Color(0XFFF2F2F2),
          cursorColor: Color(0XFFF2F2F2)),
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);
  @override
  State<Homepage> createState() => _HomepageState();
}
// beautiful Flutter neumorphic login page UI 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: Color(0XFFF2F2F2),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Column(
                  children: [
                    SizedBox(
                      height: 200,
                      width: 200,
                      child: Stack(
                        children: [
                          Neumorphic(
                            padding: EdgeInsets.all(14),
                            style: NeumorphicStyle(
                                color: Color(0XFFF2F2F2),
                                boxShape: NeumorphicBoxShape.roundRect(
                                    BorderRadius.circular(100)),
                                depth: -3,
                                lightSource: LightSource.bottomRight,
                                intensity: 1,
                                shadowLightColorEmboss: Color(0XFFF2F2F2)),
                            child: Neumorphic(
                              padding: EdgeInsets.all(14),
                              style: NeumorphicStyle(
                                  color: Color(0XFFF2F2F2),
                                  boxShape: NeumorphicBoxShape.roundRect(
                                      BorderRadius.circular(100)),
                                  depth: -3,
                                  lightSource: LightSource.bottomRight,
                                  intensity: 1,
                                  // oppositeShadowLightSource: true,
                                  shadowLightColorEmboss: Color(0XFFF2F2F2)),
                              child: Neumorphic(
                                padding: EdgeInsets.all(14),
                                style: NeumorphicStyle(
                                    color: Color(0XFFF2F2F2),
                                    boxShape: NeumorphicBoxShape.roundRect(
                                        BorderRadius.circular(100)),
                                    depth: -3,
                                    lightSource: LightSource.bottomRight,
                                    intensity: 1,
                                    // oppositeShadowLightSource: true,
                                    shadowLightColorEmboss: Color(0XFFF2F2F2)),
                                child: Neumorphic(
                                  padding: EdgeInsets.all(14),
                                  style: NeumorphicStyle(
                                      color: Color(0XFFF2F2F2),
                                      boxShape: NeumorphicBoxShape.roundRect(
                                          BorderRadius.circular(100)),
                                      depth: -3,
                                      lightSource: LightSource.bottomRight,
                                      intensity: 1,
                                      // oppositeShadowLightSource: true,
                                      shadowLightColorEmboss:
                                          Color(0XFFF2F2F2)),
                                  child: Neumorphic(
                                    padding: EdgeInsets.all(14),
                                    style: NeumorphicStyle(
                                        color: Color(0XFFF2F2F2),
                                        boxShape: NeumorphicBoxShape.roundRect(
                                            BorderRadius.circular(100)),
                                        depth: -3,
                                        lightSource: LightSource.bottomRight,
                                        intensity: 1,
                                        // oppositeShadowLightSource: true,
                                        shadowLightColorEmboss:
                                            Color(0XFFF2F2F2)),
                                    child: Neumorphic(
                                      style: NeumorphicStyle(
                                          color: Color(0XFFF2F2F2),
                                          boxShape:
                                              NeumorphicBoxShape.roundRect(
                                                  BorderRadius.circular(100)),
                                          depth: -3,
                                          lightSource: LightSource.bottomRight,
                                          intensity: 1,
                                          // oppositeShadowLightSource: true,
                                          shadowLightColorEmboss:
                                              Color(0XFFF2F2F2)),
                                      child: SizedBox(
                                        height: 70,
                                        width: 70,
                                        child: Center(
                                          child: NeumorphicText('Login',
                                              textStyle: NeumorphicTextStyle(
                                                  fontSize: 15,
                                                  fontWeight: FontWeight.bold),
                                              style: NeumorphicStyle(
                                                color: Colors.grey,
                                                depth: 3,
                                                intensity: 1,
                                              )),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Positioned(
                            left: 15,
                            top: 25,
                            child: Neumorphic(
                              padding: EdgeInsets.all(10),
                              style: NeumorphicStyle(
                                  color: Color(0XFFF2F2F2),
                                  boxShape: NeumorphicBoxShape.roundRect(
                                      BorderRadius.circular(100)),
                                  depth: -1,
                                  lightSource: LightSource.bottomRight,
                                  intensity: 1,
                                  // oppositeShadowLightSource: true,
                                  shadowLightColorEmboss: Color(0XFFF2F2F2)),
                            ),
                          ),
                          Positioned(
                            right: 30,
                            top: 25,
                            child: Neumorphic(
                              padding: EdgeInsets.all(10),
                              style: NeumorphicStyle(
                                  color: Color(0XFFF2F2F2),
                                  boxShape: NeumorphicBoxShape.roundRect(
                                      BorderRadius.circular(100)),
                                  depth: -1,
                                  lightSource: LightSource.bottomRight,
                                  intensity: 1,
                                  // oppositeShadowLightSource: true,
                                  shadowLightColorEmboss: Color(0XFFF2F2F2)),
                            ),
                          ),
                          Positioned(
                            left: 15,
                            bottom: 25,
                            child: Neumorphic(
                              padding: EdgeInsets.all(15),
                              style: NeumorphicStyle(
                                  color: Color(0XFFF2F2F2),
                                  boxShape: NeumorphicBoxShape.roundRect(
                                      BorderRadius.circular(100)),
                                  depth: -3,
                                  lightSource: LightSource.bottomRight,
                                  intensity: 1,
                                  // oppositeShadowLightSource: true,
                                  shadowLightColorEmboss: Color(0XFFF2F2F2)),
                            ),
                          ),
                          Positioned(
                            right: 15,
                            bottom: 25,
                            child: Neumorphic(
                              padding: EdgeInsets.all(20),
                              style: NeumorphicStyle(
                                  color: Color(0XFFF2F2F2),
                                  boxShape: NeumorphicBoxShape.roundRect(
                                      BorderRadius.circular(100)),
                                  depth: -3,
                                  lightSource: LightSource.bottomRight,
                                  intensity: 1,
                                  // oppositeShadowLightSource: true,
                                  shadowLightColorEmboss: Color(0XFFF2F2F2)),
                            ),
                          )
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 30.0,
                    ),
                    emailField(),
                    passwordField(),
                    SizedBox(
                      height: 5,
                    ),
                    forgotPassword(),
                    SizedBox(height: 31),
                    loginButton(),
                    SizedBox(height: 13),
                    registerButton(),
                  ],
                ),
                SizedBox(
                  height: 20.0,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
  // neumorphic Flutter neumorphic login page UI template
  Widget emailField() {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
        child: Neumorphic(
          style: NeumorphicStyle(
              color: Color(0XFFF2F2F2),
              boxShape:
                  NeumorphicBoxShape.roundRect(BorderRadius.circular(100)),
              depth: -2,
              lightSource: LightSource.bottomRight,
              intensity: 1,
              // oppositeShadowLightSource: true,
              shadowLightColorEmboss: Color(0XFFF2F2F2)),
          child: Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            height: 53,
            width: double.infinity,
            child: TextField(
              style: TextStyle(color: Colors.grey.shade700, fontSize: 14),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Enter email',
                hintStyle: TextStyle(color: Colors.grey, fontSize: 14),
              ),
            ),
          ),
        ));
  }
  // Flutter neumorphic login page UI template form design
  Widget passwordField() {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
        child: Neumorphic(
          style: NeumorphicStyle(
              color: Color(0XFFF2F2F2),
              boxShape:
                  NeumorphicBoxShape.roundRect(BorderRadius.circular(100)),
              depth: -2,
              lightSource: LightSource.bottomRight,
              intensity: 1,
              // oppositeShadowLightSource: true,
              shadowLightColorEmboss: Color(0XFFF2F2F2)),
          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.grey.shade700, 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.grey,
                      size: 20,
                    ),
                  ),
                ),
                hintText: 'Enter password',
                hintStyle: TextStyle(color: Colors.grey, fontSize: 14),
              ),
            ),
          ),
        ));
  }
  // amazing Flutter neumorphic login page UI form template
  Widget registerButton() {
    return GestureDetector(
      onTap: () {
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text('Clicked')));
      },
      child: Neumorphic(
        margin: EdgeInsets.symmetric(horizontal: 20),
        style: NeumorphicStyle(
            color: Color(0XFFF2F2F2),
            boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(100)),
            depth: -2,
            lightSource: LightSource.bottomRight,
            intensity: 1,
            shadowLightColorEmboss: Color(0XFFF2F2F2)),
        child: Neumorphic(
          margin: EdgeInsets.all(10),
          style: NeumorphicStyle(
              color: Color(0XFFF2F2F2),
              boxShape:
                  NeumorphicBoxShape.roundRect(BorderRadius.circular(100)),
              depth: -2,
              lightSource: LightSource.bottomRight,
              intensity: 1,
              shadowLightColorEmboss: Color(0XFFF2F2F2)),
          child: Container(
            height: 53,
            width: double.infinity,
            margin: EdgeInsets.symmetric(horizontal: 30),
            alignment: Alignment.center,
            child: Text('Signup',
                style: TextStyle(
                    color: Colors.grey,
                    fontSize: 16,
                    fontWeight: FontWeight.bold)),
          ),
        ),
      ),
    );
  }
  Widget loginButton() {
    return GestureDetector(
      onTap: () {
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text('Clicked')));
      },
      child: Neumorphic(
        margin: EdgeInsets.symmetric(horizontal: 20),
        style: NeumorphicStyle(
            color: Color(0XFFF2F2F2),
            boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(100)),
            depth: -2,
            lightSource: LightSource.bottomRight,
            intensity: 1,
            // oppositeShadowLightSource: true,
            shadowLightColorEmboss: Color(0XFFF2F2F2)),
        child: Neumorphic(
          margin: EdgeInsets.all(10),
          style: NeumorphicStyle(
              color: Color(0XFFF2F2F2),
              boxShape:
                  NeumorphicBoxShape.roundRect(BorderRadius.circular(100)),
              depth: -2,
              lightSource: LightSource.bottomRight,
              intensity: 1,
              shadowLightColorEmboss: Color(0XFFF2F2F2)),
          child: Container(
            height: 53,
            width: double.infinity,
            margin: EdgeInsets.symmetric(horizontal: 30),
            alignment: Alignment.center,
            child: Text('Login',
                style: TextStyle(
                    color: Colors.grey,
                    fontSize: 16,
                    fontWeight: FontWeight.bold)),
          ),
        ),
      ),
    );
  }
  // Flutter neumorphic login page UI template
  Widget forgotPassword() {
    return Align(
      alignment: Alignment.centerRight,
      child: Padding(
        padding: const EdgeInsets.only(top: 10, right: 25),
        child: Neumorphic(
          padding: EdgeInsets.all(10),
          style: NeumorphicStyle(
              color: Color(0XFFF2F2F2),
              boxShape:
                  NeumorphicBoxShape.roundRect(BorderRadius.circular(100)),
              depth: -2,
              lightSource: LightSource.bottomRight,
              intensity: 1,
              shadowLightColorEmboss: Color(0XFFF2F2F2)),
          child: InkWell(
            onTap: () {
              // you can specify any type of actions here
            },
            child: Text(
              'Forgot password?',
              style: TextStyle(
                  color: Colors.grey,
                  fontSize: 13.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 Flutter neumorphic login page UI design template. Furthermore, I’d be pleased to see 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: Flutter Neumorphic Login Page UI Design

Flutter Neumorphic Login Page UI Design Complete Source Code

Conclusion

Share this post:

Related Posts

Leave a Reply Cancel reply