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.

Last update: Jul 1, 2022

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.

GitHub

https://github.com/samarthagarwal/FlutterScreens
Comments
  • 1. SimpleRoundIconButton: onPressed() not working

    Good Morning,

    I'm trying to use the beautiful SimpleRoundButton but I'm not able to keep it working when pressed. This is my code:

    final loginButton = SimpleRoundIconButton(
          buttonText: Text('Log In', style: TextStyle(color: Colors.white)),
          icon: const Icon(Icons.fingerprint),
          backgroundColor: globals.fcsBlue,
          iconAlignment: Alignment.centerRight,
          onPressed: () async {
            setState(() {
              isPageBusy = true;
            });
            //All my logic here
          },
        );
    

    The button is correctly visualized but when I press it doesn't work. I'm on stable Flutter channel with v1.0.0. Can anyone help me? Thank you

    Reviewed by enricobenedos at 2019-03-21 19:51
  • 2. fix: migrated to flutter v2 and adding new screens

    Rebuilt the project using latest Flutter 2 SDK and Dart 2 SDK.

    Fixes

    • [x] Migrated the project to support latest Flutter Null Safety
    • [x] Modified most of the code which needed to be changed as many classes were deprecated, did not support null safety and had overflow issues and some bugs.
    • [x] Added Missing files and packages. Some of the code was reused from other repositories but were not included in the project. So had to include them as well

    New features

    • [x] Working on a newly set of pages based on Google Maps
    Reviewed by rishavnaskar at 2021-08-17 18:12
  • 3. Migration issue

    The project was made using an older version of Flutter and should be migrated to a newer one. @samarthagarwal would you allow me to take up this issue?

    Reviewed by rishavnaskar at 2021-08-17 16:11
  • 4. how to use timer.cancel() ? and it not work

          setState(() {
            tweenIndex = (tweenIndex + 1) % colors.length;
          });
        });
    

    and I add this code

    floatingActionButton: FloatingActionButton(
            child: Icon(Icons.refresh),
            onPressed: (){
              timer.cancel();
            },
          ),
    

    i try to cancel timer but it not work

    Reviewed by liuchuancong at 2018-11-24 14:57
  • 5. Login Screens - Botoom Overflowed by 76 Pixels

    Using the latest Flutter SDK

    
    
    import 'package:flutter/material.dart';
    
    import 'package:myapp/login_screen_1.dart';
    
    
    class Login extends StatefulWidget{
      @override
      _LoginState createState()=>new _LoginState();
    }
    class _LoginState extends State <Login>{
      @override
      void initState()  {
        super.initState();
      }
    
      @override
      Widget build (BuildContext context){
        return new Scaffold(
          body:_homeWidget()
        );
      }
      Widget _homeWidget(){
        return new Container(
    	child: LoginScreen1(
    	primaryColor: Color(0xFF4aa0d5),
    	backgroundColor: Colors.white,
    	backgroundImage: new AssetImage("assets/images/full-bloom.png"),
        ),
    );
      }
      
    }
    

    i get Bottom Overflowed by 76 Pixels, on Samsung S7 Edge

    Reviewed by mue-barakat at 2018-09-30 11:31
  • 6. Parameterized Loaders

    both FlipLoader and FlipLoader2 now support optional parameters.

    They support the following parameters:

    • loaderBackground - a Color type that effects the color of the loaders background Defaults to Colors.redAccent on FlipLoader and Colors.BlueAccent on FlipLoader2
    • iconColor - a Color type that effects the color of the icon. Defaults to Colors.white on both loaders
    • icon - a IconData type. Defaults to Icons.wifi on FlipLoader and Icons.sync on FlipLoader2
    Reviewed by jakeleveroni at 2018-08-22 00:58
  • 7. Icon disappears for a split of a second in FlipLoader when using svg

    Hi, I modifed code for Fliploader so that it takes a SvgPicture instead of IconData - but with that a bugg came up: afeter every rotation, svg image disappears for a split second, does any one maybe know why?And is there anything that can be done to fix that?

    best regards!

    Reviewed by neo-xy at 2021-03-14 09:24
  • 8. Missing packages 'flutter_ui_challenges'?

    In lib/landing_pages/page1.dart - lines 3 and 4, for some reason, sadly, it requests files from other projetcts - I actually checked out flutter_ui_challenges as well and the files are there. Don't know how they got mixed in here but now the project won't run withou them.

    Reviewed by williamsatoru at 2020-06-05 01:29
  • 9. Have Icons be able to swipe from left to right to activate button

    This would be cool to implement as most apps nowadays are heading toward that direction of adding slide buttons such as DoorDash when you have to swipe to confirm pickup or delivery. Anyone know how to do it?

    Reviewed by mike-gallego at 2019-08-14 19:26
  • 10. flutter重绘bug

    报错位置 frameWork.dart line: 5186 和 line: 5084 是同一个问题

    复现步骤 1.找到一张宽图像,此时屏幕旋转为横屏,在图像加载完前返回,此时屏幕旋转为竖屏 2.找到另一张宽图像,屏幕再次旋转为横屏,在图像加载完前返回,报错

    在雷电模拟器3.38版本稳定复现,Android 版本号5.1.1 在小米max2没有出现,Android版本号7.1.1

    注释掉旋转屏幕的代码后不再发生 怀疑旋转屏幕和返回上一个页面都会触发重绘制,第二次重绘制时需要移除的节点已经被移除过,断言失败,报错

    Reviewed by Rotanticu at 2019-07-20 03:49
  • 11. dispose controller in Fliploader

    Thanks for the nice library. In your Fliploader you need to add

    @override
    void dispose() {
      controller.dispose();
      super.dispose();
    }
    
    

    to prevent the warning of an active ticker on hot reload and probably other reuse-cases.

    Reviewed by thinkmobilede at 2018-08-29 08:25
  • 12. Animated Page Views

    • We often use page views while building an app
    • It would be wonderful is we could make a custom designed page view, available to everyone for use!

    #37

    Reviewed by rishavnaskar at 2021-08-18 13:27
  • 13. Added Sliding Page View Screen

    Created a sliding page view screen which can be quickly used by everyone

    • Based on 3 pages, but more can be added manually
    • Next version will include PageView.builder which will build pages depending on user's wish
    • Cool animated slider to control page transition
    • No external packages used

    Reviewed by rishavnaskar at 2021-08-18 13:24
  • 14. 'package:flutter_ui_challenges is not present in project

    Besides the two imports in your Yamil that wan't present, your project also does not include the below two imports

    import 'package:flutter_ui_challenges/core/presentation/res/assets.dart'; import 'package:flutter_ui_challenges/src/widgets/swiper_pagination.dart';

    Reviewed by dupiesdupreez at 2020-04-09 11:22

Related

This package helps you daily usable function and ready-made Widgets with ease.
This package helps you daily usable function and ready-made Widgets with ease.

Show some love and like to support the project Documentation API Docs are available. Platform Support Android iOS MacOS Web Linux Windows ✔️ ✔️ ✔️ ✔️

Jun 27, 2022
A small splashscreen used as intro for flutter applications easily with a lot of customizations ❤️🥳
A small splashscreen used as intro for flutter applications easily with a lot of customizations ❤️🥳

Splash Screen A splashscreen package to be used for an intro for any flutter application easily with a lot of customization Currently Supported by awe

Jun 17, 2022
A collection of Animations that aims to improve the user experience for your next flutter project.
A collection of Animations that aims to improve the user experience for your next flutter project.

A collection of Animations that aims to improve the user experience for your next flutter project.

Jun 8, 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

Jan 22, 2022
☀️ A Flutter package for some material design app intro screens with some cool animations.
☀️ A Flutter package for some material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. Checkout our fully responsive live example app. Table of contents Fea

Jun 3, 2022
Shimmer loading - A Flutter project to show how to add shimmer loading animation
Shimmer loading - A Flutter project to show how to add shimmer loading animation

shimmer_loading A Flutter project to show how to add shimmer loading animation.

Feb 6, 2022
Easily add staggered animations to your ListView, GridView, Column and Row children.
Easily add staggered animations to your ListView, GridView, Column and Row children.

Flutter Staggered Animations Easily add staggered animations to your ListView, GridView, Column and Row children as shown in Material Design guideline

Jun 23, 2022
Custom Layout with interactive add button to impove your UI and UX .
 Custom Layout with interactive add button to impove your UI and UX .

Interactive Add button layout Custom Layout with interactive add button to impove your UI and UX . the package is available here inspired from Oleg Fr

Sep 13, 2021
Fade animation - Add fade animation to your app easily
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Jan 28, 2022
Flutter fluid slider - A fluid design slider that works just like the Slider material widget
Flutter fluid slider - A fluid design slider that works just like the Slider material widget

Fluid Slider for Flutter Inspired by a dribbble by Virgil Pana. A fluid design s

Feb 18, 2022
✨ Recognize all contributors, not just the ones who push code ✨
✨ Recognize all contributors, not just the ones who push code ✨

Call for translators! We're looking for translators to help translate this spec for everyone! Read this documentation in the following languages 한국어 中

Jun 29, 2022
Multi directional infinite list with Sticky headers for Flutter applications
Multi directional infinite list with Sticky headers for Flutter applications

Sticky Infinite List Infinite list with sticky headers. This package was made in order to make possible render infinite list in both directions with s

Jun 12, 2022
An advance flutter UI Kit for developing responsive, cross platform applications.
An advance flutter UI Kit for developing responsive, cross platform applications.

Liquid Build fast, responsive, cross platform apps with Liquid. Liquid is an open source UI toolkit for developing cross platform apps in Flutter. Qui

Feb 26, 2022
On-boarding page for flutter applications
On-boarding page for flutter applications

onboarding This is a sample flutter onboarding plugin you use to attract first-time users when they land on your page, hence the name onboarding. You

Jun 5, 2022
A flutter package which contains a collection of some cool and beautiful effects; support android and ios
A flutter package which contains a collection of some cool and beautiful effects; support android and ios

flutter effects A flutter package which contains a collection of some cool and beautiful effects; support android and ios . Screenshot type support ch

Jun 21, 2022
A growing collection of cool, elegant, efficient and performance-optimized animation widgets.

im_animations About A growing collection of cool, elegant, efficient and performance-optimized animation widgets. Feedback For any feedback please fil

Apr 2, 2022
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Jun 27, 2022
🚅Flutter out-of-the-box collection animations written in pure dart.
🚅Flutter out-of-the-box collection animations written in pure dart.

LoadingIndicator A collection of out of the box loading animations written in pure dart, no extra dependency, inspired by loaders.css and NVActivityIn

Jun 27, 2022
A curated collection of awesome gradients made in Dart for Flutter
A curated collection of awesome gradients made in Dart for Flutter

Flutter Gradients A curated collection of awesome gradients made in Dart (port of https://webgradients.com for Flutter). Only linear gradients include

Apr 21, 2022