Arisweeklyfltrchlngemnu - Login Concept and Menu challenge with flutter

Overview

weekly_flutter_challenge_6_menu

Challenge summary:

This challenge is about recreating two of Kuenzang Sherub's designs: Login Concept and Menu. The former contains a login form, that will let me learn to handle forms in Flutter apps. The latter requires me to use 3D transformation to move the login page away and reveal the menu. The app itself is a simple one, but let me learn very important aspects of developing an app.

Things that I have learned during the development of this challenge app:

  1. I have started using DevTools for this project to debug layout problems.
  2. For the login page I have created a Form with TextFormField that are validated. Earlier I have also used a TextField.
  3. I have used Wrap to properly display login page elements when soft keyboard is visible.
  4. During development I have used a SnackBar widget as a way to test a form.
  5. The Transform widget with Matrix4 allowed me to create 3D transformation of Login page.
  6. Using the FocusScope I have taken the focus away from a TextFormField and as a result I have hidden a soft keyboard.
  7. The ListView and ListTile let me easily and nicely set up a menu.
  8. I have also tried RichText with TextSpan to mix differently styled text. This was later removed.
  9. Used CircleAvatar to show, well a circle avatar in menu.

Original design

Original design consists of two pages:

  1. Login page that is visible when application starts.
  2. Menu that is revealed when user logs in or swipes the screen to the right.

Original design

Challenge result - click GIF to see video

Challenge result

Youtube link

https://youtu.be/I5z-3GufVb4

You might also like...

Login-page-ui - An animated login page, designed with dart

Login-page-ui - An animated login page, designed with dart

Beautiful Login Page UI Design and Animation ScreenShots This is one of my best

Apr 25, 2022

Login-with-Register-page - A Login with Register page combined with all movable images made with Dart

Login-with-Register-page - A Login with Register page combined with all movable images made with Dart

Flutter login page with register page A new dart project designed for login page

Aug 2, 2022

An e-commerce UI concept in Flutter for Android and iOS

An e-commerce UI concept in Flutter for Android and iOS

Welcome to Flutter-Shopping-UI-Kit 👋 Shopping UI design in Flutter Flutter-Shop

Sep 14, 2022

A Boilerplate Project which adopts the concept of Clean Architecture and Modularization.

A Boilerplate Project which adopts the concept of Clean Architecture and Modularization.

Flutter-Works Boilerplate Table Of Content Overview Getting Started Requirement Setup Setup Firebase Android IOS Change Package Name Running/Debugger

Aug 28, 2022

Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navigation Drawer in Flutter.

Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navigation Drawer in Flutter.

Flutter Tutorial - Collapsible Sidebar Menu & Navigation Drawer Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navig

Aug 1, 2022

A Side Menu plugin for flutter and compatible with liquid ui for flutter

A Side Menu plugin for flutter and compatible with liquid ui for flutter

Liquid Shrink Side Menu A Side Menu plugin for flutter and compatible with liquid ui Side Menu Types There are 8 configuration of Liquid shrink side m

Sep 2, 2022

An easy to use side menu in flutter and can used for navigations

An easy to use side menu in flutter and can used for navigations

Easy Sidemenu Easy sidemenu is An easy to use side menu (bar) for flutter that you can use for navigations in your application. Sidemenu is a menu tha

Sep 18, 2022

A flutter UI package provides a cell widget that has leading and trailing swipe action menu.

A flutter UI package provides a cell widget that has leading and trailing swipe action menu.

Language: English |中文简体 flutter_swipe_action_cell A package that can give you a cell that can be swiped ,effect is like iOS native If you like this pa

Sep 14, 2022

Flutter plugin to display a popup menu button widget with handsome design and easy to use.

Flutter plugin to display a popup menu button widget with handsome design and easy to use.

menu_button Flutter widget to display a popup menu button very simply and easily customizable. Resources Documentation Pub Package GitHub Repository I

Mar 11, 2022
Owner
Behruz Hurramov
Behruz Hurramov
Behruz Hurramov
This is a repository for Flutter Focused Menu, an easy to implement package for adding Focused Long Press Menu to Flutter Applications

Focused Menu This is an easy to implement package for adding Focused Long Press Menu to Flutter Applications Current Features Add Focused Menu to Any

Paras Jain 155 Sep 9, 2022
Arissettingsmenuexm - Settings Menu with different choices by clicking on a Popup Menu Button in Flutter

Flutter Tutorial - Settings Menu & AppBar Dropdown Menu Show a Flutter Settings

Behruz Hurramov 1 Jan 9, 2022
Flutter-pop-up-menu - Pop up Menu - Mobile Devices Programming

Pop Up Menu App A flutter demo app with a pop up menu button Developer Alexander Sosa (https://www.linkedin.com/in/alexander-sosa-asillanes/) Technolo

Alexander Sosa 0 Jan 3, 2022
Challenge cannabis - Challenge for Slicing UI Cannabis from FLutter Fan Indonesia

challenge_cannabis Challenge buat Slicing UI Cannabis dari om Kipas Angin FLutte

wind city 3 May 11, 2022
Login UI Concept made with flutter (2-in-1)

Flutter UI Concept Made by Maadhav Sharma Subscribe to Code Decoders Youtube Follow me on Instagram Follow me on Twitter My Website ScreenShots Design

Maadhav Sharma 145 Sep 9, 2022
Flutter Login Signup - Flutter Login and Signup App

Flutter_Login_Signup Authors @Adiikust License MIT ?? Skills Dart, Flutter, Adob

Adnan Hameed 5 Sep 15, 2022
Flutter Login Screen with Firebase Auth and Facebook Login

Flutter Login Screen with Firebase Auth and Facebook Login Jumpstart your Flutter app development with this pre-built Flutter starter kit. Don't reinv

null 284 Sep 18, 2022
Login-and-reisp - A Mobile app Login Page UI with Flutter

Flutter Login Page UI Watch it on YouTube Mobile app Minimal Auth Screen with Fl

null 10 Sep 8, 2022
Flutter Login Screen with Firebase Auth and Facebook Login

Jumpstart your Flutter app development with this pre-built Flutter starter kit. Don't reinvent the wheel by writing the boring boilerplate starter code.

null 8 Aug 3, 2022
Tinder login page - Implementation of the Tinder app login screen with flutter

Tinder (login page) Implementação da tela de login do app Tinder a partir da lei

Eduardo Farias 0 Feb 5, 2022