前言

种一棵树最好的时间是十年前，其次是现在。

入门经验

按理来说，从事web前端开发的学习react native更适合一些，可偏偏选择了flutter，学起来只有掉头发的份

无奈没有项目实战，也只能忙里偷闲的时候自己画饼充饥。

本次成果最终样子：

具体实现过程并不难，后面后直接贴代码。这里主要总结一下学习到的开发技巧：

1. 图片的使用

图片文件夹如图所示，按照官网的教程 使用图片还需要在pubspec.yaml文件中进行配置：

这是官网的使用方式，担如果需要引入的图片很多，那得多鸡肋？所以查找了一下资料，果然存在懒人方式：

如图只需要配置一下文件的路径即可。

如何使用该图片，需要在widget中配置图片的路径，如图：

2. TextField

TextField widget需要被包裹在Scaffold widget中，否则会报错textfield widgets require a material widget ancestor。

3. 键盘弹起报错

当使用键盘输入时，突然报错A RenderFlex overflowed by 29 pixels on the bottom

解决办法: 使用 SingleChildScrollView将原生包裹。

4. 左右布局技巧

如图需要一个居左对齐，一个需要居右对齐。这里先取一个代号，忘记密码：leftItem; 短信验证码登录：rightItem.这里的实现方式是：

1. 使用row包裹两个leftItem和rightItem。这样实现在一行显示。

问题

图中 **忘记密码？**始终存在着一个padding无法去除，不解

代码：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);Widget buildTextField (name, placeHolder) {return new Container(height: ScreenUtil().setHeight(100),child: new TextField(decoration: InputDecoration(contentPadding: EdgeInsets.all(ScreenUtil().setWidth(10)),labelText: placeHolder,prefixStyle: TextStyle(letterSpacing: ScreenUtil().setWidth(10),color: Color(0xFF333333)),prefixText: name),));}return new Scaffold(body: new SingleChildScrollView(child: new Container(padding:new EdgeInsets.fromLTRB(ScreenUtil().setWidth(30), 0, ScreenUtil().setWidth(30), 0) ,color: Color(0xFFFFFFFF),child: new Column(children: <Widget>[new Container(height: ScreenUtil().setHeight(510),child: new Center(child: new Image.asset('asset/images/logo_01.png',width: ScreenUtil().setWidth(102),height: ScreenUtil().setWidth(114),),)),buildTextField('账号', '请输入账号'),new Container(margin: new EdgeInsets.only(top: ScreenUtil().setHeight(50)),child: new Container(height: ScreenUtil().setHeight(100),child: new TextField(decoration: InputDecoration(contentPadding: EdgeInsets.all(ScreenUtil().setWidth(10)),labelText: '请输入密码',prefixStyle: TextStyle(letterSpacing: ScreenUtil().setWidth(10),color: Color(0xFF333333)),prefixText: '密码',suffixIcon: Icon(Icons.remove_red_eye)),))),new Container(width: ScreenUtil().setWidth(690),margin: EdgeInsets.only(top: ScreenUtil().setHeight(80)),height: ScreenUtil().setHeight(70),child: new RaisedButton(onPressed: () {},child: new Text('登录',style: TextStyle(color: Color(0xFFffffff))),color: Color(0xFF1b82d2)),),new Container(padding: EdgeInsets.only(top: ScreenUtil().setHeight(20), bottom: ScreenUtil().setHeight(20)),child: new Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[new Expanded(
//                  child: new Text('忘记')child: new Row(children: <Widget>[new FlatButton(padding: EdgeInsets.zero,onPressed: null, child: Text('忘记密码？',style: TextStyle(color: Color(0xFF1b82d2)),)),new Expanded(child: new Text(''))],)),new FlatButton(padding: EdgeInsets.zero,onPressed: null, child: Text('短信验证码登录',style: TextStyle(color: Color(0xFF1b82d2)),))],),)],),)));}
}复制代码