Skip to content
  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy
flutter app development

Let Me Flutter

Flutter apps development site

  • Home
  • Flutter App Development
    • Flutter Solutions
      • Tech
      • Setup
        • How To Make Your First App With Flutter?
      • How To Get Flutter Android App Using Flutter Build Apk
    • Dart Fundamentals
      • Flutter Loops
        • How To Easily Use For Loop In Flutter Widgets
        • How To Easily Use ForEach Loop In Flutter
        • How To Easily Use While Loop In Flutter
        • How To Easily Use Flutter For In Loop
        • How To Easily Use Flutter For Loop Index
      • Flutter Lists
        • How To Easily Use List In Flutter Dart
        • [Top 4 Ways] How To Properly Combine Lists In Dart
        • How To Reverse List In Flutter – Easy Flutter Code Example
        • How To Convert List To Set In Flutter – Easy Flutter Code Examples
        • How To Shuffle List In Flutter – Easy Flutter Code Examples
      • Flutter If Else Condition
        • How To Use If Else In Flutter – Easy Flutter Guide
      • Flutter Switch Case
        • How To Easily Use Flutter Switch Statement
      • Flutter Functions
        • How To Easily Use Flutter Function
      • Flutter Maps
        • How To Easily Create And Use Flutter Map List
        • How To Easily Create And Use Flutter Map – Easy Flutter Guide
      • Flutter Variables
        • How To Easily Convert Dart Double to Int (4 Easy Ways)
        • How To Easily Convert Dart Int To String
        • How To Easily Convert Double To String Flutter
        • How To Easily Convert Flutter String To Double
        • How To Easily Convert Flutter String To Int – Easy Flutter Guide
        • How To Perform Flutter String Concatenation [Top 4 Ways]
    • Flutter Web Templates
      • Flutter Web Template – Flutter Web Drawer Widget Example
    • Mobile Templates
      • Instagram UI Template
        • Instagram News Feed UI In Flutter-Beautiful Flutter Design-Flutter Instagram Template Part 1
      • Flutter Forms
        • Signup Flutter Form UI Design-Beautiful Flutter UI Template
        • Flutter Glassmorphism Login UI Template With Source Code
        • Signup Flutter Form UI Design 2022-Beautiful Flutter UI Template
        • Beautiful Flutter Login Template – Flutter templates 2022
        • Gradient Flutter Login UI Form Template With Source Code – Flutter Templates 2022
        • Beautiful Flutter Login UI Form Template
        • Beautiful Flutter Login Page UI Design – Example Code
        • How To Design Beautiful Flutter Login Screen UI
        • How To Design Beautiful Flutter Login Form Template – Easy Flutter Code
        • How To Create Beautiful Flutter Login Form Design UI Template
    • Widgets
      • Menus
        • Flutter Popup Menu Button Detailed Customization With Example-2022 Flutter Guide
      • Sliders
        • Flutter Carousel Slider
          • How To Easily Set Flutter Carousel Slider Full Width
          • How To Easily Use Flutter Carousel Slider OnPageChanged
          • How To Easily Customize Flutter Carousel Slider AutoPlay
        • Flutter Carousel Slider Beautiful Customization With Example
        • Flutter Range Slider Beautiful Customization With Example | Syncfusion
      • Stack
        • Flutter App Stack Widget Detailed Explanation With Example
      • Buttons
        • Flutter Icon Button Example – Detailed Customization – Step By Step
        • Flutter Raised Button Example – Detailed Raised Button Decoration
        • Flutter Elevated Button
          • How To Easily Change Flutter Elevated Button Color
          • How To Change Flutter Elevated Button Border Radius
          • How To Easily Customize Flutter Elevated Button Width
          • How To Easily Customize Flutter Elevated Button Height – Top 2 Methods
          • How To Easily Use Flutter Elevated Button OnPressed
        • Flutter Floating Action Button
          • How To Easily Customize Flutter FloatingActionButton Widget
      • Icons
        • How To Use Icons In Flutter? Font Awesome Icons In Flutter
        • How To Easily Change Flutter Icon Size – Flutter Example Code
      • Flutter Card Widget
        • All You Need To Know About Flutter Card Widget – Explained With Example
        • How To Easily Customize Flutter Card Border Radius
        • How To Easily Customize Flutter Card Border Radius
        • How To Change Flutter Card Color – Easy Flutter Guide
        • How To Change Flutter Card Elevation – Easy Flutter Guide
        • How To Change Flutter Card Shadow Color – Easy Flutter Guide
        • How To Easily Customize Flutter Card Height – Top 2 Methods
      • Flutter Drawer Widget
        • Beautiful Flutter Drawer Widget Customization-Explained With Example
        • How To Change Flutter Drawer Icon Color – Easy Flutter Guide
        • How To Change Flutter Drawer Width – Easy Flutter Code Example
        • How To Easily Change Flutter Drawer Background Color
        • How To Change Flutter Drawer Header Height – Easy Flutter Code Example
      • Appbars
        • How To Design Beautiful AppBar in Flutter
        • Let’s Customize AppBar In Flutter
        • Flutter SliverAppBar Customization [Easy Guide]
        • Flutter Appbar Actions Customization [Detailed Guide]
        • How To Change Flutter Appbar Color In Flutter App-2022 Guide
        • How To Customize Flutter Appbar Leading- 2022 Guide
        • How To Make Flutter Appbar Title Center-2022 Guide
        • How To Implement Flutter Appbar Transparent
        • How To Change Flutter Appbar Height
        • How To Remove Flutter Appbar Elevation
        • How To Change Flutter Appbar Shadow Color
        • How To Easily Change Flutter Appbar Background Color
        • How To Easily Customize Flutter Appbar Back Button
        • How To Easily Set Flutter Appbar Center Text
        • How to Easily Change Flutter Appbar Default Height
        • How To Easily Change Flutter Appbar Icon Color Theme
      • Flutter Textfield
        • Change Flutter Textfield Cursor Color Explained With Example-Best Flutter Guide
        • Flutter Textformfield Default Value Explained With Example
        • Flutter Textfield Onchanged Explained With Example-Best Flutter Guide
        • Flutter Textfield Remove Underline Explained With Example
        • How To Change Flutter Textfield Underline Color
        • How To Implement Flutter Textfield Disable?
        • How To Change Flutter Textfield Height?
        • How To Customize Flutter Textfield Label?
        • How To Customize Flutter Textfield Hint Text?
        • How To Change Flutter Textfield Hint Text Color?
        • How To Customize Flutter Textfield Initial Value?
      • Flutter Textformfield
        • How To Change Flutter Textformfield Background Color
        • How To Set Flutter Textformfield Default Value?
        • How To Change Flutter Textformfield Color?
        • How To Customize Flutter Textformfield KeyboardType?
        • How To Change Flutter Textformfield Border Color?
        • How To Implement Flutter Textformfield Remove Underline?
        • How To Change Flutter Textformfield Underline Color?
        • How To Change Flutter Textformfield Hint Text Size?
        • How To Change Flutter Textformfield Font Size?
        • How To Change Flutter Textformfield Hint Text Color?
        • How To Implement Flutter Textformfield Hint Text Center?
        • How To Change Flutter Textformfield Error Text
        • How To Change Flutter Textformfield Error Style
        • How To Change Flutter Textformfield Text Color
        • How To Change Flutter Textformfield Outline Border Color
        • How To Change Flutter Textformfield Outline Border Width
        • How To Change Flutter Textformfield Label Text
      • Flutter Dropdown
        • How To Change Flutter Dropdown Icon
        • How To Implement Flutter Dropdown Remove Underline
        • How To Change Flutter Dropdown Icon Color
        • How To Change Flutter Dropdown Background Color
        • How To Change Flutter Dropdown Border Radius
        • How To Change Flutter Dropdown Icon Size
        • How To Implement Flutter Dropdown OnChange
      • Flutter ListViews
        • How To Implement Flutter ListView Horizontal
        • How To Implement Flutter ListView Builder Horizontal
      • Flutter Popup Menu
        • How To Use Flutter Popup Menu Item Ontap
        • How To Change Flutter Popup Menu Shape
        • How To Change Flutter Popup Menu Width
        • How To Change Popup Menu Icon Flutter
        • How To Change Flutter Popup Menu Item Height
        • How To Change Flutter Popup Menu Icon Size
      • Flutter SingleChildScrollView
        • How To Use Flutter SingleChildScrollView
      • Flutter Raised Button
        • How To Change Flutter RaisedButton Width
        • How To Change Flutter RaisedButton Color
        • How To Change Flutter RaisedButton Shape
        • How To Use Flutter RaisedButton OnPressed
        • How To Implement Flutter RaisedButton Disable
        • How To Change Flutter RaisedButton Disabled Color
        • How To Change Flutter RaisedButton Size
        • How To Easily Use Flutter RaisedButton Icon
        • How To Use Flutter Raisedbutton Icon OnPressed
        • How To Change Flutter Raised Button Elevation
      • Flutter Icon Button
        • How To Change Flutter Icon Button Background Color
        • How To Change Flutter Icon Button Size
        • How To Use Flutter Icon Button OnPressed
      • Flutter Flat Button
        • How To Easily Change Flutter FlatButton Color
      • Flutter Text Widget
        • How To Easily Set Flutter Text Align Center
        • How To Easily Change Flutter Text Font Size
        • How To Easily Change Flutter Text Size
        • How To Make Flutter Text Bold-Example Code
        • How To Change Flutter Text Color-Example Code
        • How To Set Flutter Text Italic-Easy Flutter Code Example
        • How To Change Flutter Text Line Height-Easy Flutter Code Example
        • How To Easily Set Flutter Text Underline
        • How To Easily Add Flutter Text Shadow
        • How To Easily Set Flutter Text Word Spacing
        • How To Easily Set Flutter Text Letter Spacing
        • How To Easily Set Space Between Flutter Text And Underline
        • How To Easily Align Flutter Text Justify
        • How To Easily Change Flutter Text Underline Color
      • Flutter Images
        • Learn How To Use Flutter Image Asset-Easy Flutter Guide
      • Flutter Column Widget
        • How To Easily Set Flutter Column Align Left
        • How To Easily Implement Flutter Column Scrollable
        • How To Easily Customize Flutter Column Spacing
      • Flutter Snackbar
        • How To Easily Use Flutter Snackbar Widget
      • Flutter Wrap Widget
        • How To Easily Use Flutter Wrap Widget – Flutter Example Code
      • Flutter Container Border Customization[Detailed Guide]
      • Flutter SizedBox Widget
        • How To Easily Customize Flutter SizedBox Widget
      • Flutter InkWell Widget
        • How To Easily Use Flutter InkWell OnTap
      • Textfield In Flutter App Detailed Explanation With Example
      • Flutter Textfield Align Center With Example
      • Flutter Image Picker
        • How To Properly Use Flutter Image Picker – Easy Flutter Example
      • Flutter Container Widget
        • How To Easily Change Flutter Container Size
        • How To Easily Set Flutter Container Full Width
        • How To Easily Customize Flutter Box Shadow Offset
        • How To Easily Customize Flutter Container Shadow
        • How To Easily Change Flutter Container Border Radius
        • How To Easily Change Flutter Container Padding
        • How To Easily Change Flutter Container Color
        • How To Easily Add Flutter Container Background Image
        • How To Easily Change Flutter Container Shadow Color
        • How To Easily Change Flutter Container Height
        • How To Easily Customize Flutter Container Margin
        • How To Easily Implement Flutter Container Gradient
        • How To Easily Set Flutter Box Shadow Only Top
        • How To Easily Implement Flutter Container Shape Circle
        • How To Easily Change Flutter Container Alignment
      • Beautiful Bottom Navigation Bar In Flutter App-Android And Flutter IOS-Dart Flutter
      • Let’s Customize Texts In Flutter
      • How To Change Flutter Textfield Color [Easy Examples]
      • Flutter Textfield Border Radius Explained With Example-Best Flutter Guide
      • Flutter Glassmorphism
        • How To Easily Customize Flutter Glassmorphism Container
        • How To Easily Change Flutter Glassmorphism Container Size
      • Flutter Icon Button Example – Detailed Customization – Step By Step
      • Flutter SetState
        • How To Easily Use Flutter SetState
      • Flutter Positioned Widget
        • How To Easily Use Flutter Positioned Widget – Example Code
      • Flutter Padding
        • How To Use Flutter Padding – Easy Flutter Guide
      • Flutter Bottom Navigation Bar Customization
      • Neumorphic Effect In Flutter App Container Widget
      • How To Change Flutter Textfield Border Color
      • Container Customization In Flutter App
      • Flutter Textfield Only Numbers Explained With Example-Best Flutter Guide
      • Flutter Gesture Detector Widget
        • How To Easily Use Flutter GestureDetector OnTap
      • Flutter Textfield Maxlength Detailed Explanation With Example-Best Flutter Guide
      • How To Use Flutter Column Widget – Detailed Examples
      • Flutter Textfield Decoration Detailed Explanation With Example-Flutter Guide 2022
      • Beautiful Grid View Builder In Flutter App-Detailed Customization
      • ListView Builder In Flutter Apps
      • Flutter Table Widget
        • How To Easily Customize Flutter Table Widget
      • How To Use Rows In Flutter Apps
      • How To Change Flutter Textfield Font Size
    • React Native
      • React Native Jobs In 2023: All You Need To Know
      • Why Should I Learn React Native Framework In 2023
      • Right React Native Elements for Your Next App [Detailed Guide]
      • Benefits Of Creating A React Native App [Easy Guide]
    • Updates
      • What’s New in Flutter 2.10 release?
    • Animations
      • Animated Container
        • How To Use Animated Container In Flutter? Explained With Example
      • Animated Texts
        • Animated Text Kit In Flutter App-Dart Flutter Makes Animation Easy
      • Lottie Animations
        • How To Use Beautiful Lottie Animations In Flutter App
      • Hero Animations
        • Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language
  • Python Programming
    • Python Tuples
      • How To Easily Create Python Tuple – Easy Python Guide
    • Python Dictionaries
      • How To Properly Define And Use Python Dictionary – Easy Python Code Example
      • How To Properly Use Python Dict To Create Dictionary – Easy Python Guide
      • How To Use Python Dictionary Get Method – Easy Python Code Example
      • How To Use Python Dictionary Pop Method – Easy Python Guide
      • How To Use Python Dictionary SetDefault Method – Easy Python Guide
      • How To Use Python Dictionary Clear Method – Easy Python Code Example
    • Python Del Keyword
      • How To Properly Use Python Del Keyword – Easy Python Code
    • Python If Else Statement
      • How To Easily Use Python If Else Statement
      • How To Use Python Elif Statement – Easy Python Guide
      • How To Easily Use Nested If In Python
    • Python Loops
      • Python For Loop
        • How To Easily Use Python For Loop – Python Code Examples
      • Python While Loop
        • How To Use Python While Loop – Easy Code Examples
    • Python Break and Continue
      • Python Break Statement
        • How To Easily Use Python Break Statement – Python Code Examples
      • Python Continue Statement
        • How To Easily Use Python Continue Statement
    • Python Pass Statement
      • How To Easily Use Python Pass Statement
    • Python Functions
      • How To Properly Use Python Function – Super Easy Python Guide
      • How To Properly Use Python Function Arguments – Easy Python Guide
      • How To Properly Use Python Lambda Function – Easy Python Guide
    • Python Variables
      • How To Define And Use Python Global Variable – Easy Python Guide
      • How To Properly Use Python Local Variable – Easy Python Guide
      • How To Properly Use Python NonLocal Variables – Easy Python Guide
    • Python Classes and Objects
      • How To Properly Define And Use Python Class – Easy Example Code
    • Python Lists
      • How To Easily Use Python List Pop Method
      • How To Properly Use Python List Remove Method – Easy Python Guide
      • How To Properly Use Python List Extend – Easy Python Guide
      • How To Properly Use Python List Insert – Easy Python Guide
      • How To Easily Use Python List Index Method – Python Example Code
      • How To Easily Use Python List Count Method – Python Example Code
      • How To Easily Use Python List Reverse Method
      • How To Easily Use Python List Sort Method
      • How To Properly Use Python List Copy Method – Easy Python Guide
      • How To Easily Use Python List Clear Method
      • How To Easily Create Python List – Easy Python Example Code
      • How To Properly Use Python List Append – Easy Python Code
      • How To Easily Convert Python List To String
      • How To Easily Get Python List Size – Top 2 Methods
  • Code Compiler
  • Free SEO Tools
  • More
    • About Us
    • Disclaimer
    • Contact Us
    • Privacy Policy
  • Toggle search form
Flutter neumorphic login page

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

Posted on October 19, 2022October 20, 2022 By ZeeshanAli No Comments on 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

  1. Introduction: Flutter Neumorphic Login Page UI Design
  2. Flutter Neumorphic Login Page UI Design Complete Source Code
  3. Conclusion

Introduction: Flutter Neumorphic Login Page UI Design

Flutter neumorphic login page

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:

  1. Flutter Column Widget
  2. Flutter Row Widget
  3. Flutter Snackbar Widget
  4. Flutter Container Widget
  5. Flutter Textfield Widget
  6. Flutter Text Widget
  7. Flutter Neumorphic
  8. Flutter Inkwell Widget
  9. Flutter Single Child Scroll View Widget
  10. Flutter Padding Widget
  11. Flutter Stack Widget
  12. Flutter Neumorphic Text
  13. Flutter Positioned Widget
  14. 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

Flutter neumorphic login page

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.

You might also like:

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

How To Set Flutter Textfield Expand Height [Flutter Easy Guide]

Neumorphic Flutter Login Screen Design [Free Source Code]

Beautiful Neumorphic Flutter Login UI Page Design [Free Source Code]

How To Implement Flutter RaisedButton Disable

Design Beautiful Flutter Login And Registration Screen [Free Source Code]

[Solved] Flutter Elevated Button Remove Padding Implementation

Astounding Neumorphic Flutter Login Page UI Design [Free Source Code]

Beautiful Neumorphic Flutter Registration Page Design [Free Source Code]

Amazing Neumorphic Flutter Registration Screen UI Design [Free Source Code]

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on WhatsApp
Flutter Forms Tags:beautifiul flutter neumorphic login ui, beautiful flutter neumorphic animated login form ui template, beautiful flutter neumorphic design template, beautiful flutter neumorphic form, beautiful flutter neumorphic form design, beautiful flutter neumorphic form example, beautiful flutter neumorphic form example template, beautiful flutter neumorphic form template, beautiful flutter neumorphic form ui design, beautiful flutter neumorphic form ui design example, beautiful flutter neumorphic form ui design template, beautiful flutter neumorphic form ui template, beautiful flutter neumorphic login form, beautiful flutter neumorphic login form template, beautiful flutter neumorphic login form template design, beautiful flutter neumorphic login form ui, beautiful flutter neumorphic login form ui design, beautiful flutter neumorphic login form ui design template, beautiful flutter neumorphic login form ui template, beautiful flutter neumorphic login form ui template design, beautiful flutter neumorphic login ui form, beautiful flutter neumorphic login ui form design, beautiful flutter neumorphic login ui form template, beautiful flutter neumorphic login ui form ui design template, beautiful flutter neumorphic login ui template design, beautiful flutter neumorphic template, beautiful flutter neumorphic template design, beautiful flutter neumorphic templates, beautiful flutter neumorphic ui, beautiful flutter neumorphic ui template, example flutter neumorphic login page, example flutter neumorphic login ui page, fltter login page ui, fltter login ui page ui, flutter neumorphic beautiful templates, flutter neumorphic column widget, flutter neumorphic container widget, flutter neumorphic form example, flutter neumorphic form template, flutter neumorphic Gesture Detector Widget, flutter neumorphic inkwell widget, flutter neumorphic login, flutter neumorphic login code, flutter neumorphic login design, flutter neumorphic login design screen ui, flutter neumorphic login design template, flutter neumorphic login design ui, flutter neumorphic login form, flutter neumorphic login form design, flutter neumorphic login form source code, flutter neumorphic login form tutorial, flutter neumorphic login form ui, flutter neumorphic login form ui design, flutter neumorphic login form ui design template, flutter neumorphic login form ui template, flutter neumorphic login form ui template design, flutter neumorphic login page, flutter neumorphic login page code, flutter neumorphic login page code example, flutter neumorphic login page code ui, flutter neumorphic login page design code, flutter neumorphic login page design example, flutter neumorphic login page example, flutter neumorphic login page free source code, flutter neumorphic login page source code, flutter neumorphic login page template, flutter neumorphic login page ui, flutter neumorphic login page ui design, flutter neumorphic login page ui speed code, flutter neumorphic login screen, flutter neumorphic login screen example, flutter neumorphic login screen source code, flutter neumorphic login screen template, flutter neumorphic login screen ui, flutter neumorphic login screen ui code, flutter neumorphic login screen ui code example, flutter neumorphic login screen ui design, flutter neumorphic login template, flutter neumorphic login templates, flutter neumorphic login ui, flutter neumorphic login ui code, flutter neumorphic login ui design, flutter neumorphic login ui design screen, flutter neumorphic login ui design template, flutter neumorphic login ui example, flutter neumorphic login ui form, flutter neumorphic login ui form design, flutter neumorphic login ui form source code, flutter neumorphic login ui form tutorial, flutter neumorphic login ui form ui, flutter neumorphic login ui form ui design, flutter neumorphic login ui form ui design template, flutter neumorphic login ui form ui template, flutter neumorphic login ui form ui template design, flutter neumorphic login ui free source, flutter neumorphic login ui page, flutter neumorphic login ui page code, flutter neumorphic login ui page code example, flutter neumorphic login ui page code ui, flutter neumorphic login ui page design, flutter neumorphic login ui page design code, flutter neumorphic login ui page design example, flutter neumorphic login ui page example, flutter neumorphic login ui page free source code, flutter neumorphic login ui page source code, flutter neumorphic login ui page template, flutter neumorphic login ui page ui, flutter neumorphic login ui page ui speed code, flutter neumorphic login ui sample, flutter neumorphic login ui screen, flutter neumorphic login ui screen design, flutter neumorphic login ui screen example, flutter neumorphic login ui screen source code, flutter neumorphic login ui screen template, flutter neumorphic login ui screen ui, flutter neumorphic login ui screen ui code example, flutter neumorphic login ui template, flutter neumorphic login ui templates, flutter neumorphic login ui templates free, flutter neumorphic login ui ui, flutter neumorphic login ui ui code, flutter neumorphic login ui ui example, flutter neumorphic login ui ui free source, flutter neumorphic login ui ui sample, flutter neumorphic login ui ui templates free, flutter neumorphic padding widget, flutter neumorphic positioned widget, flutter neumorphic Row Widget. flutter neumorphic Gradient Container Widget, flutter neumorphic single child scroll view widget, flutter neumorphic template, flutter neumorphic template app, flutter neumorphic template design, flutter neumorphic templates, flutter neumorphic templates free, flutter neumorphic text widget, flutter neumorphic textfield widget, flutter neumorphic ui code examples, flutter neumorphic ui design, flutter snackbar widget, flutter stack widget, form ui design template, form ui template flutter neumorphic, login form template flutter neumorphic, login ui form template flutter neumorphic, neumorphic flutter login ui screen ui code, template design flutter neumorphic, template flutter neumorphic, templates flutter neumorphic

Post navigation

Previous Post: Amazing Neumorphic Flutter Login Page UI Design [Free Source Code]
Next Post: [Solved] How To Easily Read File In Python

Related Posts

Flutter Login UI Form Template Beautiful Flutter Login UI Form Template Flutter Forms
neumorphic flutter login and registration page screen Neumorphic Flutter Login And Registration Screen Design [Free Source Code] Flutter Forms
neumorphic flutter login and registration page ui design Neumorphic Flutter Login And Registration Page Design [Free Source Code] Flutter Forms
flutter login and registration ui design Amazing Flutter Login And Registration UI Design [Free Source Code] Flutter Forms
flutter login and registration template Design Beautiful Flutter Login And Registration Template [Free Source Code] Flutter Forms
flutter login ui Gradient Flutter Login UI Form Template With Source Code – Flutter Templates 2022 Flutter Forms

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Flutter Firebase Change Password – Practical Example
  • How To Build Flutter ChatGPT App [Free Source Code]
  • Flutter Firebase Email Authentication [Login, Signup, Logout]
  • Flutter Firebase CRUD App [Create, Read, Update, Delete]
  • [Solved] Flutter Pinch Zoom Image In ListView Builder
  • Flutter Contacts List [Display Data And Make A Call]
  • Flutter Reorderable Grid View Easy Explanation [Detailed Example]
  • Python Nested Dictionary [Explained With 6 Easy Examples]
  • Python Dictionary Keys Method [Easy Python Code Programs]
  • How To Use Python Dictionary FromKeys Method [Easy Examples]
  • Python Dictionary Clear Method [Explained With Examples]
  • How To Use Python Set Update Method [Python Code Examples]
  • How To Use Python Set Union Method [Easy Python Programs]
  • Python Set Symmetric Difference Update Method [Easy Examples]
  • How To Use Python Set Symmetric Difference Method
  • How To Use Python Set Pop Method [Easy Code Guide]
  • How To Use Python Set Issubset Method [Easy Python Examples]
  • How To Use Python Set IsDisjoint Method [Detailed Examples]
  • How To Use Python Set Intersection Update Method
  • How To Use Python Set Intersection [Easy Python Tutorial]
  • How To Properly Use Python Set Discard Method

Menu

  • Let Me Flutter – Home
  • Flutter App Development
  • Python Programming
  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy

Categories

LATEST POSTS

  • Flutter Firebase Change Password – Practical Example
  • How To Build Flutter ChatGPT App [Free Source Code]
  • Flutter Firebase Email Authentication [Login, Signup, Logout]
  • Flutter Firebase CRUD App [Create, Read, Update, Delete]
  • [Solved] Flutter Pinch Zoom Image In ListView Builder

Copyright © 2023 Let Me Flutter.

Powered by PressBook Media WordPress theme