title: Flutter - Showing suggestion list on top of other widgets
body: <p>I am developing a screen where I have to show suggestions list below the <code>textfield</code>.</p>
  
  <p>I want to achieve this</p>
  
  <p><a href="https://i.stack.imgur.com/RGM5e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RGM5e.png" alt="enter image description here"></a></p>
  
  <p>I have developed this so far</p>
  
  <p><a href="https://i.stack.imgur.com/SVC8K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SVC8K.png" alt="enter image description here"></a></p>
  
  <p>Following code shows <code>textfield</code> with suggestions in a list.</p>
  
  <pre><code>  @override
    Widget build(BuildContext context) {
      final header = new Container(
        height: 39.0,
        padding: const EdgeInsets.only(left: 16.0, right: 2.0),
        decoration: _textFieldBorderDecoration,
        child: new Row(
          children: &lt;Widget&gt;[
            new Expanded(
              child: new TextField(
                maxLines: 1,
                controller: _controller,
                style: _textFieldTextStyle,
                decoration:
                    const InputDecoration.collapsed(hintText: 'Enter location'),
                onChanged: (v) {
                  _onTextChanged.add(v);
                  if (widget.onStartTyping != null) {
                    widget.onStartTyping();
                  }
                },
              ),
            ),
            new Container(
              height: 32.0,
              width: 32.0,
              child: new InkWell(
                child: new Icon(
                  Icons.clear,
                  size: 20.0,
                  color: const Color(0xFF7C7C7C),
                ),
                borderRadius: new BorderRadius.circular(35.0),
                onTap: (){
                  setState(() {
                    _controller.clear();
                    _places = [];
                    if (widget.onClearPressed != null) {
                      widget.onClearPressed();
                    }
                  });
                },
              ),
            ),
          ],
        ),
      );
  
      if (_places.length &gt; 0) {
        final body = new Material(
          elevation: 8.0,
          child: new SingleChildScrollView(
            child: new ListBody(
              children: _places.map((p) {
                return new InkWell(
                  child: new Container(
                    height: 38.0,
                    padding: const EdgeInsets.only(left: 16.0, right: 16.0),
                    alignment: Alignment.centerLeft,
                    decoration: _suggestionBorderDecoration,
                    child: new Text(
                      p.formattedAddress,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: _suggestionTextStyle,
                    ),
                  ),
                  onTap: () {
                    _getPlaceDetail(p);
                  },
                );
              }).toList(growable: false),
            ),
          ),
        );
  
        return new Container(
          child: new Column(
            children: &lt;Widget&gt;[header, body],
          ),
        );
      } else {
        return new Container(
          child: new Column(
            children: &lt;Widget&gt;[header],
          ),
        );
      }
    }
  </code></pre>
  
  <p>Header(<code>Textfield</code>) and body(Suggestions List - <code>SingleChildScrollView</code> with <code>ListBody</code>) is wrapped inside the Column widget, and column expands based on the total height of the children. 
  Now the problem is as Column expands, layout system pushes other widgets on screen to the bottom. But I want other widgets to stay on their positions but suggestion list starts to appear on top of other widgets.</p>
  
  <p>How can I show suggestions list on top of other widgets? And the suggestions list is dynamic, as user types I call the Google Places API and update the suggestions list. </p>
  
  <p>I have seen there is <code>showMenu&lt;T&gt;()</code> method with <code>RelativeRect</code> positions but it doesn't fulfills my purpose, my suggestion list is dynamic(changing based on user input) and the styling for each item I have is different from what <code>PopupMenuItem</code> provides.</p>
  
  <p>There is one possibility I can think of using Stack widget as root widget of this screen and arrange everything by absolute position and I put suggestion list as a last child of the stack children list. But it is not the right solution I believe.</p>
  
  <p>What other possibilities I need to look into? What other Widgets can be used here in this use-case?</p>
  
  <p>And again use-case is simple, overlaying suggestion list on other widgets on the screen and when user tap any of the item from the list then hiding this overlaid suggestion list.        </p>