how we can use two rows in appbar flutter Like first row with title and the second with search input field

Question

Hi There I am working on a app where i need to use two sections in appbar one upper 1->section with logo and some Icons 2-> Search input field below the Title Section.

UI images are attached for better understanding.

Answer 1

Just simply create your AppBar as intended, in your screenshot, you don't actually need a second Row. A TextFormField will be enough (you will actually need to customise the InputDecoration as well):

    return AppBar(
      title: Column(children: [
        Row(children: [
          Icon(Icons.menu),
          Text('First row'),
          const Spacer(),
          Icon(Icons.person),
        ]),
        TextFormField(),
      ]),
    );

Answer 2

You can use the bottom property from the AppBar widget.

AppBar(
    title: YourFirstRowWidget(),
    centerTitle: true,
    bottom: PreferredSize(
        child: YourSearchBarWidget(),
        preferredSize: null),
  )

But you may want to create your own AppBar widget for a perfect result.