Add Flutter Widgets to layout above FirebaseAnimatedList

Question

So I'm building a Flutter app for the first time, so I still have a way to go to completely understanding the framework, but I am stuck on this issue and I am unable to find a good answer anywhere else.

In my layout, I have a FirebaseAnimatedList that can scroll infinitely.

I simply need to add a widget above the FirebaseAnimatedList that displays some other data.

Widget body = new ListView(
  children: <Widget>[
    new Text("Hello!"),
    new FirebaseAnimatedList(//..........)
    ],
);

I then add that body widget as the body element of a new Scaffold object.

But I receive the following error:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter (25559): The following assertion was thrown during performResize(): I/flutter (25559): Vertical viewport was given unbounded height. I/flutter (25559): Viewports expand in the scrolling direction to fill their container.In this case, a vertical I/flutter (25559): viewport was given an unlimited amount of vertical space in which to expand. This situation I/flutter (25559): typically happens when a scrollable widget is nested inside another scrollable widget. I/flutter (25559): If this widget is always nested in a scrollable widget there is no need to use a viewport because I/flutter (25559): there will always be enough vertical space for the children. In this case, consider using a Column I/flutter (25559): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size I/flutter (25559): the height of the viewport to the sum of the heights of its children.

I have tried those options but I've been able to solve this, if anyone has come across this issue before or knows the solution then any some help would be much appreciated.

DomingoMG DomingoMG · Accepted Answer · 2018-08-18T14:01:38

Do you want to put a static widget on top of the list?

Could you teach something else about the code?

REASON: The reason is that you were creating a list when you call FirebaseAnimatedList and FirebaseAnimatedList is generating another list.

Container getContent() {
  return new Container(
    child: new Column(
      children: <Widget>[
         new Text("HELLO"),
         new Flexible(
          child: new FirebaseAnimatedList(
            query: Your database reference,
            itemBuilder: (_, DataSnapshot snapshot, Animation<double> 
            animation, int index) {
               return new Column();
            }
          ),
        )
      ]
    )
  );
}

Thanks for the answer, but, in your solution, how can I make the new Text("Hello") message scroll with the FirebaseanimatedList instead of being attached at the top.

Container getContent() {
      return new Container(
        child: new Column(
          children: <Widget>[
             new Flexible(
              child: new FirebaseAnimatedList(
                query: Your database reference,
                itemBuilder: (_, DataSnapshot snapshot, Animation<double> 
                animation, int index) {
                   return new Container(
                      child: new Column(
                        children: <Widget>[
                          new Text("HELLO"),
                        ]
                      )
                   );
                }
              ),
            )
          ]
        )
      );
    }

Add Flutter Widgets to layout above FirebaseAnimatedList

1 Answers