Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Putting Widget above a ListView in Flutter

The below code is working fine with me for calling and displaying data from firestore:

return ListView(
 padding: const EdgeInsets.only(top: 20.0),
 children: snapshot.map((data) => _buildListItem(context, data)).toList(),
);

But If I tried to put it in a column so I add another widget above it, it fails and give stack overflow:

return Column(
    children: <Widget>[
    Text('Hellow'),
  ListView(
  padding: const EdgeInsets.only(top: 20.0),
  children: snapshot.map((data) => _buildListItem(context, data)).toList(),
)]);
like image 542
Hasan A Yousef Avatar asked Dec 21 '18 15:12

Hasan A Yousef


People also ask

How can I put a widget above another widget in Flutter?

In Flutter, the overlay lets you print visual elements on top of other widgets by inserting them into the overlay's stack. You insert a widget into the overlay using an OverlayEntry and you use Positioned and AnimatedPositioned to choose where the entry is positioned within the overlay.

How do you change the widget position in Flutter?

Here's how you do it:Step 1: Wrap the Stack's child widget inside the Position widget. Step 2: Inside the Position widget, add the top , right , bottom , left property and give it a value. For example, setting top:15 and right:0 will position a widget on the top right of your screen with 15 px space from the top.

How do you get the position of a widget in Flutter?

That's how to get the size and position of a widget rendered on the screen. Basically, you need to get the RenderBox of the widget. Then, you can access the size property to get the size of the widget and call localToGlobal method to get the offset.


1 Answers

You need to put your ListView inside an Expanded widget so it knows how much space it can fill.

return Column(
    children: <Widget>[
      Text('Hellow'),
      Expanded(
        child: ListView(
          padding: const EdgeInsets.only(top: 20.0),
          children:
              snapshot.map((data) => _buildListItem(context, data)).toList(),
        ),
      ),
    ],
  );
like image 83
Jordan Davies Avatar answered Oct 17 '22 17:10

Jordan Davies