CODEWITHSUNDEEP
dartflutterflutter-layout
lws803
lws803

Reputation: 947

Flutter align textfield to bottom and text from top

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?

Upvotes: 8

Views: 19570

Answers (1)

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126974

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(...),
  ],
);

Upvotes: 18

Related Questions