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.

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.

Comments
  • SimpleRoundIconButton: onPressed() not working

    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

    opened by enricobenedos 6
  • fix: migrated to flutter v2 and adding new screens

    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
    opened by rishavnaskar 4
  • Migration issue

    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?

    opened by rishavnaskar 2
  • how to use timer.cancel() ? and it not work

    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

    opened by liuchuancong 2
  • Login Screens - Botoom Overflowed by 76 Pixels

    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

    opened by mue-barakat 2
  • Parameterized Loaders

    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
    opened by jakeleveroni 2
  • Icon disappears for a split of a second in FlipLoader when using svg

    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!

    opened by neo-xy 1
  • Missing packages 'flutter_ui_challenges'?

    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.

    opened by williamsatoru 1
  • Have Icons be able to swipe from left to right to activate button

    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?

    opened by mike-gallego 1
  • flutter重绘bug

    flutter重绘bug

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

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

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

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

    opened by Rotanticu 1
  • dispose controller in Fliploader

    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.

    opened by thinkmobilede 1
  • Animated Page Views

    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

    opened by rishavnaskar 0
  • Added Sliding Page View Screen

    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

    opened by rishavnaskar 0
  • 'package:flutter_ui_challenges is not present in project

    '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';

    opened by dupiesdupreez 5
Owner
Samarth Agarwal
App/Web Developer, Instructor, Author, Content Creator Visit https://www.youtube.com/user/thesamarthagarwal to learn from me.
Samarth Agarwal
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 ✔️ ✔️ ✔️ ✔️

Bhoomin Naik 51 Dec 23, 2022
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

DPLYR 283 Dec 30, 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.

Ezaldeen Sahb 134 Dec 24, 2022
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

Mohit rao 6 Nov 21, 2022
☀️ 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

Ayush Agarwal 652 Dec 30, 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.

null 0 Feb 6, 2022
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

null 1.2k Jan 6, 2023
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

Dokkar Rachid Reda 20 Sep 13, 2021
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

Jay Raj 2 Feb 18, 2022
✨ 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 한국어 中

All Contributors 6.8k Jan 4, 2023
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Mazouzi Aymene 3 Oct 6, 2022
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

Denis Beketsky 291 Dec 20, 2022
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

StackOrient Pvt. Ltd. 29 Dec 9, 2022
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

Eyoel Defare 9 Nov 2, 2022
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

大海豚 462 Jan 3, 2023
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

iMujtaba Nazki 17 Nov 13, 2022
How to add a notification badge in bottom navigation bar

bottom_navigation_badge / BottomNavigationBadge BottomNavigationBadge is a Flutter class developed by westdabestdb. Getting Started Add this to your p

Görkem Erol 50 May 21, 2022
Add an indicator for a progression. You can customize indicators (shape, color, ..)

dots_indicator Widget to display dots indicator to show a position (for a PageView for example). Installation You just need to add dots_indicator as a

Jean-Charles Moussé 139 Dec 1, 2022
Add particle effects to anything.

Showcase Features Highly customizable (Don't like my particle effects? Make your own with little effort!) Very easy to use A lot of premade particles

Norbert Kozsir 271 Oct 2, 2022