Flutter StreamBuilder inside a row-CodePudding

Is it possible to wrap streambuilder inside a row? Because when I wrap it with a row, it gives me an error saying:

RenderBox was not laid out: RenderRepaintBoundary#3b79a relayoutBoundary=up28 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1927 pos 12: 'hasSize'

I've tried wrapping the streambuilder again with a container and set it's height, but I got a different error saying Horizontal viewport was given unbounded width.

Here is my code:

Row(
                children: [
                  Text('You, ',
                    style: TextStyle(
                      color: Colors.white.withOpacity(.7),
                      fontSize: 12
                    ),
                  ),
                  Container(
                    height: 15,
                    child: StreamBuilder<List<ContactModel>>(
                      stream: homes.listControllerContact.stream,
                      builder: (context, snapshot){
                        List<ContactModel> contactList = [];
                        for(var item in json.decode(conversation!.idReceiversGroup!)){
                          var query = mains.objectbox.boxContact.query(ContactModel_.userId.equals(item)).build();
                          if(query.find().isNotEmpty) {
                            contactList.add(query.find().first);
                          }

                        }

                        return Container(
                          height: 15,
                          child: ListView.builder(
                            itemCount: contactList.length,
                            scrollDirection: Axis.horizontal,
                            itemBuilder: (context, index)=>
                                index != contactList.length-1? Text("${contactList[index].userName!}, ",
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: Colors.white.withOpacity(.7),
                                    fontSize: 12,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ): Text(contactList[index].userName!,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: Colors.white.withOpacity(.7),
                                    fontSize: 12,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              )

Is there any solution?

CodePudding user response：

Well you can, but one problem you are having here is, you are putting a Horizontal ListView inside a row and when it tries to paint the layout, due to the scrollable nature of the ListView, it will paint a boundless horizontal view.

You can wrap your StreamBuilder with Expanded widget and it should fix the issue by allocating only the available space to your widget.

Row(
                children: [
                  Text('You, ',
                    style: TextStyle(
                      color: Colors.white.withOpacity(.7),
                      fontSize: 12
                    ),
                  ),
                  Expanded(
                    child: Container(
                    height: 15,
                    child: StreamBuilder<List<ContactModel>>(
                      stream: homes.listControllerContact.stream,
                      builder: (context, snapshot){
                        List<ContactModel> contactList = [];
                        for(var item in json.decode(conversation!.idReceiversGroup!)){
                          var query = mains.objectbox.boxContact.query(ContactModel_.userId.equals(item)).build();
                          if(query.find().isNotEmpty) {
                            contactList.add(query.find().first);
                          }

                        }

                        return Container(
                          height: 15,
                          child: ListView.builder(
                            itemCount: contactList.length,
                            scrollDirection: Axis.horizontal,
                            itemBuilder: (context, index)=>
                                index != contactList.length-1? Text("${contactList[index].userName!}, ",
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: Colors.white.withOpacity(.7),
                                    fontSize: 12,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ): Text(contactList[index].userName!,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: Colors.white.withOpacity(.7),
                                    fontSize: 12,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                          ),
                        );
                      },
                    ),
                  ),
                 ),
                ],
              )