An awesome list that curates the best Flutter libraries and tools. Flutter Awesome
23 September 2018 / Login Screen

A collection of Screens with attractive UIs built with Flutter

A collection of Screens with attractive UIs built with Flutter

Flutter Login Screens

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

Last Update: Added Loaders

Screenshots And Usage

Loaders

loaders_1

ColorLoader requires colors and duration as mandatory parameters. FlipLoader and FlipLoader2 do not require any parameters.

Color Loader

List<Color> colors = [
    Colors.red,
    Colors.green,
    Colors.indigo,
    Colors.pinkAccent,
    Colors.blue
];
 

//Use in widget tree
ColorLoader(
   colors: colors,
   duration: Duration(milliseconds: 1200)
),

Flip Loader

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

buttons1

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

login_screen_1

Usage

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

Login Screen 2

login_screen_2

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

login_screen_3

Usage

Container( child: LoginScreen3(), )

GitHub

Flutter Awesome

Read more posts by this author.

Read More

— Flutter Awesome —

Login Screen

    21 January 2019

    Flutter Login Screen with Firebase Auth and Facebook Login

    Jumpstart your Flutter app development with this pre-built Flutter starter kit.

    07 December 2018

    A collection of Screens and attractive UIs built with Flutter

    A collection of Screens and attractive UIs built with Flutter ready to be used in your applications.

    23 September 2018

    A new open-source Flutter Login Home Animation

    A new open-source Flutter project that enables the developer to quickly get started with the Flutter animation and application development.

See all 5 posts →

— Next Post —
23 September 2018

Flutter app for collection of UI in a UIKit

The goal of this project is to provide an ultimate collection of real world app's UIs.

UI
— Prev Post —
23 September 2018

A login page built with flutter

A login page built with flutter inspired by a design found on Uplabs.

Login Screen
Latest
A Flutter plugin to retrieve and manage contacts
2019-02-20
New and fresh Facepunch app made in Flutter
2019-02-20
A third party Android application for the Pi-Hole® dashboard
2019-02-18
A news app built with flutter and inspired by Fortnightly
2019-02-18
Pick image/video from album by flutter
2019-02-18
Tag
Apps 84 Templates 22 Animation 13 Material Design 13 Images 12 UI 10 Games 10 Calendar 9 Todo 9 Miscellaneous 8 Chart 7 Music Player 7 Login Screen 6 Navigation 6 Audio 6 Video 6 Movie 6 Picker 6 Swipe 5 Maps 5 Authentication 5 News 5 Slider 4 Editor 4 Color 3 Button 3 Onboarding 3 Intro Screen 3 Contacts 3 Dialog 3
Flutter Awesome © 2019
Latest Posts