Flutter Row ignore children if it overflows

Question

How to calculate or ignore the Children widgets of Row if it gets overflow. I dont want to use Wrap to put the content to the next line, I want to hide the overflowing child widgets

Container(
                padding: EdgeInsets.only(top: 3.0),
                child: Row(
                  children: searchResult.serviceNames
                      .map((service) => getServiceLabels(service))
                      .toList(),
                ),
              ),

P.S a way to Clip the overflowing Wrap children is what Im after

Answer 1

If you don't want to wrap the child to next line, you can put the overflowing widget within a SingleChildScrollView that allows the Row in this case to expand to its outer boundary without overflowing:

SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Container(
        padding: EdgeInsets.only(top: 3.0),
        child: Row(
                  children: searchResult.serviceNames
                      .map((service) => getServiceLabels(service))
                      .toList(),
          ),
        ),
      ),
    );

In reality, if you want to display each item wholely (meaning without being cut off in the middle because of lack of screen width), based on screen size you have 2 options:

• Calculate the width of each item:

var itemWidth = MediaQuery.of(context).width // 3; // 3 is number of items you want to display

• Calculate the number of items:

var itemNumbers = MediaQuery.of(context).width // 150; // 150 is the item's width you want to display