Flutter 常见的登录界面开发

登录页面在 App 开发中非常常见，本篇借登录页面的开发介绍了文本框 TextField组件的使用，同时使用文本框的装饰属性实现了个性化文本框设置。

业务逻辑

为了演示登录跳转，在分类浏览先做了一个简单的按钮，点击跳转到登录页面。实际的 App 中，通常会是触发某些需要登录才能查看的操作后再跳转到登录界面。

布局分析

界面如上图所示，从界面上看，整体内容区域是居中的，内容的布局是一个简单的列式布局，包括了顶部的一个 Logo（通常是 App图标），再往下是两个文本输入框，最后是登录按钮。整体布局比较简单，使用 Center 下嵌一个Column 进行列布局即可。

图片圆形裁剪

在 Flutter 中实行图片圆形裁剪有两个方式，一是使用外层的容器，通过将正方形的按圆形裁剪即可；二是使用内置的 CircleAvatar。不过从名字上看 CircleAvatar 用于头像的，因此这里使用容器的来实现圆形裁剪。封装一个获取圆形图片的方法_getRoun