Блог

Я хочу добиться следующего макета

Там есть фотография профиля, за которой следует имя пользователя и комментарий.Но если комментарий слишком длинный, он должен начинаться под именем пользователя, а не с картинки профиля.

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

 Row(
                              children: [
                                const CircleAvatar(
                                  backgroundImage: NetworkImage(
                                      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTul_FjIE5w2p_VarQyzwaZ1mkOYjQRXcNCAamp;usqp=CAU'),
                                  radius: 16,
                                ),
                                const SizedBox(
                                  width: 10,
                                ),
                                Text(
                                  'UserName',
                                  style: GoogleFonts.tenorSans(
                                      color: Colors.black),
                                ),
                                Text(
                                  'The Dram Club is a platform that endeavours to bring whisky enthusiassts amp; aficionados together for people to enjoy their whiskes',
                                  style: GoogleFonts.tenorSans(
                                      color: Colors.black,
                                      fontWeight: FontWeight.bold,
                                      fontStyle: FontStyle.italic),
                                )

                              ],
                            )
  

Для приведенного выше кода текст комментария обрезается, если он большой, поэтому вместо использования Row я решил использовать Wrap , но это перемещает мой комментарий ввода в новую строку. Я просто попытался обернуть имя пользователя и текст комментария в Wrap , но ничего не происходит. Я также пробовал использовать Flexible и Expanded виджет

Вы можете использовать этот код.

 Row(
      children: [
        const CircleAvatar(
          backgroundImage: NetworkImage(
              'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTul_FjIE5w2p_VarQyzwaZ1mkOYjQRXcNCAamp;usqp=CAU'),
          radius: 16,
        ),
        const SizedBox(
          width: 10,
        ),

        Flexible(
          child: RichText(
            text: TextSpan(
              children: <TextSpan>[
                TextSpan(text: 'Username ', style: TextStyle(fontSize: 18, color: Colors.black)),
                TextSpan(text: 'The Dram Club is a platform that endeavours to bring whisky enthusiassts amp; aficionados together for people to enjoy their whiskes', style: TextStyle( color: Colors.black, fontSize: 16)),
              ],
            ),
          ),
        )

      ],
    ),
  

Используйте класс RichText, в нем вы можете добавить несколько текстов с разными стилями. Итак, идея в том

Иметь единый текст с разными стилями, один для UserName , а другой для Comment

 children: [
   CircleAvatar(
     backgroundImage: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTul_FjIE5w2p_VarQyzwaZ1mkOYjQRXcNCAamp;usqp=CAU'),
     radius: 16,
   ),
   SizedBox(
      width: 10,
   ),
   // here for User name and Comment
   RichText(
      text: TextSpan(
        text: 'UserName ',  // <-- Username text
        style: GoogleFonts.tenorSans(color: Colors.black),  // <-- User name style
        children: <TextSpan>[
          // your comment code
          TextSpan(text: 'The Dram Club is a platform that endeavours to bring whisky enthusiassts amp; aficionados together for people to enjoy their whiskes', 
            style: GoogleFonts.tenorSans(color: Colors.black,fontWeight: FontWeight.bold, fontStyle: FontStyle.italic)))
        ]
      )  
   )
]