Создать панель ввода текста всегда прикреплена снизу

Question

Я пытаюсь создать виджет Row, который всегда будет прикреплен к нижней части экрана, как на скриншоте ниже. В настоящее время у меня есть большой контейнер, содержащий текст (открытый для замены на карточку), за которым следуют меньшие карточки с возможностью прокрутки. Я хотел бы прикрепить панель внизу, чтобы пользователь мог ввести текст и добавить карту. Я не уверен, как прикрепить это к нижней части интерфейса, не мешая картам, вызывая переполнение пикселей. Каков наилучший способ достичь этого? В идеале я бы хотел получить нижний ряд, похожий на код * Messenger Facebook *

:

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

Answer 1

правильным и оптимальным способом будет использование виджета Expanded с Column.

Использовать Expanded для содержимого экрана, которое занимает все пустое пространство, оставленное экраном, а затем поле ввода текста под ним. Вы можете увидеть вывод ниже.

---

    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: () {},
                )
              ])),
        ],
      ),
);

---

Answer 2

Оберните ваш родительский виджет с помощью Stack и используйте виджет Align , чтобы поместить текстовый блок всегда внизу.

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

Answer 3

Ниже приведен пример кода:

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'),
              ],
            ),
          )
        ],
      ),

Надеюсь, это поможет.