Как я могу поместить SearchView поверх ListView?

Question

Я новичок, чтобы трепетать и пытаюсь сложить SearchView поверх ListView. Я бы выглядел примерно так:

Я не знаю, как добиться этого макета на флаттере, я попытался использовать столбец (который приводит к сбою приложения), использовал стек (который перекрывает виджеты), и я наконец попытался добавить поисковый виджет первым элемент ListView, но это не привело к поиску.

Widget build(BuildContext context) {
return new Scaffold(
  drawer: _makeDrawer(),
  appBar: new AppBar(
    title: new Center(
      child: new Text("translate"),
    ),
    actions: <Widget>[
      new IconButton(icon: new Icon(Icons.people_outline), onPressed: () {})
    ],
  ),
  body: _phraseListFutureBuilder(), // this part of the code renders the listview
);

}
FutureBuilder _phraseListFutureBuilder () { вернуть новый FutureBuilder ( builder: (контекст BuildContext, снимок AsyncSnapshot) { вернуть mPhrases.isEmpty ? новый CircularProgressIndicator () : _buildPhrases (); }, будущее: _fetchData ()); }

Answer 1

A Column был правильным выбором, но вам также понадобится виджет Expanded, чтобы указать, какой виджет должен заполнять оставшееся пространство:

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    TextField(
      decoration: InputDecoration(
        labelText: 'Search'
      ),
    ),
    Expanded(
      child:  _phraseListFutureBuilder(),
    )  
  ],
);