ActionBar 中的 Flutter 搜索栏类似于 yelp 应用

Question

我正在尝试构建一个应用程序位置库，我想要一个如图所示的搜索栏。该搜索栏应该能够搜索位置和文本。有人有这样的预建搜索栏吗？

Answer 1

您可以创建自己的自定义应用程序 Bar.Simply 为 appBar 属性（在脚手架中）提供 PreferredSize 并根据需要进行设计。下面是实现：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar:PreferredSize(
        preferredSize: Size.fromHeight(45.0),
                //give child any Widget you like
       child: Center( 
        child: Container(
           width:MediaQuery.of(context).size.width*0.9,
          height:100,
          child:Center(child: Text("CUSTOM APP BAR")),
          color:Colors.blueAccent,
        ),
      ),
    ),
  );
 }
}

ActionBar 中的 Flutter 搜索栏类似于 yelp 应用

Flutter Search bar in ActionBar like yelp app

search

google-search-appliance

yelp

flutter