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?
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',
),
),
),
],
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With