Flutter Screens

登录屏幕、按钮、加载器和小部件的集合，具有吸引人的 UI，使用 Flutter 构建，可以在您的应用程序中使用。

最后更新：添加 SlideListView 小部件

截图和用法

幻灯片列表视图

一个小部件，可用于呈现两个不同的视图，可以使用浮动操作按钮进行切换。视图切换带有漂亮的立方体旋转动画。

评分

加载

颜色加载器

彩色装载机 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(),
)

登录屏幕 4

用法

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

登录屏幕 5

用法

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

用法

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

贡献和捐赠

随意贡献。如果您喜欢该项目并想捐款，请单击此处。