Flutter align textfield to bottom and text from top

Question

How do I align text from top and textfield from bottom? This is to create a sort of chat-like interface.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,

          children: <Widget>[
            Text(
              'Hello, How are you?\nwow',
              textAlign: TextAlign.left,
              overflow: TextOverflow.ellipsis,
              //style: new TextStyle(fontWeight: FontWeight.bold),
            ),
            TextField(
              controller: myController,
              onChanged: (text) {
                //print("First text field: $text");
              },
              onSubmitted: (text) {
                print(text);
                //myController.clear();
                myController.text = "";
              },
              decoration: new InputDecoration(
                  hintText:"Enter your response."
              ),
              focusNode: _focusNode,
              autofocus: true,
            ),
          ],
        ),
      ),
    );
  }

I've tried separating the text and textfields into containers instead but to no avail.

Is there a way to do it in flutter similar to iOS layout constraints where textfield is constrained to keyboard height and text is constrained to textfield?

Answer 1

You can insert an Expanded between the Text and TextField in your Column. This will take up as much space in between those as possible and thus push your Text up and TextField down:

Column(
  children: [
    Text(...),
    Expanded(child: Container()),
    TextField(...),
  ],
);