Learn to build a basic app layout using only Flutter & Dart

Overview

basic-flutter-layout

Created by Thai Duong Do (Tad Wilson) for non-commercial purposes

If you have any questions about this project, please contact me at : [email protected]

Clone the repository by :
git clone <repository_url>

Then open the projects on any IDE and run:
flutter pub get
and feel free to use all codes and assets or try to contribute for my code if you investigate any problems.

Appreciate all your contributions!

Main topic

Learn how to build an basic Flutter app layout using only Dart.
We are going to approach to build 4 layouts related to "Basic Actions with An App" :
Login, Signup, Forgot password, Profile Track

Keep practicing and persevering!

“If future generations are to remember us more with gratitude than sorrow, we must achieve more than just the miracles of technology. We must also leave them a glimpse of the world as it was created, not just as it looked when we got through with it.”
-Lyndon B. Johnson, Former President of the United States of America-

Login Form

Learn to build layout for Login Form with actions

  • Add background image interface
  • Add SVG to simply represent any app & social media logo with flutter_svg library
  • Create input field for inputting Email address & Password
  • Create Login button for submitting validation
  • Validation with Form key
  • Display notification for success login

Overview

Login Form Image

Signup Form

Learn to build layout for Signup Form with actions

  • Create input field for inputting:
    • Email address
    • Password
    • Confirm password
    • First Name & Last Name
    • Select country code phone number and input with intl_phone_field library
  • Create checkbox for checking or agreeing terms & services for i.e
  • Create Signup button for submitting validation
  • Display notification for success signup

Overview

Signup Form Image

Forgot Password Form

Learn to build layout for Forgot Password Form with actions

  • Create box information display user guides
  • Create input field for inputting Email address to reset password
  • Create Submit button for submitting email address
  • Display notification for success submit

Overview

Reset Password Form Image

Profile Tracking Interface

Learn to build layout for Profile Tracking Interface with actions

  • Create user interface like social media with:
    • User's Cover Background Image
    • User's Avatar
    • User's Name
  • Create some instances for main features of profile tracking like:
    • Information Tracking
    • Setting
    • Logout

Overview

Profile Tracking Interface

You might also like...

A simple project that will help you learn how to build a simple face filter app with Flutter and Deep AR

A simple project that will help you learn how to build a simple face filter app with Flutter and Deep AR

flutter_deepar This is a simple project that will help you learn how to build a simple face filter app with Flutter and Deep AR You can read an articl

Mar 11, 2022

Learn how to build a multi-step form flow and how to use bloc to effectively isolate the presentation layer from the business logic layer.

Learn how to build a multi-step form flow and how to use bloc to effectively isolate the presentation layer from the business logic layer.

Multi-page Form Flow Learn how to build a multi-step form flow and how to use bloc to effectively isolate the presentation layer from the business log

Dec 19, 2022

A flutter brain game built using only pure flutter animations.

A flutter brain game built using only pure flutter animations.

Flutter Brain Game 👏 👍 🔥 This project designed using figma and built using flutter. Demo URL https://khalid-alsaleh-dev.github.io/BrainGame/#/ 💻 R

Jun 17, 2022

Klutter plugin makes it possible to write a Flutter plugin for both Android and iOS using Kotlin only.

The Klutter Framework makes it possible to write a Flutter plugin for both Android and iOS using Kotlin Multiplatform. Instead of writing platform spe

Dec 18, 2022

Example de layout in Flutter inspiration in Netflix App + Woody Woodpecker Characters

PicFlix Example de layout in Flutter inspiration in Netflix App + Woody Woodpecker Characters Cover extracted of https://twitter.com/winemcbride/statu

May 17, 2021

A quick and powerful Flutter layout with a bottom navbar.

A quick and powerful Flutter layout with a bottom navbar.

What is bottom_nav_layout? It is a quick flutter app layout for building an app with a bottom nav bar. You can get an app with fluent behavior running

Dec 21, 2022

flutter development bootcamp layout challenge #2.1

MiCard App Challenge Hey folks! This app is the continuation of the layout_challenge_app. I coded this app from scratch because unfortunate things hap

Jan 6, 2022

Layout of the flutter example.such as Row,Comlun,listview,Just for learning.

Layout of the flutter example.such as Row,Comlun,listview,Just for learning.

Just for learning ❤️ Star ❤️ the repo to support the project or 😄 Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flut

Nov 29, 2022

Application developed in Flutter with inspired layout in the Tinder

flutter_tinder_template This is an template implementation of the Tinder App with Flutter. How to Run the Project Ensure that you have the flutter ins

Sep 21, 2021
Owner
TAD
Hi everyone, I'm a code-liking person who is literally into discover and create fantastic projects, primarily Flutter and Python.
TAD
A grid-based layout system for Flutter, inspired by CSS Grid Layout

Flutter Layout Grid A powerful grid layout system for Flutter, optimized for complex user interface design. Click images to see their code ✨ Featuring

Felt 307 Dec 24, 2022
Flutter After Layout - Brings functionality to execute code after the first layout of a widget has been performed

Flutter After Layout - Brings functionality to execute code after the first layout of a widget has been performed, i.e. after the first frame has been displayed. Maintainer: @slightfoot

Flutter Community 432 Jan 3, 2023
This Repository is contain about learn Flutter and Dart [Learn]

Flutter-Dart-Code-Learn-Journey This Repository is contain about learn Flutter and Dart [Learn] Introduction Learn Dart Data Type Control Flow Collect

Adi Nugraha Putra 1 Jan 11, 2022
Call Kit is a prebuilt feature-rich call component, which enables you to build one-on-one and group voice/video calls into your app with only a few lines of code.

Call Kit (ZegoUIKitPrebuiltCall) Call Kit is a prebuilt feature-rich call component, which enables you to build one-on-one and group voice/video calls

ZEGOCLOUD 9 Dec 26, 2022
Achieve ~60 FPS, no matter how heavy the tree is to build/layout

flutter_smooth Achieve ~60 FPS, no matter how heavy the tree is to build/layout. ?? 3-second video output_small.mp4 (left = without smooth, right = sm

fzyzcjy 1k Jan 9, 2023
null 1 Jan 8, 2022
Netflix type clone app to learn animation and basic UI components..

netflix_clone A new Flutter application to learn animation and basic ui components.. Assets credit to dribbble artist Getting Started This project is

Divyam joshi 169 Dec 9, 2022
We created Flappy Bird, a straightforward game based on flutter animation, from scratch using only Dart & Flutter and no third-party games or animation components.

Flappy-Bird Description A ridiculous game created by Flutter, all you have to do is touch the screen to make the bird leap as long as you avoid the ba

hab 15 Dec 25, 2022
Learn how to build a tensorflow model on Techable Machine and then run it on flutter app.

Ml With Flutter Learn how to build a tensorflow model on Techable Machine and then run it on flutter app. Youtube Tutorial Show Support Recommend Me O

Sanskar Tiwari 133 Jan 3, 2023