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: <Widget>[
          Expanded(flex: 1, child: ListView(
            children: <Widget>[
              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: () {},
              ),
            ))
        ],
      )));
}