Flutter(十)——登录界面实现

登录界面设计

login_page.dart登录页面代码

home_page.dart主页面代码

mian.dart程序入口代码

3个注意事项

在手机App的开发过程中，基本App都会有登录界面，所以我们今天将使用Flutter来实现登录界面的效果。

首先，我们需要掌握登录界面有那些元素，比如用户名，密码提示以及输入框，其次可能还有上面的logo，下面的登录按钮，以及忘记密码等显示。

前面博主讲解组件的时候，已经讲过，在Flutter开发中，一切皆组件，也就是说，你可以把界面直接赋值给一个变量，比如前面的操作，那么多return代码，可以直接复制给一个变量，这样方便插入操作，那么多嵌套的写着，要是弄丢一个括号，估计找就得找死，所以赋值变量，然后放置在return中，代码看起来就会简洁很多。

这里我们先写登录页面，login_page.dart代码如下：

上面注释已经非常详细了，这里就不在赘述，细心的读者应该看到这段代码中有一个登录按钮，点击之后的跳转界面，也就是大多数App的首页，所以我们还需要写一个跳转之后的界面home_page.dart，代码如下：

这上面的注释也是非常的详细，而且线性渐变之前介绍组件的时候有讲解过，应该很好理解，两个界面都写完了，现在重要的就是App程序入口代码需要写，mian.dart代码如下：

这段代码有几点需要注意：

第一，我们之前写的所有应用，是不是右上角都有一个debug标签呢？这在实际应用中肯定不会要的，所以这里设置debugShowCheckedModeBanner属性为false，就不会显示debug标签。

第二，前面我们跳转页面用的pop()，然后push()，出栈进栈的方式操作，这里我们定义了一个路由，将使用到的页面全部写在里面，后续需要使用的时候，只要使用如下代码就可以直接跳转：

这就是刚在定义路由routes里面的key值，这种跳转属于静态路由，前面用到的属于动态路由，两种都可以跳转界面，这里提及一样方便大家理解。

第三，home定义App首次进入页面的主页面，其中也可以设置initialRoute属性来达到初始页面的设置，如果没有initialRoute这个属性，那么会去寻找路由表里面的’/’，或者MaterialApp的home属性。但需要特别注意一下，路由表（也就是我们上面代码里面定义的routes变量）里面的’/’（key值） 和MaterialApp的home属性，二者不能同时存在，但是必须有一个存在。

当initialRoute和’/‘或者MaterialApp的home属性同时存在的时候，initialRoute的优先级高于二者。意思就是如果initialRoute定义的页面和’/'或者MaterialApp的home设置的页面不一样，用户看到的是initialRoute定义的页面。

当MaterialApp的home属性定义了主页面，而initialRoute没有定义的时候，用户看到的就是’/'或者MaterialApp的home多对应的页面。

登录界面的代码就讲到这里，显示的效果如博文首图所示。

该博文代码的下载地址：点击下载