Flutter: как выровнять текстовое поле по нижнему центру в столбце?

#flutter

#flutter

Вопрос:

Я создаю приложение для чата.

У меня есть 2 элемента в столбце. Первая — это информационная карточка, которая находится в верхней части страницы,

У меня также есть текстовое поле, но я не могу понять, как разместить его в нижнем центре.

Вот основной код с проблемой:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      resizeToAvoidBottomPadding: true,
      appBar: userMessageChatAppBar(context),
      body: SingleChildScrollView(
        child: Column(
          children: [
            userMessageChatInformationCard(context),
            Positioned(
              bottom: 20,
            child: userMessageChatTextField())
          ],
        ),
      ),
    );
  

Текстовое поле, в котором будет происходить чат:

 Padding userMessageChatTextField() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextField(
          decoration: InputDecoration(
        suffixIcon: RaisedButton.icon(
          onPressed: () {},
          icon: Icon(
            Icons.send,
            color: Colors.white,
          ),
          color: Colors.blue,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(20))),
          label: Text(
            "19.99₺",
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
        hintText: "Bir şeyler yaz",
        border: new OutlineInputBorder(
            borderSide: new BorderSide(color: Colors.teal)),
      )),
    );}
  

Информационная карточка, которую пользователь впервые видит:

 Align userMessageChatInformationCard(BuildContext context) {
    return Align(
            alignment: Alignment.center,
            child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Container(
                  decoration: new BoxDecoration(
                    boxShadow: [
                      new BoxShadow(
                        color: Colors.grey,
                        blurRadius: 10.0,
                      ),
                    ],
                  ),
                  child: Card(
                    clipBehavior: Clip.antiAlias,
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text(
                            'fernando muslera mesajını bekliyor',textAlign: TextAlign.center,
                            style: TextStyle(fontSize: 20.0, color: Colors.blueGrey),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(left: 20,right: 20,bottom: 20),
                          child: Text(
                            '280 karakterlik mesaj için ödeme yaparsın ünlünün mesajı alabilmesi uzun sürebilir',
                            textAlign: TextAlign.center, style: TextStyle(
                                color: Colors.black.withOpacity(0.6)),
                          ),
                        ),                      
                      ],
                    ),
                  ),
                )));
  }
  

Комментарии:

1. Вы можете использовать гибкий. Как показано ниже: дочерние элементы: [ Гибкий (userMessageChatInformationCard(контекст)), userMessageChatTextField(), ],

Ответ №1:

   @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      resizeToAvoidBottomPadding: true,
      appBar: userMessageChatAppBar(context),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          userMessageChatInformationCard(context),
          userMessageChatTextField()
        ],
      ),
   );
 }