CODEWITHSUNDEEP
flutterflutter-layout
Black
Black

Reputation: 4654

Create text input bar always pinned to bottom

I'm trying to create a Row widget that will be pinned to the bottom always like the below screenshot. I currently have a large container containing text (open to changing this to a card) followed by smaller cards which are scrollable. I would like to pin a bar to the bottom so a user can enter text and add a card. I'm not sure how to pin this to the bottom of the UI without interfering with the cards causing a pixel overflow. What is the best way to achieve this? I'd ideally like to achieve a bottom row that is similar to Facebook Messengers'

Code:

class TextBarAtBottom extends StatelessWidget {
  TextEditingController commentController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return 
    Container(
              height: 20.0,
              padding: EdgeInsets.symmetric(vertical: 2.0),
              alignment: Alignment.bottomCenter,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  // First child is enter comment text input
                  TextFormField(
                                  controller: commentController,
                                  autocorrect: false,
                                  decoration: new InputDecoration(
                                    labelText: "Some Text",
                                    labelStyle:
                                        TextStyle(fontSize: 20.0, color: Colors.white),
                                    fillColor: Colors.blue,
                                    border: OutlineInputBorder(
                                        // borderRadius:
                                        //     BorderRadius.all(Radius.zero(5.0)),
                                        borderSide:
                                            BorderSide(color: Colors.purpleAccent)),
                                  ),
                    ),
                    // Second child is button
                  IconButton(
                    icon: Icon(Icons.send),
                    iconSize: 20.0,
                    onPressed: _onPressedSend(),
                  )
                ]
              )
              );
  }
}

Desired UI

Upvotes: 2

Views: 5953

Answers (3)

Vrushi Patel
Vrushi Patel

Reputation: 2441

correct and optimal way would be using Expanded widget with Column .

Use Expanded for content of screen which takes up all empty space screen leaves behind and then text input field below it. You can see output below.

    return Scaffold(
      appBar: AppBar(
        title: AppBarTitle(title: "Profile"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
              child: ListView(
            children: <Widget>[
              Text("Message1"),
              Text("Message2"),
              Text("Message3"),
              Text("Message4"),
              Text("Message5"),
            ],
          )),
          Container(
              padding: EdgeInsets.symmetric(vertical: 2.0),
              child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
                // First child is enter comment text input
                Expanded(
                  child: TextFormField(
                    autocorrect: false,
                    decoration: new InputDecoration(
                      labelText: "Some Text",
                      labelStyle:
                          TextStyle(fontSize: 20.0, color: Colors.white),
                      fillColor: Colors.blue,
                      border: OutlineInputBorder(
                          // borderRadius:
                          //     BorderRadius.all(Radius.zero(5.0)),
                          borderSide: BorderSide(color: Colors.purpleAccent)),
                    ),
                  ),
                ),
                // Second child is button
                IconButton(
                  icon: Icon(Icons.send),
                  iconSize: 20.0,
                  onPressed: () {},
                )
              ])),
        ],
      ),
);

Output

Upvotes: 2

Navin Kumar
Navin Kumar

Reputation: 4027

Wrap your parent Widget With Stack and Use Align widget to place your textBox always bottom.

return 
      Stack(children: <Widget>[
        yourMainContent(),
        Align(
          alignment: Alignment.bottomCenter,
          ///Your TextBox Container
          child: Container(
              height: 20.0,
              padding: EdgeInsets.symmetric(vertical: 2.0),
              alignment: Alignment.bottomCenter,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    // First child is enter comment text input
                    TextFormField(
                      controller: commentController,
                      autocorrect: false,
                      decoration: new InputDecoration(
                        labelText: "Some Text",
                        labelStyle:
                        TextStyle(fontSize: 20.0, color: Colors.white),
                        fillColor: Colors.blue,
                        border: OutlineInputBorder(
                          // borderRadius:
                          //     BorderRadius.all(Radius.zero(5.0)),
                            borderSide:
                            BorderSide(color: Colors.purpleAccent)),
                      ),
                    ),
                    // Second child is button
                    IconButton(
                      icon: Icon(Icons.send),
                      iconSize: 20.0,
                      onPressed: _onPressedSend(),
                    )
                  ]
              )
          ),
        )
      ],)

Upvotes: 2

Dennis
Dennis

Reputation: 1

Following is the sample code:

body: Stack(
        children: <Widget>[
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
//Following container with row will always stay bottom and if keyboard opens it will be right above the keyboard
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            alignment: Alignment.bottomCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Text('text 1'),
                Text('text 2'),
              ],
            ),
          )
        ],
      ),

Hope this helps.

Upvotes: 0

Related Questions