CODEWITHSUNDEEP
fluttersearchtabbar
notarealgreal
notarealgreal

Reputation: 686

Flutter Search Button in app bar to a new page with TabBar items as option

I'm just passing an Android application to Flutter, the current problem is as follows: In Android I have a Fragment with a search button when the search button is clicked, a new fragment is shown with a tab layout where the user can search a book by title or by the user name, the aspect is shown in the next pictures:

enter image description here

In the new fragment, the user can choose the search by and can previsualize the matching results.

enter image description here

Which is the best way to implement something like this in Flutter, I understand that the beginning is something like this:

return Scaffold(
    body: Column(
      children: <Widget>[
        // Page Content 
      ],
    ),
    appBar: AppBar(
      title: Text(this.text),
      actions: <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.search)
        )
      ],
    ),
);

But how I should implement the tab bar to choose the search by and the search input text in the app bar to be focused.

Upvotes: 1

Views: 2747

Answers (2)

Anas
Anas

Reputation: 1073

Add this onPressed function

onPressed: () {
            Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
  );
          },

now create a new state class

return Scaffold(
    appBar: AppBar(
      title: TextField(),
      bottom: TabBar(
        tabs: [Text("Books"), Text("Users")],
      ),
      actions: <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.search)
        )
      ],
    ),
));

Upvotes: 2

towhid
towhid

Reputation: 3278

return Scaffold(
    body: Column(
      children: <Widget>[
        // Page Content 
      ],
    ),
    appBar: AppBar(
      title: Text(this.text),
      bottom: TabBar(
        tabs: [Text("Books"), Text("Users")],
      ),
      actions: <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.search)
        )
      ],
    ),
);

Upvotes: 1

Related Questions