Flutter UI/UX 示例?

Repo Flutter Hits

正在寻找一个很棒的 Flutter UI 工具包?
这里有一个精选的 Flutter UI 设计模板列表,可以集成到你的 Flutter 应用中,节省你设计小部件的时间。你可以在这里查看更多 UI 设计模板。

请献出你的❤️并 ⭐ 仓库以支持该项目

索引?

  1. 登录页面
  2. 电影流媒体应用
  3. 食品订购应用
  4. 图书应用
  5. 个人资料页面
  6. 走查屏幕

1. 登录页面 UI?

GIF 截图

使用的软件包

  1. flutter_svg
  2. flutter_screenutil

字体

  1. Poppins

2. 电影流媒体应用?

GIF 截图

使用的软件包

  1. flutter_svg
  2. simple_animations

字体

  1. Poppins

3. 食品订购应用?

GIF 截图

使用的软件包

  1. flutter_svg
  2. line_awesome_flutter

4. 图书应用 UI?

GIF 截图

使用的软件包

  1. flutter_svg
  2. flutter_staggered_grid_view

字体

  1. Poppins

5. 个人资料页面 UI?

GIF 截图

使用的软件包

  1. flutter_svg
  2. flutter_screenutil
  3. line_awesome_flutter

字体

  1. Poppins
    (自定义字体)

6. 走查屏幕?

这个有点特别……猜猜是什么?
我用 Kotlin 实现的! ?
这是走查屏幕,你可以通过更改图片和屏幕数量来根据你的使用情况进行调整。顶部的滑块会在你添加的任何数量的屏幕上滚动!

GIF 截图

资源

  1. 动画:cubic briezer
  2. 主色:#6C63FF
  3. 图片:undraw.co

字体

  1. Poppins

小部件 🚀

精心设计的小部件列表,这些小部件实际上是你需要的并且会发现有用的,而不是用大量低质量的小部件让你不知所措。

索引?

  1. 圆角输入框
  2. Flushbar 警报服务

1. 圆角输入框?

GIF

使用

RoundedInputField(
    textEditingController: controllerName,
    hintText: "Your Email",
    icon: Icons.email,
    cursorColor: Colors.black,
    editTextBackgroundColor: Colors.grey[200],
    iconColor: Colors.black,
    onChanged: (value) {
      name = value;
     },
 )

2. Flushbar 警报服务

要使用此小部件,你需要在 pubspec.yaml 中包含一个名为 flushbar 的依赖项,如果你想要错误警报,你需要在 type 字段中提供 AlertType.error,警告也同样适用。
GIF

使用

CustomButton(
    text: "Add to Cart",
    onPressed: () {
      AlertService().showAlert(
         context: context,
         message: 'product has been added to cart',
         type: AlertType.success,
         );
     },
 )

哆啦A梦?

有哆啦A梦的粉丝吗?为了放松,我设计了一些卡通

感谢从哆啦A梦这里来到这里 :xD

作者 ✍️

  1. Ajay Prabhakar @chromicle

想贡献? 💻

在提交 pull request 之前,请阅读 CONTRIBUTING.md。我们欢迎任何形式的帮助?

许可证?

此仓库根据 MIT 许可证授权。请查看 LICENSE 了解更多信息。

注意

这些示例的所有类别都对所有贡献开放。伙计,它们完全免费
如果你觉得这个项目有用,请考虑在 Github 上给它一个 ⭐ 并通过社交媒体⚡ 分享给你的朋友。
编码愉快?。

GitHub

查看 Github