Search code examples
flutterdartandroid-actionbarappbar

How to have two search bar on action bar?


What is the correct way to achieve something like image below?

enter image description here

I add column and row in appBar, but get this

enter image description here

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: PreferredSize(
      preferredSize: Size.fromHeight(150.0),
      child: AppBar(
          title: Column(
        children: <Widget>[
          Row(children: <Widget>[Icon(Icons.access_alarm), Text("idwidjow")]),
          SizedBox(
            height: 20,
          ),
          Row(
            children: <Widget>[Icon(Icons.access_alarm), Text("idwidjow")],
          )
        ],
      )),
    ));
  }

Solution

  • How about to try something like this... You will have to finish the design though

    appBar: PreferredSize(
        preferredSize: Size.fromHeight(150.0),
        child: AppBar(
          flexibleSpace: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    child: Icon(Icons.arrow_back),
                    width: 50,
                  ),
                  Icon(Icons.person),
                  Flexible(
                      child: TextField(
                          decoration: InputDecoration(
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(12.0)),
                    ),
                  ))),
                  Icon(Icons.arrow_back)
                ],
              ),
              Row(
                children: <Widget>[
                  SizedBox(width: 50),
                  Icon(Icons.person),
                  Flexible(
                      child: TextField(
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12.0)),
                      ),
                    ),
                  )),
                  Icon(Icons.arrow_back)
                ],
              )
            ],
          ),
        ),
      )
    

    Output

    enter image description here