一套用 Flutter 构建的屏幕和吸引人的 UI

Flutter 登录界面

一组使用 Flutter 构建的屏幕和吸引人的 UI，可用于您的应用程序。不使用任何外部库。只需下载、添加到您的项目即可使用。

屏幕截图和用法

加载器

彩色加载器

彩色加载器 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 进行参数化。

按钮

简单的圆形按钮

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

用法

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

登录界面 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

用法

Container(
		child: LoginScreen3(),
)

GitHub

https://github.com/samarthagarwal/FlutterScreens