Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make widget stick to top of keyboard

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:

Chat app where TextField sticks to the keyboard

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?

like image 879
haz Avatar asked Apr 08 '18 08:04

haz


1 Answers

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',
                            ),
                        ),
                    ),
                ],
            ),
        );
    }
}
like image 148
Kevin Walter Avatar answered Oct 06 '22 00:10

Kevin Walter