Flutter 登录屏幕

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

最后更新：已添加加载器

屏幕截图与用法

加载器

loaders_1

ColorLoader 需要 colors 和 duration 作为必填参数。FlipLoader 和 FlipLoader2 不需要任何参数。

颜色加载器

List<Color> colors = [
    Colors.red,
    Colors.green,
    Colors.indigo,
    Colors.pinkAccent,
    Colors.blue
];
 

//Use in widget tree
ColorLoader(
   colors: colors,
   duration: Duration(milliseconds: 1200)
),

翻转加载器

示例 #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 添加参数。

按钮

buttons1

简单圆形按钮

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

login_screen_1

用法

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

登录屏幕 2

login_screen_2

用法

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

登录屏幕 3

login_screen_3

用法

Container( child: LoginScreen3(), )

GitHub

https://github.com/samarthagarwal/FlutterScreens