Priyesh
Priyesh

Reputation: 1313

How to make whole row expanded?

I'm getting below overflow error and I want to make an expanded view for hashtags.

For example, I want 4th hashtag in the new line.

Ive tried to wrap Row with Expanded and tried to give fix width but not working.

My issue : enter image description here

My code:

Container(
      margin: EdgeInsets.only(left: 10, right: 10, bottom: 10),
      decoration: BoxDecoration(
        color: ColorRes.white,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        children: [
          Container(
            height: 40,
            width: 40,
            margin: EdgeInsets.symmetric(horizontal: 5),
            decoration: BoxDecoration(
              color: ColorRes.primaryColor,
              borderRadius: BorderRadius.all(
                Radius.circular(60),
              ),
            ),
            alignment: Alignment.center,
            child: Text(
              "PS",
              style: TextStyle(
                color: ColorRes.white,
                fontSize: 16,
              ),
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.all(5),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Jane Mosca Battello",
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: 16,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 5),
                    child: Row(
                      children: [
                        Expanded(
                          child: Row(
                            children: [
                              Text(
                                "Stage : ",
                                style: TextStyle(
                                  fontSize: 14,
                                  color: ColorRes.black,
                                ),
                              ),
                              Container(
                                decoration: BoxDecoration(
                                  color: ColorRes.green,
                                  borderRadius: BorderRadius.circular(4),
                                ),
                                padding: EdgeInsets.symmetric(horizontal: 3),
                                child: Text(
                                  "Lead",
                                  style: TextStyle(
                                    fontSize: 12,
                                    color: ColorRes.white,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Row(
                            children: [
                              Text(
                                "Source : ",
                                style: TextStyle(
                                  fontSize: 14,
                                  color: ColorRes.black,
                                ),
                              ),
                              Container(
                                decoration: BoxDecoration(
                                  color: ColorRes.primaryColor,
                                  borderRadius: BorderRadius.circular(4),
                                ),
                                padding: EdgeInsets.symmetric(horizontal: 3),
                                child: Text(
                                  "Website",
                                  style: TextStyle(
                                    fontSize: 12,
                                    color: ColorRes.white,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: ["Buyer Lead", "Seller Lead","Buyer Lead ", "Seller Lead"]
                        .map(
                          (e) => Container(
                            decoration: BoxDecoration(
                              color: ColorRes.primaryColor.withOpacity(0.7),
                              borderRadius: BorderRadius.circular(4),
                            ),
                            padding: EdgeInsets.symmetric(horizontal: 3),
                            margin: EdgeInsets.only(right: 5),
                            child: Text(
                              "#$e",
                              style: TextStyle(
                                fontSize: 12,
                                color: ColorRes.white,
                              ),
                            ),
                          ),
                        )
                        .toList(),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    )

Upvotes: 0

Views: 209

Answers (2)

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14885

The Output look like this Add your container to flexible widget

Row(
     mainAxisSize: MainAxisSize.min, children: [
      "Buyer Lead",
       "Seller Lead",
       "Buyer Lead ",
       "Seller Lead",
       "Seller Lead",
       "Seller Lead",
      ]
      .map(
        (e) => Flexible(
          child: Container(
            decoration: BoxDecoration(
            color: Colors.red.withOpacity(0.7),
            borderRadius: BorderRadius.circular(4),
          ),
          padding: EdgeInsets.symmetric(horizontal: 3),
          margin: EdgeInsets.only(right: 5),
          child: Text(
          "#$e",
          style: TextStyle(
          fontSize: 12,
          color: Colors.white,
         ),
     ),
   ),
  ),
 )
 .toList(),
)

Upvotes: 0

Prashant Vaddoriya
Prashant Vaddoriya

Reputation: 615

instead of row use Wrap Widget. it will work

Upvotes: 3

Related Questions