flutter 键盘遮挡输入框问题_flutter去除Appbar的阴影、键盘遮挡下部输入框

1.appbar的阴影去除

默认的appbar下方会自带一个阴影效果。

阴影的位置

要去掉这个阴影的话需要在appbar中设置：

appBar: AppBar(

elevation: 0.0, // 这里设置为0就没有阴影了

backgroundColor: Color.fromARGB(255, 45, 140, 240),

title: Center(

child: Container(

child: Text('hello world')

)),

),

2.键盘遮挡下部输入框的问题

核心的思想就是在column中使用expend包裹一次然后child使用listView,这样的话输入框被聚焦的时候键盘就会把页面顶上去。

键盘将屏幕顶上去了

Widget build(BuildContext context) {

return Scaffold(

resizeToAvoidBottomPadding: false,

body: Container(

decoration: BoxDecoration(

image: DecorationImage(

image:AssetImage('assets/images/background.png'),

fit: BoxFit.cover

)

),

child: Column(

// crossAxisAlignment: CrossAxisAlignment.stretch,

children: [

Expanded(flex: 1, child: ListView(

children: [

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

Container(

height: 68,

child: Align(

alignment: Alignment.bottomLeft,

child: TextField(

decoration: InputDecoration(

hintText: "Phone Number",

prefixIcon: Icon(

Icons.phone_iphone,

size: 26,

),

),

))),

],

)),

//Next Button

Padding(

padding: EdgeInsets.only(

left: 20, right: 20, top: 29, bottom: 20),

child: Container(

height: 42,

child: FlatButton(

child: Text("Next"),

textColor: Colors.white,

color: Color.fromARGB(255, 93, 160, 254),

onPressed: () {},

),

))

],

)));

}