How to create row with multiple lines in flutter

Question

I'm trying to replicate a flutter design that looks like this, I was able to achieve something similar by using Listtile widget, my only issue was that the leading icon didn't align vertically with the title. Please is there any other way to achieve this? I tried using a row widget but the multiple line text won't fit into the screen.

Answer 1

You can try this code

Container(
                    color: Colors.white,
                    padding: const EdgeInsets.all(10),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          width: 50,
                          height: 50,
                          decoration: BoxDecoration(
                            color: Colors.blue,
                            shape: BoxShape.circle,
                          ),
                          child: Icon(
                            Icons.message,
                            color: Colors.white,
                          ),
                        ),
                        SizedBox(width: 10,),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text("Message", style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16
                              ),),
                              Text("How to create row with multiple lines in flutter How to create row with multiple lines in flutter")
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),

Result:-

Please let me know if it work.

Answer 2

You can try as well as my code.

Widget ListItem({
  String imageUrl,
  String text,
  String caption,
  double imageSize = 50,
  double horizontalSpacing = 15,
  double verticalspacing = 20,
  bool showDetailIndicatorIcon = true,
  GestureTapCallback onTap,
}) {
  return InkWell(
    onTap: onTap,
    child: Container(
      margin: EdgeInsets.only(top: 2),
      padding: EdgeInsets.symmetric(
          horizontal: horizontalSpacing, vertical: verticalspacing),
      child: Row(
        children: [
          ClipRRect(
            child: Image.network(
              imageUrl,
              fit: BoxFit.cover,
              height: imageSize,
              width: imageSize,
            ),
            borderRadius: BorderRadius.circular(imageSize / 2),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    child: Text(
                      text,
                      style: TextStyle(
                        color: ColorRes.lightWhite,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  SizedBox(height: 5),
 
                  Text(
                    caption,
                    style: TextStyle(
                      color: ColorRes.grey,
                      fontSize: 12,
                      fontWeight: FontWeight.normal,
                    ),
                    maxLines: 3,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

I hope it's work. Please let me know.