Flutter开发中的一些Tips
异常大致如下：
A RenderFlex overflowed by 22 pixels on the bottom.可以看到底部溢出了22个像素，可能在18：9的手机以上不太会出现这种问题，因为屏幕的高度足够。但是这种16：9的手机可能会暴露出来。解决的方法有两种：
大家可以根据实际需求选择。
页面如下：
上图中，我选中了最后一个输入框，但因为输入法默认都是在输入框的下方弹出，然而上面盖着这个“提交”按钮，发生了遮挡。
最终我的解决方法就是使用Column配合Expanded来实现。修复后如下：
一旦有部件固定在顶部或者底部（严谨点的话可以说是在屏幕的四边）。那我我们最好使用SafeArea来包一下。因为Android 和 IOS都有状态栏，甚至IOS还有叫做“HomeIndicator”的横条。所以一不留神就会出现适配问题。 我们在Flutter中常使用的BottomNavigationBar 和 AppBar 其实就在内部处理了此类问题。以 AppBar源码为例：
class _AppBarState extends State<AppBar> {
@override
Widget build(BuildContext context) {
if (widget.primary) {
appBar = SafeArea( // <--- 1
top: true,
child: appBar,
);
}
return Semantics(
container: true,
child: AnnotatedRegion<SystemUiOverlayStyle>(
value: overlayStyle,
child: Material( // <--- 2
color: widget.backgroundColor
?? appBarTheme.color
?? themeData.primaryColor,
child: Semantics(
explicitChildNodes: true,
child: appBar,
),
),
),
);
}
}
所以使用方法为：
Material( // 需要颜色填充到边界区域可以使用
color: Colors.white,
child: SafeArea(
child: Container(),
),
)
还是上面的页面，我们对比一下处理前后的效果：
Flutter 在开发中，让人诟病的就是大量的嵌套，而我们只能尽量避免。比如将一些部件、属性进行封装，避免重复的书写。不过封装也讲究使用场景。如果这种样式的部件仅仅只是某一两处使用，封装显得有点小题大做。并且封装的大而全也会增加使用的复杂度。那么这时就可以使用Theme这种办法。 举一个例子，在下图中圈起来的部分有三个按钮，它们的高度相同，文字、圆角大小也相同。如果每一个都去设定这些属性，未免太过麻烦。
这时我们使用Theme去统一修改它们的样式，就会很方便了。
Theme(
data: Theme.of(context).copyWith(
buttonTheme: ButtonThemeData(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
minWidth: 64.0,
height: 30.0,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0),
)
),
textTheme: TextTheme(
button: TextStyle(
fontSize: 14.0,
)
)
),
child: Row(
children: <Widget>[
FlatButton(
color: Color(0xFFF6F6F6),
onPressed: (){},
child: Text("联系客户"),
),
......
FlatButton(
color: Color(0xFFF6F6F6),
onPressed: (){},
child: Text("拒单"),
)
],
),
)
同时使用Theme还可以修改许多默认的设置，比如FlatButton的默认宽度为88，高度为36，但是FlatButton中没有直接修改的属性，网上好多的方法都是通过包一层Container去修改，不仅增加的嵌套，有些需求还不能达到。所以善用Theme可以让你省时省力，不过缺点就是你需要去翻翻源码，寻找使用这些Theme的地方。
注意部分组件在Android与IOS平台之间的差异。
1. Scaffold的 AppBar，AppBar中默认的title在Android中靠左显示，IOS中居中显示。如果需要两个平台效果统一，需要设置在AppBar中主动设置centerTitle属性。同时AppBar的返回箭头图标也不相同，统一的话需要自定义leading。
如果需要两个平台效果统一，我们不使用自带效果，可以自定义一个。
Navigator.push(context, PageRouteBuilder(transitionDuration: Duration(milliseconds: 300),
pageBuilder: (context, animation, secondaryAnimation){
return new FadeTransition( //使用渐隐渐入过渡,
opacity: animation,
child: TestPage(),
);
})
);要么修改Theme，统一两平台的实现。：
class MyApp extends StatelessWidget {
static const Map<TargetPlatform, PageTransitionsBuilder> _defaultBuilders = <TargetPlatform, PageTransitionsBuilder>{
TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
};
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
pageTransitionsTheme: PageTransitionsTheme(
builders: _defaultBuilders
)
),
...
);
}
}3. ScrollPhysics效果，可以滑动的部件都有一个physics属性。滑动到边界时，Android平台为边缘阴影的效果ClampingScrollPhysics，IOS为回弹效果BouncingScrollPhysics。如果需要统一，可以指定physics属性。
4. 状态栏方面，Android平台默认是半透明的效果，IOS则是透明效果。比如Android要实现IOS的效果，可以设置状态栏为透明。不过IOS要实现Android的效果则不行。。。，难道只能自定义？有知道方法的可以分享一下。
void main(){
runApp(MyApp());
// 透明状态栏
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle =
SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
当TextField的keyboardType属性设置为TextInputType.phone 或TextInputType.number时，IOS系统弹出的数字输入键盘没有"完成"按钮，导致输入法无法关闭。当然了Android不存在这个问题。
比较成熟有效的方案是在键盘弹出的上方悬浮一个按钮，点击可以关闭键盘。当然了，这种问题也有对应的库可以解决，我使用的是flutter_keyboard_actions来解决了这个问题。因为在Android端我发现了部分输入法的兼容问题，所以只针对IOS做了处理。大家可以看一下前后对比图，具体实现代码可以参考flutter_keyboard_actions的文档和我的项目代码：
当然平台差异不仅仅是这么多，比如IOS自带侧滑返回等。具体我们可以去查看调用TargetPlatform枚举类的代码。
如果你觉得这样真麻烦，我给你支个大招，修改ThemeData的platform，指定一个平台。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
platform: TargetPlatform.android
),
...
);
}
}
其次就是使用TextInputType.number在IOS中弹起的键盘没有小数点符号。在输入金额类型数据时，需要将keyboardType属性设置为TextInputType.numberWithOptions(decimal: true)。
keyboardType属性主要含义为弹起的键盘类型，并不代表输入数据的类型。
而在Android开发中，在EditText中设置android:inputType不仅可以指定弹起的键盘类型，同时也确定了输入数据的类型，也就是内置了数据的格式校验。Flutter中并没有后者，所以可能一开始你是TextInputType.number，但是在输入法中切换成中文键盘，一样可以输入中文字符。所以数据的校验需要我们使用inputFormatters自己处理。
比如TextInputType.phone时可以使用WhitelistingTextInputFormatter 白名单校验，只允许输入0~9：
TextField(
keyboardType: TextInputType.phone,
inputFormatters: [WhitelistingTextInputFormatter(RegExp("[0-9]"))]
)
输入密码时可以使用BlacklistingTextInputFormatter 黑名单校验，除去中文字符：
TextField(
keyboardType: TextInputType.text,
inputFormatters: [BlacklistingTextInputFormatter(RegExp("[\u4e00-\u9fa5]"))]
)输入小数时，可以自定义TextInputFormatter来限制输入小数格式：
TextField(
keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [UsNumberTextInputFormatter()]
)class UsNumberTextInputFormatter extends TextInputFormatter {
static const defaultDouble = 0.001;
static double strToFloat(String str, [double defaultValue = defaultDouble]) {
try {
return double.parse(str);
} catch (e) {
return defaultValue;
}
}
@override
TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
String value = newValue.text;
int selectionIndex = newValue.selection.end;
if (value == ".") {
value = "0.";
selectionIndex++;
} else if (value != "" && value != defaultDouble.toString() && strToFloat(value, defaultDouble) == defaultDouble) {
value = oldValue.text;
selectionIndex = oldValue.selection.end;
}
return new TextEditingValue(
text: value,
selection: new TextSelection.collapsed(offset: selectionIndex),
);
}
}InkWell有的叫溅墨效果，有的叫水波纹效果。使用场景是给一些无点击事件的部件添加点击事件时使用（也支持长按、双击等事件），同时你也可以去修改它的颜色和形状。
InkWell(
borderRadius: BorderRadius.circular(8.0), // 圆角
splashColor: Colors.transparent, // 溅墨色（波纹色）
highlightColor: Colors.transparent, // 点击时的背景色（高亮色）
onTap: () {},// 点击事件
child: Container(),
);
不过有时你会发现并不是包一层InkWell就一定会有溅墨效果。主要原因是溅墨效果是在一个背景效果，并不是覆盖的前景效果。所以InkWell中的child一旦有设置背景图或背景色，那么就会遮住这个溅墨效果。如果你需要这个溅墨效果，有两种方式实现。
Material(
color: Colors.white,
child: InkWell(),
) Stack(
children: <Widget>[
Positioned.fill(
child: Image(),
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
splashColor: Color(0X40FFFFFF),
highlightColor: Colors.transparent,
onTap: () {},
),
),
)
],
)比如点击导航栏来回切换页面，默认情况下会丢失原页面状态，也就是每次切换都会重新初始化页面。这种情况解决方法就是PageView与BottomNavigationBar结合使用，同时子页面State中继承AutomaticKeepAliveClientMixin并重写wantKeepAlive为true。代码大致如下：
class _TestState extends State<Test> with AutomaticKeepAliveClientMixin{
@override
Widget build(BuildContext context) {
super.build(context);
return Container();
}
@override
bool get wantKeepAlive => true;
}首先这里建议凡是Flutter的插件在填写版本号时不要使用^符号。
^符号意味着你可以使用此插件的最新版本（大于等于当前版本）。这会导致什么问题呢？可能你前一天代码还能跑起来，今天就编译出错了。因为这些插件中包括Android、IOS的所用依赖环境配置，常见的就是新版本使用了AndroidX的依赖，但是还有些插件并没有使用AndroidX，导致了两者的冲突。 我之前在看flutter-go的代码时，就是因为webview的插件突然升级了，导致了安装失败。具体问题可以看这里。所以在代码稳定的情况下不建议使用^符号。 发生了这种问题，有以下几个解决方法：
我偏好使用第二种，只要做好修改的相关记录就行，算是一劳永逸。
打包本身流程没有问题，配置好签名文件，执行flutter build apk命令。但是发现打包后没有将插件中的AndroidManifest.xml文件合并。比如我有使用image_picker插件，它的AndroidManifest.xml文件如下：
可以看到有权限的及Android 7.0FileProvider的声明。诸如此类的信息没有打包进去（但是引用xml中的flutter_image_picker_file_paths文件却在），导致我实际使用这些功能时没有反应，但是在平时的调试过程中却是好的。 中间我发现打包后的App名称也是之前的，怀疑是缓存问题，所以我手动删除了项目根目录的build与.gradle文件夹，重新打包就好了。所以打包后最好检查一下AndroidManifest.xml文件，避免此类缓存造成的问题。
我在主界面监听返回键, 然后希望弹出 CupertinoAlertDialog 让用户确认是否退出, 一开始都好好的, 在我经过打包成apk之后, 这个 CupertinoAlertDialog 就开始一直报错
一顿操作, 还是无果...只能求助谷歌, 果然翻到一个答案:
也就是在 main.dart 的 MaterialApp 加入这个属性:
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
YabandLocalizationsDelegate.delegate,
const FallbackCupertinoLocalisationsDelegate(), //加入这个, 上面三个是我用来国际化的
],然后创建对应的 class :
class FallbackCupertinoLocalisationsDelegate
extends LocalizationsDelegate<CupertinoLocalizations> {
const FallbackCupertinoLocalisationsDelegate();
@override
bool isSupported(Locale locale) => true;
@override
Future<CupertinoLocalizations> load(Locale locale) =>
DefaultCupertinoLocalizations.load(locale);
@override
bool shouldReload(FallbackCupertinoLocalisationsDelegate old) => false;
}这样就 ok 咯~~~
再次运行, 完美弹出 CupertinoAlertDialog ~
解决：
cd android/app/
修改build.gradle
在defaultConfig模块添加 multiDexEnabled true
在dependencies模块添加 implementation 'com.android.support:multidex:1.0.3'
class Colours {
static const Color text_dark = Color(0xFF333333);
}
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Test",
style: TextStyle(
fontSize: 26.0,
color: Colours.text_dark
)
)
)