CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-listview
gbos
gbos

Reputation: 570

Flutter Horizontal scroll list - How to set it wider than the parent

I have a Form, and inside that I have a few text fields and an horizontal scroll view where I can upload a few images.

The form has a smaller width than the screen, so the listview is affected too. I want this list view to overflow his parent and be as wide as the phone screen.

How can I do that? I was trying with OverflowBox but I get errors. Here's my working code:

class HorizontalScrollWidget extends StatelessWidget {

 @override
 Widget build(BuildContext context) {
   return
     Container(
       child: Column(
         children: [
           Container(
             child: AutoSizeText(
               ".....",
               maxLines: 1,
               style: ....,
             ),
           ),
           _buildFeaturedCards(5),
         ],
       ),
     );
 }
}

Widget _buildFeaturedCards(int maxLength) {
 final cards = <Widget>[];
 Widget ScrollableCardsRow;

 if (maxLength > 0) {
   for (int i = 0; i < maxLength; i++) {
     cards.add( SquarePhotoElement() );
   }
   ScrollableCardsRow = Container(
     // TODO: OverflowBox??
     child: Column(
       children: <Widget>[
         SingleChildScrollView(
           scrollDirection: Axis.horizontal,
           child: Row(children: cards),
         ),
       ],
     ),
   );
 } else {
   ScrollableCardsRow = Container();
 }
 return ScrollableCardsRow;
}

Thank you for your help

Upvotes: 0

Views: 1892

Answers (3)

Muhammad Tameem Rafay
Muhammad Tameem Rafay

Reputation: 4575

I hope the above solution works fine for you but if not, then you can also try the below code. Here you just have to pass the list to the grid view builder that is wrapped inside the Flexible.

       Flexible(
            child: GridView.builder(
                itemCount: listProducts.length ,
                scrollDirection: Axis.horizontal,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 1,
                  mainAxisSpacing: 0,
                  childAspectRatio: 2,
                ),
                itemBuilder: (BuildContext context, int index) {
                  return Text("");
                })),

Upvotes: 0

dm_tr
dm_tr

Reputation: 4763

Use the property width of your Containers to width: double.infinity like this

class HorizontalScrollWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        children: [
          Container(
            child: AutoSizeText(
              ".....",
              maxLines: 1,
              style: ....,
            ),
          ),
          _buildFeaturedCards(5),
        ],
      ),
    );
  }


  Widget _buildFeaturedCards(int maxLength) {
    final cards = <Widget>[];
    Widget ScrollableCardsRow;

    if (maxLength > 0) {
      for (int i = 0; i < maxLength; i++) {
        cards.add( SquarePhotoElement() );
      }
      ScrollableCardsRow = Container(
        // TODO: OverflowBox??
        width: double.infinity,
        child: Column(
          children: <Widget>[
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(children: cards),
            ),
          ],
        ),
      );
    } else {
      ScrollableCardsRow = Container();
    }
    return ScrollableCardsRow;
  }
}

Upvotes: 0

ch271828n
ch271828n

Reputation: 17567

It is impossible to let the child be bigger than the parent, or at least contrary to the design patterns. When you are doing that, the hitTest will fail. In other words, if your child (say C) is bigger than parent (say P), and you are tapping a location where the C displays but P does not, then the C will never receive any tap events. This is because parent P thinks that "oh that tap is out of my region so I just ignore it". Then P never accepts that tap, so C never see that event. Thus, refactor your widget tree to avoid this.

Another way is to use Overlay (or use Portal library which is a wrapper of Overlay). Overlays are not restricted by that.

Upvotes: 1

Related Questions