flutter 
login screens
a collection of login screens, buttons and loaders with attractive uis, built with flutter, ready to be used in your applications.
last update: added loaders.
screenshots and usage
loaders
colorloader requires colors and duration as mandatory parameters. fliploader and fliploader2 do not require any parameters.
color loader
list<color> colors = [
colors.red,
colors.green,
colors.indigo,
colors.pinkaccent,
colors.blue
];
//use in widget tree
colorloader(
colors: colors,
duration: duration(milliseconds: 1200)
),
flip loader
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(), )
Comments are closed.