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.

Rating

Loaders

ColorLoaders

Color Loader 1	Color Loader 2	Color Loader 3
Color Loader 4	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

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

Usage

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

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

Usage

   Container(
    child: LoginScreen3(),
   )

Login Screen 4

Usage

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

Login Screen 5

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

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.