How to make widget stick to top of keyboard - keyboard

Question

I'd like to make a widget that sticks to the bottom of the page, and then is pinned to the top of the keyboard (when it appears).
Note how the input textfield is pinned to the keyboard in the image below:
How would I do this? I tried putting it in the bottomNavigationBar, but this (obviously) didn't work. Is there a builtin way to do this?

Answer 1

This is a working example of the thing you want. I think!
Just copy/paste/run
What's important in this example is the Expanded. A really nice widget that expands to as much space as it can get. And in result pushing the chat box down as much as possible
(Bottom of the screen or bottom of the keyboard)
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('49715760 Stackoverflow'),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Expanded(
child: new Material(
color: Colors.red,
child: new Text("Filled"),
),
),
new Container(
color: Colors.white,
padding: new EdgeInsets.all(10.0),
child: new TextField(
decoration: new InputDecoration(
hintText: 'Chat message',
),
),
),
],
),
);
}
}

Answer 2

The best way to resolve this is to use a dedicated widget.
MediaQuery.of(context).viewInsets.bottom will give you the value of the height covered by the system UI(in this case the keyboard).
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
var home = MyHomePage(title: 'Flutter Demo Home Page');
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: home,
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text(widget.title),
),
body: _getBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _getBody() {
return Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/sample.jpg"), fit: BoxFit.fitWidth)),
// color: Color.fromARGB(50, 200, 50, 20),
child: Column(
children: <Widget>[TextField()],
),
),
Positioned(
bottom: MediaQuery.of(context).viewInsets.bottom,
left: 0,
right: 0,
child: Container(
height: 50,
child: Text("Hiiiii"),
decoration: BoxDecoration(color: Colors.pink),
),
),
]);
}
}

Answer 3

there is a lib for that:
https://pub.dev/packages/keyboard_attachable
Widget build(BuildContext context) => FooterLayout(
footer: MyFooterWidget(),
child: PageMainContent(),
);

Answer 4

use of bottomSheet option from Scaffold.
Scaffold(
bottomSheet: chatBar(),
body: Column(
children: [
Expanded(
child: ListView()
)
]
)
)
the chatBar is top of keyboard, when keyboard is open.
for transparent chatBar: can wrap Scaffold by
Theme(
data: ThemeData.light().copyWith(
bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.transparent),
),

Answer 5

This worked for me,
showBottomSheet(
context: context,
builder: (context) => Container(
height: // YOUR WIDGET HEIGHT
child: // YOUR CHILD
)
showBottomSheet is a flutter inbuilt function.