CODEWITHSUNDEEP
flutterflutter-layout
Francis Manoj Fernnado
Francis Manoj Fernnado

Reputation: 262

Flutter Row ignore children if it overflows

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

Upvotes: 6

Views: 5808

Answers (2)

JaredEzz
JaredEzz

Reputation: 377

Like @Bach said, you can wrap the content in a SingleChildScrollView. However, if you want to restrict the content from scrolling, you can add NeverScrollablePhysics:

return SingleChildScrollView(
          physics: const NeverScrollableScrollPhysics(),
          child: Column(
            children: [],
          ),
        );

Upvotes: 2

Bach
Bach

Reputation: 3326

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

Upvotes: 1

Related Questions