type
status
date
slug
summary
tags
category
icon
password
<ins/>
<ins/>
用户界面(UI)是人机交互的区域。UI 设计以用户的视觉体验为优先。一个优秀的用户界面应该功能齐全、可靠且易于使用。在本文中,我们将为 Instagram 应用设计一个用户界面,使其真正具有 Instagram 的风格。让我们开始吧!
添加依赖项
在您的 pubspec.yaml 文件中添加以下依赖项:
防止构建异常
每次创建 Flutter 应用时,都需要配置应用级别的 gradle 文件,以避免运行时出现 gradle 构建异常。
前往 android > app > build.gradle,稍微向下滚动找到 defaultConfig,将 minSdkVersion 更改为 19,并在其后添加一个标志 multiDexEnabled,将其设置为 true,因为它是一个布尔值。
添加主题颜色
在 lib 目录中创建一个名为 const 的文件夹,并添加以下代码:
另外,添加两个方法用于垂直和水平间距:在需要间距时,直接调用这些方法,而不需要多次使用 SizedBox。
修改 main.dart
页面
前往 presentation > pages,并创建一个名为 credential 的目录,用于存放 Sign In Page 和 Sign Up Page 等认证页面,同时创建这些页面。
代码:
sign_in_page.dart
运行后,Sign In Page 的效果如下:
sign_up_page.dart
运行后,Sign Up Page 的效果如下:
小部件
前往 presentation > widgets,并在此创建以下两个小部件:
代码:
button_container_widget.dart
form_container_widget.dart
结论
在本部分中,我们已经成功设计了认证页面。接下来,下一篇我们将设计主页面。