flutter入门技巧

按理来说，从事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 {
  @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)
                  ),)
                )
              ],
            ),
          )
        ],
      ),
    )
    )
    );
  }
}


复制代码