flutter
screens
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 it.
screenshots and usage
loaders
![[2025] 8 Attractive Screens Collection loaders](https://i0.wp.com/flutterawesome.com/content/images/2018/12/loaders.gif?w=770&ssl=1)
colorloaders
![]() | ![]() | ![]() |
---|---|---|
![]() | ![]() |
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
![[2025] 8 Attractive Screens Collection buttons1](https://i0.wp.com/flutterawesome.com/content/images/2018/12/buttons1.png?w=770&ssl=1)
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
![[2025] 8 Attractive Screens Collection login_screen_1](https://i0.wp.com/flutterawesome.com/content/images/2018/12/login_screen_1.png?w=770&ssl=1)
usage
container(
child: loginscreen1(
primarycolor: color(0xff4aa0d5),
backgroundcolor: colors.white,
backgroundimage: new assetimage("assets/images/full-bloom.png"),
),
)
login screen 2
![[2025] 8 Attractive Screens Collection login_screen_2](https://i0.wp.com/flutterawesome.com/content/images/2018/12/login_screen_2.png?w=770&ssl=1)
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
![[2025] 8 Attractive Screens Collection screenshots on android and ios](https://i0.wp.com/raw.githubusercontent.com/samarthagarwal/flutterscreens/master/screenshots/login_screen_3.gif?w=770&ssl=1)
usage
container(
child: loginscreen3(),
)
Comments are closed.