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.
Comments are closed.