Flutter 屏幕

一系列具有吸引力UI的登录屏幕、按钮、加载器和组件，使用Flutter构建，可直接用于您的应用程序。

最后更新：添加了SlideListView组件

截图和用法

SlideListView

一个组件，可以用来展示两个不同的视图，这两个视图可以通过一个浮动操作按钮进行切换。视图以漂亮的立方体旋转动画进行切换。

Screenshots on iOS

评分

Screenshots on iOS

加载器

Screenshots on iOS

颜色加载器

截图 颜色加载器 1 截图 颜色加载器 2 截图 颜色加载器 3
截图 颜色加载器 4 截图 颜色加载器 5

翻转加载器

示例 #1

FlipLoader(
  loaderBackground: Colors.red,
  iconColor: Colors.white,
  icon: Icons.email,
  animationType: "full_flip"),

示例 #2

FlipLoader(
  loaderBackground: Colors.blueAccent,
  iconColor: Colors.orangeAccent,
  icon: Icons.subway,
  animationType: "half_flip",
  rotateIcon: true,
),

示例 #3

FlipLoader(
  loaderBackground: Colors.green,
  iconColor: Colors.white,
  icon: Icons.wifi,
  animationType: "half_flip",
  shape: "circle",
  rotateIcon: false,
),
我正在开发更多加载器。这些加载器也将得到更新。感谢 jakeleveroni 为 FlipLoader 提供参数化。

按钮

Screenshots on iOS

简单圆形按钮

SimpleRoundButton(
    backgroundColor: Colors.redAccent,
    buttonText: Text("LOGIN", 
        style: TextStyle(
            color: Colors.white
        ),
    ),
    textColor: Colors.white,
)

简单圆形图标按钮

SimpleRoundIconButton(
    backgroundColor: Colors.orangeAccent,
    buttonText: Text("SEND EMAIL", 
        style: TextStyle(
            color: Colors.white
        ),
    ),        
    textColor: Colors.white,
    icon: Icon(Icons.email),
)

仅图标的简单圆形按钮

SimpleRoundOnlyIconButton(
  backgroundColor: Colors.blueAccent,
  icon: Icon(Icons.phone),
  iconAlignment: Alignment.center,
)

登录屏幕

登录屏幕 1

Screenshots on Android and iOS

用法

Container(
	child: LoginScreen1(
	primaryColor: Color(0xFF4aa0d5),
	backgroundColor: Colors.white,
	backgroundImage: new AssetImage("assets/images/full-bloom.png"),
    ),
)

登录屏幕 2

Screenshots on Android and iOS

用法

Container(
	child: LoginScreen2(
       backgroundColor1: Color(0xFF444152),
       backgroundColor2: Color(0xFF6f6c7d),
       highlightColor: Color(0xfff65aa3),
       foregroundColor: Colors.white,
       logo: new AssetImage("assets/images/full-bloom.png"),
       ),
   )

登录屏幕 3

Screenshots on Android and iOS

用法

Container(
	child: LoginScreen3(),
)

登录屏幕 4

Screenshot on Android

用法

Container(
	child: LoginScreen4(
       primaryColor: Color(0xff18203d),
       secondaryColor: Color(0xff232c51),
       logoGreen: Color(0xff25bcbb),
       ),
   )

登录屏幕 5

Screenshot on Android

用法

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
       }
       ),
   )

登录屏幕 6

Screenshot on Android

用法

Container(
	child: LoginScreen6(
       onLoginClick: () {
         // when login button is pressed
       },
       navigatePage: () {
         // change to signup screen
       }
       ),
   )

贡献和捐赠

欢迎贡献。如果您喜欢这个项目并想捐赠，请点击此处。

GitHub

查看 Github