fluttersearchtextfieldsearch-form

flutter Text field appears when button is clicked icons buttons


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),
          ],

Solution

  • **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),
              ),
            ),
          )),
        );
      }