flutter Text field appears when button is clicked icons buttons

Question

My problem

I want make search icons button text field appears at the bottom of the button when button is clicked

Are there any documents or sites I can refer to?

My code -- makes StatefulWidget --

appBar: AppBar(
          backgroundColor: const Color(0xffffffff),
          centerTitle: true,
          title: Text(
            'CREW',
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.w900),
          ),
          elevation: 0.0,
          actions: [
            IconButton(icon: Icon(Icons.search), onPressed: (){
            }),
            IconButton(icon: Icon(Icons.notifications), onPressed: null),
          ],

Answer 1

**Try below code to add search bar in appbar.**

 

    AppBar(
               backgroundColor: const Color(0xffffffff),
          centerTitle: true,
          title: Text(
            'CREW',
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.w900),
          ),
          elevation: 0.0,
                actions: [
                  // Navigate to the Search Screen
                  IconButton(
                      onPressed: () => Navigator.of(context)
                          .push(MaterialPageRoute(builder: (_) => const SearchPage())),
                      icon: const Icon(Icons.search)),
                IconButton(icon: Icon(Icons.notifications), onPressed: null),
        
                ],
              ),

//search ui & page

class SearchPage extends StatelessWidget {
  const SearchPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          // The search area here
          title: Container(
        width: double.infinity,
        height: 40,
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(5)),
        child: Center(
          child: TextField(
            decoration: InputDecoration(
                prefixIcon: const Icon(Icons.search),
                suffixIcon: IconButton(
                  icon: const Icon(Icons.clear),
                  onPressed: () {
                    /* Clear the search field */
                  },
                ),
                hintText: 'Search...',
                border: InputBorder.none),
          ),
        ),
      )),
    );
  }