How to implement search page via TextField in Flutter?-CodePudding

I need to make a search page. Made by means of TextField a field on clicking on which the page of search should open. Tell me how to implement clicking on the TextField and so that the back button appears on the left and the buttons disappear on the right?

code

TextFormField(
                style: constants.Styles.textFieldTextStyleWhite,
                cursorColor: Colors.white,
                decoration: InputDecoration(
                    contentPadding: const EdgeInsets.only(
                      top: 15, // HERE THE IMPORTANT PART
                    ),
                    border: InputBorder.none,
                    prefixIcon: Align(
                        alignment: Alignment.centerLeft,
                        child: SvgPicture.asset(
                          constants.Assets.search,
                          width: 20,
                          height: 20,
                        ))),
              )

Normal state

After clicking on the line

CodePudding user response：

Wrap everything into a StatefulWidget.

Then, when clicking the TextFormField, change the attributes of the StatefulWidget.

class YourPage extends StatefulWidget {
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {

  var myBool = false;
  
  // Initialize your Row-buttons here
  // ...

  void changeRow(){
    setState(() {
 
     // Hide or show Row-buttons here.   

     myBool = true;

    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
       child: Scaffold(
         body: Row(children:[

             myBool == true 
               ? Icon( ...)         // shows icon
               : SizedBox.shrink(), // shows nothing

             TextFormField( onTap: () => changeRow() ),

             // other BUTTONs here
         ])
       ),
    );
  }
}

There are a few possibilities for an AppBar to show Text or Buttons.

Check these examples:

https://www.fluttercampus.com/tutorial/10/flutter-appbar/