Code Monkey home page Code Monkey logo

flutterscreens's Introduction

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.

flutterscreens's People

Contributors

aniketambore avatar meowzz95 avatar openedresource avatar priteshkeleven avatar rishavnaskar avatar saifallak avatar samarthagarwal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flutterscreens's Issues

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

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.

flutter重绘bug

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

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

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

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

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!

Login Screen Issue

Where to add the container in login screen1. I have add it at the below of "DON'T HAVE AN ACCOUNT?"
container but it throw exception .

please help me

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

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

Include UI preview via README.md

It would be better if the README.md contained a UI screenshot of the code that we are about to copy so that it's easier to determine whether it would fulfill our needs.

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.

Upper camel case on the methods

Hello,
I'm having warnings about Upper camel case used on methods,

You need to correct from:
 Widget SignupPage() {....


to:
Widget signupPage() {....

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

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

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.