插件介绍

这里推荐下防键盘遮挡控件：keyboard_avoider。虽然flutter中号称有机制可以防键盘遮挡，但是在实际使用的过程中的一些场合下还是会出现遮挡住键盘的bug，比如：app第一次安装后。

之前为键盘遮挡的问题头疼了很久，后来找到keyboard_avoider控件，总算彻底解决了键盘遮挡的问题。

备注：flutter键盘遮挡bug当时测试的版本是flutter sdk 1.9.1，后续版本我没有验证。但是这个控件我有一直在使用，本身没有问题。

插件安装dependencies:

keyboard_avoider: ^0.1.2

插件引入import 'package:keyboard_avoider/keyboard_avoider.dart';

代码示例import 'package:flutter/material.dart';

import 'package:keyboard_avoider/keyboard_avoider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

final ScrollController _scrollController = ScrollController();

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Row(

children: [

Flexible(

flex: 1,

child: Column(

children: [

Flexible(flex: 2, child: _buildPlaceholder(Colors.red)),

Flexible(flex: 1, child: _buildPlaceholder(Colors.pink)),

],

),

),

Flexible(

flex: 2,

child: Column(

children: [

Flexible(flex: 2, child: _buildForm(40, Colors.green)),

Flexible(flex: 1, child: _buildPlaceholder(Colors.lightGreen),

),

],

),

),

Flexible(

flex: 1,

child: Column(

children: [

Flexible(flex: 1, child: _buildPlaceholder(Colors.blue)),

Flexible(flex: 2, child: _buildPlaceholder(Colors.lightBlue)),

],

),

),

],

),

);

}

Widget _buildForm(int rows, Color color) {

return Container(

color: color,

child: KeyboardAvoider(

autoScroll: true,

child: ListView.builder(

padding: EdgeInsets.zero,

controller: _scrollController,

itemCount: rows,

itemBuilder: (context, index) {

return Material(

child: TextFormField(

initialValue: 'TextFormField ${index + 1}',

decoration: InputDecoration(fillColor: color, filled: true),

),

);

},

),

),

);

}

Widget _buildPlaceholder(Color color) {

return Container(

color: color,

child: KeyboardAvoider(

child: Placeholder(),

),

);

}

}