用户登录用的表单可以单独放在一个小部件里，在 login 下面，新建一个文件，放在 widgets 目录的下面，名字可以是 login_form.dart 。在这个文件里添加一个 StatefulWidget ，小部件的名字叫 LoginForm ，然后再导入需要的 material.dart。

打开 Login 小部件，在这里可以显示一个 LoginForm，这个小部件就是刚才我们新创建的。回到这个小部件继续编辑一下。

先用一个 Form 小部件，它的 child 可以用一个 Column，添加一竖排的小部件，放在它的 children 属性里面，值是一组 Widget。在这个表单里先添加两个文本字段

里面先用一个 TextFormField 添加一个文本表单字段，设置一下它的 decoration 属性，值是个 InputDecoration，里面先用 labelText 属性设置一下文本字段的标签文字，用户名，再添加一个 hintText ，设置一下提示文字。输入登录用户名。再用一个 helperText ，帮助文字先设置成空白。

复制一份，再添加一个文本字段，修改一下字段的标签文字，设置成 密码，提示文字设置成 输入登录用户密码。然后再用一个 obscureText 它的值设置成 true，这样在这个字段里输入的内容不会显示出来。

按钮

下面需要再添加两个按钮，可以先用一个 Container 小部件，里面用 padding 添加点内边距，值设置成 EdgeInsets.only ，只在 top 也就是上边添加点内边距，大小是 32.0 。

然后用 width ，把这个容器的宽度设置成 double.infinity 。 这个 Container 的 child 是个 RaisedButton ，一种按钮，小部件的 child 是个 Text ，文字是 登录，再用 style 设置一下文字的样式，值是 TextStyle，里面用 color 设置一下文字的颜色，设置成 Colors.white70。

点按按钮，会执行 onPressed 设置的方法，暂时用一个空白的方法。 再设置一下这个按钮的样式，color 是它的背景颜色，用一下 Theme.of context primaryColor ，用一下主题里的 primaryColor 这种颜色。

再用 splashColor 设置一下 splash 效果的颜色 ，可以设置成 Colors.white12 。 下面用 padding 添加点内边距，值是 EdgeInsets.all ，大小是 12.0。最后再把 elevation 设置成 0.0。

下面再添加一个按钮，先用一个 Container 小部件，把小部件的 width 设置成 double.infinity，小部件的 child 是一个 FlatButton ，按钮的 child 是个文本小部件，文字是 注册新帐号，再用 style 设置一下样式，TextStyle ，用 color 设置一下文字的颜色，Colors.black54。

再给按钮添加一个 onPressed 属性，值先用一个空白的方法。

最后再用 padding 添加点内边距，EdgeInsets.all 大小是 12.0 。

这个登录按钮的样式可以稍微再修改一下，内边距的大小设置成 16.0，然后再把按钮里的文字的字号改的大一点，添加一个 fontSize，大小可以设置成 18.0。