Блог

Мне было интересно, может ли кто-нибудь помочь мне попытаться выяснить, как сделать окна чата отзывчивыми на основе текста. Как показано ниже на рисунке. Как должны выглядеть пузырьки чата

Ниже приведен код для попытки создания пузырька чата. Я не возражаю против изменения типа виджета, чтобы контейнер соответствовал размеру текста. Я просто не хочу ставить под угрозу дизайн. Я также могу включить другие попытки в комментарии, если это необходимо! Заранее спасибо за помощь.

    return Container(
     child: Padding(
             padding: EdgeInsets.only(left:5), 
            child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Padding(
             padding: const EdgeInsets.only(left:10),
             child: new CircleAvatar(
               radius: (17.5),
               backgroundImage: AssetImage(
                                      user.profilePic,),
             ),
           ), 
         SizedBox(width: 10,),
         Container(
           width: MediaQuery.of(context).size.width,
           constraints: BoxConstraints(//minWidth:125,
           maxWidth: 290, //275
           ),
          
           child:Material(
           //color:Color(0x00000000) ,  TRANSPARENT
           color:const Color(0xf2ffffff),///Color(0xe6ffffff)  // ! REVISIT Change color of boxes??? 
           borderRadius: BorderRadius.only(
                                    topRight: Radius.circular(16.0),
                                    bottomRight: Radius.circular(16.0),
                                    bottomLeft: Radius.circular(16.0),
                                  ),
         child: Padding(
           padding: const EdgeInsets.only(left:10.0), //Revisit
           child: Column(
             mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: 5,),
                          Row(
                             children: [
                               Text(user.name,       ///0xd9343f4b
                                                style: TextStyle(
                                                    fontFamily: 'Lato',
                                                  fontSize: (13/8.12)*SizeConfig.textMultiplier,
                                                  color: const Color(0xd9343f4b),
                                                  fontWeight: FontWeight.w700,
                                                ),
                                              textAlign: TextAlign.left,),
                              SizedBox(width:8),
                              Text(message.time, 
                                style: TextStyle(
                                        fontFamily: 'Lato',
                                        fontSize: 10,
                                        color: const Color(0xd9343f4b),
                                      ),
                                      textAlign: TextAlign.left,
                                      ),
                             ],
                           ),
                                SizedBox(height: 5,),
                                Container(
                                  
                                  margin: EdgeInsets.only( right:10,),
                                  child: Text(message.text, 
                                  style: TextStyle(
                                          fontFamily: 'Lato',   
                                          fontSize: 13,
                                          color: const Color(0xd9343f4b),
                                         
                                        ),
                                        textAlign: TextAlign.left,
                                        ),
                                ),

                       //SizedBox(height: 10,),//if(message.imageUrl!='') {
                      SizedBox(height: 10,),
                      _isPhoto(message),
                       
                      //},
                      
                      //}
                        ],
           ),
         ),
         ),
         ),
         
         ],

       ),
     ) 
   );
   
   
                    
 }  ```
  

Вы на правильном пути для реализации дизайна, единственная проблема, с которой вы сталкиваетесь, заключается в том, что столбец внутри вашего чата имеет неограниченную высоту, поэтому кажется, что он не соответствует размеру содержимого. Чтобы исправить это, просто скажите столбцу, чтобы он соответствовал своим дочерним элементам, передавая mainAxisSize .

 child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [],
),
  

Согласно документации для размера главной оси

Сколько места должно быть занято на главной оси.

При гибкой компоновке доступное пространство вдоль главной оси выделяется дочерним элементам. После выделения места может остаться немного свободного места. Это значение определяет, следует ли максимизировать или минимизировать объем свободного пространства в зависимости от ограничений на входящий макет.

Это означает, что при размещении его дочерних элементов это свойство определяет, сколько места предоставляется его дочерним элементам на главной оси (по вертикали для столбцов), и по умолчанию используется неограниченное вертикальное пространство (согласно документации для столбца)

Установите для каждого дочернего элемента нулевой коэффициент гибкости (например, те, которые не расширяются) с неограниченными вертикальными ограничениями

Рабочий образец решения можно найти здесь, в codepen

Я также немного изменил ваш код, заменив SizedBox на padding в нескольких местах (обратите внимание, что мне пришлось заменить вызовы функций и переменные, потому что в вашем коде не было их реализаций). Пример вывода для пера

Редактировать

После внесения вышеуказанных изменений вы заметите, что пузырь занимает больше ширины, чем ему нужно, чтобы исправить это, вам нужно понять 2 вещи.

Сначала вы указываете, что ваш контейнер должен брать ширину из MediaQuery width: MediaQuery.of(context).size.width, , чтобы эта строка была удалена. После добавления минимальной ширины, которую вы указали в своем вопросе, вы заметите, что контейнер всегда пытается использовать среднюю ширину в качестве своей ширины.

Это потому, что по умолчанию строки имеют неограниченную ширину (double.БЕСКОНЕЧНОСТЬ) и поэтому ваш контейнер пытается разместить его максимально возможной шириной (т. Е. 290 в соответствии с вашим вопросом). Чтобы исправить это, все, что вам нужно сделать, это добавить mainAxisSize в строку, где отображается имя пользователя.

 child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              
              children: [
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
  

Это гарантирует, что контейнер всегда будет иметь ширину своих дочерних элементов и никогда не превысит ширину 290. ПРИМЕЧАНИЕ: если ваши дочерние элементы превысят фиксированное значение с 290, ваш макет переполнится, я предлагаю заглянуть в виджет переноса.

Я также обновил перо с изменениями ширины, чтобы вы могли поиграть с ним там.