如何使用圖標按鈕將應用欄文本更改為 flutter 中的 TextField？

Question

我正在制作一個應用程序來搜索 firebase 上的課程。應用程序欄顯示一個文本：“主頁”，並且在屏幕的右側有一個搜索按鈕：

我現在想從應用程序欄中隱藏“主頁”文本以單擊搜索按鈕，並顯示用於鍵入查詢的字段。

這是我的代碼，我不知道如何實現。

appBar: AppBar(
    title: Text(
      "Home",
      style: TextStyle(
        fontSize: 16.0, /*fontWeight: FontWeight.bold*/
      ),
    ),
    centerTitle: true,

 //search icon
 actions: [
  IconButton(
    icon: Icon(Icons.search),
    onPressed: () {
      //i want to change the text of the app bar:"Home" to a TextField to type
      AppBar(
        title: TextField(
          style: TextStyle(color: Colors.white),
          decoration: InputDecoration(
              hintText: 'Search Courses',
              hintStyle: TextStyle(color: Colors.white)),
          controller: searchController,
        ),
      );
    },
  ),
],

),

Answer 1

您可以使用 boolean 變量來判斷是否正在搜索。

bool isSearching = false;

appBar: AppBar(
    title: isSearching ? TextField(
          style: TextStyle(color: Colors.white),
          decoration: InputDecoration(
              hintText: 'Search Courses',
              hintStyle: TextStyle(color: Colors.white)),
          controller: searchController,
) 

     : Text(
      "Home",
      style: TextStyle(
        fontSize: 16.0, /*fontWeight: FontWeight.bold*/
      ),
    ),
    centerTitle: true,

 //search icon
 actions: [
  IconButton(
    icon: Icon(Icons.search),
    onPressed: () {
      setState((){
        isSearching = true;
      });
    },
  ),
],

),

Answer 2

我想你想要這樣的東西：

  bool _showSearch=false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _showSearch? TextField(
          controller: searchController,
          style: const TextStyle(color: Colors.white),
          decoration: const InputDecoration(
              hintText: 'Search Courses',
              hintStyle: TextStyle(color: Colors.white)),
        ):const Text(
          "Home",
          style: TextStyle(
            fontSize: 16.0, /*fontWeight: FontWeight.bold*/
          ),
        ),
        centerTitle: true,

        //search icon
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              setState(() {
                _showSearch=!_showSearch;
              });
            },
          ),
        ],
      ),
    );
  }