A collection of Login Screens, Buttons, Loaders and Widgets with attractive UIs built with Flutter

Related tags

Login FlutterScreen
Overview

Flutter Screens

A collection of Login Screens, Buttons, Loaders and Widgets with attractive UIs, built with Flutter, ready to be used in your applications.

Last Update: Added SlideListView Widget

Screenshots And Usage

SlideListView

A widget that can be used to present two different views that can be toggled using a Floating Action Button. The views toggle with a nice cube-rotation animation.

Screenshots on iOS

Rating

Screenshots on iOS

Loaders

Screenshots on iOS

ColorLoaders

Screenshot Color Loader 1 Screenshot Color Loader 2 Screenshot Color Loader 3
Screenshot Color Loader 4 Screenshot Color Loader 5

FlipLoaders

Example #1

FlipLoader(
  loaderBackground: Colors.red,
  iconColor: Colors.white,
  icon: Icons.email,
  animationType: "full_flip"),

Example #2

FlipLoader(
  loaderBackground: Colors.blueAccent,
  iconColor: Colors.orangeAccent,
  icon: Icons.subway,
  animationType: "half_flip",
  rotateIcon: true,
),

Example #3

FlipLoader(
  loaderBackground: Colors.green,
  iconColor: Colors.white,
  icon: Icons.wifi,
  animationType: "half_flip",
  shape: "circle",
  rotateIcon: false,
),

I am working on more loaders. These loaders will also be updated. Thanks to jakeleveroni for parameterizing the FlipLoader.

Buttons

Screenshots on iOS

Simple Round Button

SimpleRoundButton(
    backgroundColor: Colors.redAccent,
    buttonText: Text("LOGIN", 
        style: TextStyle(
            color: Colors.white
        ),
    ),
    textColor: Colors.white,
)

Simple Round Icon Button

SimpleRoundIconButton(
    backgroundColor: Colors.orangeAccent,
    buttonText: Text("SEND EMAIL", 
        style: TextStyle(
            color: Colors.white
        ),
    ),        
    textColor: Colors.white,
    icon: Icon(Icons.email),
)

Simple Round Icon Only Button

SimpleRoundOnlyIconButton(
  backgroundColor: Colors.blueAccent,
  icon: Icon(Icons.phone),
  iconAlignment: Alignment.center,
)

Login Screens

Login Screen 1

Screenshots on Android and iOS

Usage
Container(
	child: LoginScreen1(
	primaryColor: Color(0xFF4aa0d5),
	backgroundColor: Colors.white,
	backgroundImage: new AssetImage("assets/images/full-bloom.png"),
    ),
)

Login Screen 2

Screenshots on Android and iOS

Usage
Container(
	child: LoginScreen2(
       backgroundColor1: Color(0xFF444152),
       backgroundColor2: Color(0xFF6f6c7d),
       highlightColor: Color(0xfff65aa3),
       foregroundColor: Colors.white,
       logo: new AssetImage("assets/images/full-bloom.png"),
       ),
   )

Login Screen 3

Screenshots on Android and iOS

Usage
Container(
	child: LoginScreen3(),
)

Login Screen 4

Screenshot on Android

Usage
Container(
	child: LoginScreen4(
       primaryColor: Color(0xff18203d),
       secondaryColor: Color(0xff232c51),
       logoGreen: Color(0xff25bcbb),
       ),
   )

Login Screen 5

Screenshot on Android

Usage
Container(
	child: LoginScreen5(
       avatarImage: "path/to/image.png",
       onLoginClick: () {
         // when login button is pressed
       },
       googleSignIn: () {
         // when google signin button is pressed
       },
       navigatePage: () {
         // change to signup screen
       }
       ),
   )

Login Screen 6

Screenshot on Android

Usage
Container(
	child: LoginScreen6(
       onLoginClick: () {
         // when login button is pressed
       },
       navigatePage: () {
         // change to signup screen
       }
       ),
   )

Contribution and Donation

Feel free to contribute. If you like the project and want to donate, click here.

You might also like...

MyLogger improved fork of Flogs package developed in flutter that provides quick & simple logging solution

MyLogger MyLogger is improved fork of Flogs package developed in flutter that provides quick & simple logging solution. All logs are saved into DB whi

Apr 5, 2022

A collection of Screens and attractive UIs built with Flutter ready to be used in your applications. No external libraries are used. Just download, add to your project and use.

A collection of Screens and attractive UIs built with Flutter ready to be used in your applications. No external libraries are used. Just download, add to your project and use.

Flutter Screens A collection of Login Screens, Buttons, Loaders and Widgets with attractive UIs, built with Flutter, ready to be used in your applicat

Dec 31, 2022

This repository contains Collection of UIs made using Flutter. Original Design of all the UIs were created by someone else. I tried to recreate those UIs using Flutter

This repository contains Collection of UIs made using Flutter. Original Design of all the UIs were created by someone else. I tried to recreate those UIs using Flutter

Flutter-UIs-Collection This repository contains Collection of UIs made using Flutter. Original Design of all the UIs were created by someone else. I t

Nov 26, 2022

Authentication API client with Flutter (Login, Register, Google Login, Facebook Login, Apple Login)

Authentication API client with Flutter (Login, Register, Google Login, Facebook Login, Apple Login)

Flutter Auth App (Login, Register, Google Login, Facebook Login, Apple Login) To use this client, get the server up and running. Try it out now! App S

Jan 4, 2023

custom assets loaders for easy_localization

Custom assets loaders for Easy Localization package Supported formats JSON (JsonAssetLoader) CSV (CsvAssetLoader) HTTP (HttpAssetLoader) XML (XmlAsset

Nov 11, 2022

Notefy is a note-taking web app built with ReactJS and Django, with a subtle yet attractive UI and great functionality!

Notefy is a note-taking web app built with ReactJS and Django, with a subtle yet attractive UI and great functionality!

Notefy Notefy is a note-taking web app built with ReactJS and Django, with a subtle yet attractive UI and great functionality! Demo Here is the websit

Nov 20, 2022

Navigation the Multiple Screens ( All categories and Favourites Screens ) and add settings to sort the meals based on categories

meals_app Navigation the Multiple Screens ( All categories and Favourites Screens ) and add settings to sort the meals based on categories Getting Sta

Nov 29, 2021

Login UI made in flutter by using simple widgets , icons, buttons, and Colors.

Login UI made in flutter by using simple widgets , icons, buttons, and Colors.

Responsive LogIn UI in Flutter Login UI in Flutter. Visit Website Demo OutPut ## 🔗 Links Getting Started This project is a starting point for a Flutt

Dec 7, 2021

Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

Flutter widget to create a group of buttons fast 🚀 Included Radio and CheckBox buttons models with custom groping types 🤤 Show some ❤️ and star the

Dec 26, 2022

Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

flutter_donation_buttons Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more. Getting S

Dec 10, 2022

Album Image is based in photo_manager package and has the same concept as image_picker but with a more attractive interface to choose an image or video from the device gallery, whether it is Android or iOS

Album Image is based in photo_manager package and has the same concept as image_picker but with a more attractive interface to choose an image or video from the device gallery, whether it is Android or iOS

Album Image is based in photo_manager package and has the same concept as image_picker but with a more attractive interface to choose an image or vide

Oct 13, 2022

A flutter app when dealing with building UIs with flutter Widgets for beginners

mi_card A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Nov 15, 2021

Build Beautiful UIs with Flutter Widgets

Build Beautiful UIs with Flutter Widgets

I learnt this following thing from this project How to create Stateless Widgets What is the difference between hot reload and hot refresh and running

Dec 31, 2021

Build different UIs for Android, iOS, Web, Desktop, Wear, TV etc without the if/else checks in your widgets.

Build different UIs for Android, iOS, Web, Desktop, Wear, TV etc without the if/else checks in your widgets.

platform_widget_mixin Plugin to decouple widgets based on various platform properties. Features Build different UIs for Android, iOS, Web, Desktop, We

Nov 17, 2022

Cupertino buttons which are used as radio buttons in order to select one value

Cupertino buttons which are used as radio buttons in order to select one value

Flutter Cupertino Radio Choice Cupertino buttons which are used as radio buttons in order to select one value. Tutorial A complete tutorial how to use

Sep 18, 2022

Login and Sign up Screens UI For Flutter

Login and Sign up Screens UI For Flutter

Login and Sign up Screens UI A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to

Nov 21, 2022

A simple UI design with Login, Sign up and Home screens

A simple UI design with Login, Sign up and Home screens

assessment_task A simple UI design with Login, Sign up and Home screens. 📸 ScreenShots If you find this repo helpful to you, please don't forget to s

Nov 2, 2022

Creating terminal-based UIs and games in Dart should be accessible and fun!

Creating terminal-based UIs and games in Dart should be accessible and fun!

griddle Griddle simplifies the concept of creating 2D games or UI applications within a 2D-matrix, or grid, which in turn makes it a suitable cross-pl

Dec 19, 2022

Flutter social button - A flutter package to create social media login buttons easily to any flutter app

Flutter social button - A flutter package to create social media login buttons easily to any flutter app

Flutter Social Button is a flutter package to create social media login buttons easily to any flutter app.

Dec 5, 2022
Owner
Pham Quoc Duy
Pham Quoc Duy
Animated Login for Flutter is a ready-made login/signup screen with soft and pleasant animations.

Animated Login Author: Bahrican Yeşil Animated Login for Flutter is a ready-made login/signup screen with soft and pleasant animations. It is fully re

Bahrican Yesil 93 Jan 3, 2023
Login Animation Ruchika GuptaLogin Animation [953⭐] - Smooth animation from login to home by Ruchika Gupta.

Flutter Login Home Animation A new open-source Flutter project that enables the developer to quickly get started with the Flutter animation and applic

GeekyAnts 1.1k Dec 28, 2022
Provides login screen with login/signup functionalities to help speed up development

Flutter Login FlutterLogin is a ready-made login/signup widget with many animation effects to demonstrate the capabilities of Flutter Installation Fol

Near Huscarl 1.2k Jan 3, 2023
A Simple User Login Example Using Flutter And Firebase

Kullanıcı Girişi Bu uygulamada Firebase kullanarak kullanıcının giriş, kayıt ve şifre yenileme yapılması sağlanmıştır. Google ve Facebook hesabınızla

null 1 Oct 12, 2022
Flutter Login with Bloc State Management

bloc_app Login with BLoC (Cubit) Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Ebrar Bilgili 3 Jan 19, 2022
Beautiful Flutter login page

Login Page A Beautiful login page UI like this Login_Page Use in your application Tank you ☺ Platform ios ✔️ android ✔️ responsive Can be used on all

Amirziya 18 Dec 27, 2022
Login Screen UI

LoginScreen LoginScreen About fast login Screen b creating some Widget like buildEmail=> for textfield email buildPassword=> for textfield password bu

null 2 Apr 6, 2022
Flutter Web Signin Signup ui design

FlutterWebSigninSignup Intro Flutter Web Signin & Signup screen ui desing. Front-end: Flutter Check the screenshot : P.S Make sure to upgrade your Flu

Ihab Zaidi 12 Dec 15, 2022
A log in page for Abbey Foods app using Flutter

Abbey-Foods-App-Log-In-Page A log in page for Abbey Foods' app using Flutter. This is the capstone project assigned to Group 11, MObile App developmen

MubaH_dev 15 Oct 17, 2022
Responsiv ogin page flutter

responsiv_login_page_flutter A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get

Ali 3 Oct 26, 2021