flutter中的一些小坑合集

1.修改主题按钮颜色(buttonColor)

flutter-io的教程上关于修改全局主题中的按钮颜色是这样写的

final ThemeData _kShrineTheme = _buildShrineTheme();

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    buttonColor: kShrinePink100,
  );
}

但是亲自尝试后发现RaisedButton还是灰色的，所以此写法不正确。
正确的写法应该是从buttonTheme中修改buttonColor，如下：

final ThemeData _kShrineTheme = _buildShrineTheme();

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    // buttonColor: kShrinePink100,//此种写法不正确
    buttonTheme: base.buttonTheme.copyWith(buttonColor: kShrinePink100),//应该用此种
  );
}

2.使用Navigator.of(context).pop();无法关闭dialog？

showDialog(
        //此处为Widget的Context
        context: buildContext,
        barrierDismissible: false,
        builder: (context) {
          //此处的context才是dialog的context。调用pop时需要使用此context
          dialogContext = context;
          return dialog;
        });

如上述代码，showdialog时传入的context为Widget的context。
如果此时想关闭dialog，应Navigator.of(dialogContext).pop();而不是传入Widget的Context，否则会关闭dialog所在的页面，而不会关闭dialog。

3.当含有内容的TextField激活后光标出现在了文字开头？

我这里遇到这样的情况，场景是修改用户名，我准备用带有输入框的dialog做，
第一次代码如下：

_showInputDialog(BuildContext context, Function callback, {String input}) {
    showDialog(
        context: context,
        builder: (context) => AlertDialog(
             content: TextField(
                autofocus: true,
                controller: TextEditingController(text: input),
              ),
              actions: <Widget>[
                new FlatButton(
                  child: new Text(Translations.text('Cancel')),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
                new FlatButton(
                  child: new Text(Translations.text('Confirm')),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                )
              ],
            ));
  }

但是按照上述写法，每次弹出的dialog，光标都会出现在文字之前，如下图。

image.png

问题出在TextField的controller，这里需要手动修改光标的位置，代码如下。

TextEditingController.fromValue(TextEditingValue(
                  text: input,
                  selection: TextSelection.fromPosition(
                    TextPosition(
                      affinity: TextAffinity.downstream,
                      offset: input.length,
                    ),
                  ),
                )

将controller的值替换为上述代码即可。

image.png

最后再扯两句，以当前场景为例，用户需要在点击确定的时候才去改变页面上的姓名，那么onChange()就不适用于这个场景了。
还是从controller入手，刚才的TextEditingController在showDialog之前先实例化为controller，最后点击确认的时候使用controller.text即可拿到TextField的内容。

ios异形屏适配

若页面底部有显示区域且不适用bottomNavigationBar的时候（如图），需手动在底部区域用一个padding包起来，距离底部bottom: MediaQuery.of(context).padding.bottom)，用于适配ios异形屏底部操作条。
代码实例:

padding: EdgeInsets.only(
            left: 10.0,
            top: 10.0,
            right: 10.0,
            bottom: MediaQuery.of(context).padding.bottom),