前言
种一棵树最好的时间是十年前,其次是现在。
入门经验
按理来说,从事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.这里的实现方式是:
- 使用row包裹两个leftItem和rightItem。这样实现在一行显示。
问题
图中 **忘记密码?**始终存在着一个padding无法去除,不解
代码:
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget 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> {
@override
Widget 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)
),)
)
],
),
)
],
),
)
)
);
}
}
复制代码