Блог

Итак, я новичок в сцене Флаттера, и у меня возникли некоторые проблемы с завершением пузырька сообщений для приложения для практики чата. Это работает нормально, вот так:

https://i.ibb.co/1qstjqR/now.jpg

Код, который генерирует пузырь, выглядит следующим образом:

 Widget bubble(){
return Padding(
  padding: padding(),
  child: Row(
    mainAxisAlignment:
    mine ? MainAxisAlignment.end : MainAxisAlignment.start,
    children: <Widget>[
      SizedBox(height: 30),
      Flexible(
          child: Row(
            mainAxisAlignment:
            mine ? MainAxisAlignment.end : MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [

              //BUBBLE TAIL
              mine
                  ? Container()
                  : Transform(
                alignment: Alignment.center,
                transform: Matrix4.rotationY(math.pi),
                child: CustomPaint(
                  painter: CustomShape(colorChat),
                ),
              ),
              
              Flexible(
                child: Container(
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: colorChat,
                    borderRadius: border(),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [

                      //MESSAGE STR CONTENT
                      Text(
                        messageStr,
                        textAlign: TextAlign.justify,
                        style: TextStyle(fontSize: 16),
                      ),

                      //TIMESTAMP (AND DETAIL IN FUTURE)
                      Padding(
                        padding: const EdgeInsets.only(top: 5),
                        child: Text(
                          dateTimeStr,
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                    ],
                  ),
                ),
              ),

              //BUBBLE TAIL
              mine ? CustomPaint(painter: CustomShape(colorChat)) : Container(),
            ],
          )),
    ],
  ),
);
 

Проблема в следующем: я пытаюсь поместить строку, содержащую более подробную информацию о сообщении (например, расширение и размер файла), в ту же строку даты и времени, в крайнем левом углу.

Самое близкое, что мне удалось сделать, — это код ниже:

 Padding(
      padding: const EdgeInsets.only(top: 5),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(                
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                "some detail",
                style: TextStyle(color: Colors.white, fontSize: 10),
              ),
            ),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: Text(
              dataMsg,
              style: TextStyle(color: Colors.white, fontSize: 10),
            ),
          ),
        ],
      ),
    )
 

Но это делает пузырь всегда большим:

https://i.ibb.co/JjYx0vY/detail-bad.jpg

Это из-за Расширения. Но без этого первый виджет выравнивания не работает и остается крайним справа.

Как бы мне хотелось, чтобы это было:

https://i.ibb.co/gt633Gc/detail-ok.jpg

Спасибо!

Удалите развернутые и выровняйте виджеты. И добавьте свойство mainAxisAlignment: MainAxisAlignment.конец виджета строки.

 Padding(
          padding: const EdgeInsets.only(top: 5),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Text(
                "some detail",
                style: TextStyle(color: Colors.white, fontSize: 10),
              ),
              Align(
                alignment: Alignment.centerRight,
                child: Text(
                  "hello",
                  style: TextStyle(color: Colors.white, fontSize: 10),
                ),
              ),
            ],
          ),
        )