Flutter App Bar Search Text Field

import "package:flutter/material.dart";

void main() {
  runApp(
    MaterialApp(
      home: Home(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Icon iconSearch = Icon(Icons.search);
  Icon iconMore = Icon(Icons.more_vert);
  Widget titleBar = Text("YouTube");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: titleBar,
        centerTitle: false,
        backgroundColor: Colors.red,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print("hello");
          },
        ),
        actions: [
          IconButton(
            icon: iconSearch,
            onPressed: () {
              setState(() {
                if (this.iconSearch.icon == Icons.search) {
                  this.iconSearch = Icon(Icons.cancel);
                  this.titleBar = TextField(
                    textInputAction: TextInputAction.go,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: "Search...",
                    ),
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    ),
                  );
                } else {
                  this.iconSearch = Icon(Icons.search);
                  this.iconMore = Icon(Icons.more_vert);
                  this.titleBar = Text("YouTube");
                }
              });
            },
          ),
          IconButton(
            icon: iconMore,
            onPressed: () {
              print("Hello");
            },
          ),
        ],
        elevation: 6,
        titleSpacing: 30,
      ),
      body: Center(
        child: Text("Hello Data"),
      ),
    );
  }
}

---------------------------

Output:

Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.