'how to make customize app bar in flutter like in this image

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: PreferredSize(
          child: SafeArea(
            child: Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.accessibility_sharp),
                    onPressed: () {
                      print('object');
                    },
                  ),
                  Icon(Icons.menu),
                  Icon(Icons.search),
                ],
              ),
            ),
          ),
          preferredSize: Size.fromHeight(100),
        ),
        body: Column(
          children: [
            SizedBox(
              height: 20.0,
            ),
            Text('My Queries'),
          ],
        ),
      ),
    );
  }
}

I'm new to flutter development, I'm learning to create customize app bar. How to create it and what is the first icon in that image enter image description here .

IS that really app bar or body?

Solution 1:^[1]

AppBar is a very sophisticated widget itself hence you rarely ever have to change how it behaves; you just need to provide it with the widgets that it has to display.

For the left icon, all you have to do is to assign a leading widget to your app bar. For the rightmost widgets in your image example you need to use the actions parameter of the app bar which is a List<Widget>?. Here is an example:

To get this app bar:

All you have to do is this:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          onPressed: () {
            // go to user profile here
          },
          icon: const Icon(
            Icons.person,
          ),
        ),
        actions: [
          IconButton(
            onPressed: () {
              // log out here
            },
            icon: const Icon(
              Icons.logout,
            ),
          ),
          IconButton(
            onPressed: () {
              // display details here
            },
            icon: const Icon(
              Icons.details,
            ),
          ),
        ],
        title: const Text('Home Page'),
      ),
    );
  }
}

Solution 2:^[2]

appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          leading: IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.person,
                color: Colors.grey,
              )),
          actions: [
            IconButton(
                onPressed: () {},
                icon: Icon(
                  Icons.align_horizontal_center,
                  color: Colors.grey,
                )),
            IconButton(
                onPressed: () {},
                icon: Icon(
                  Icons.search,
                  color: Colors.grey,
                ))
          ],
        ),

Solution 3:^[3]

Try below code hope its help to you. Refer Appbar here

return Scaffold(
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.white,
    leading: IconButton(
      onPressed: () {},
      icon: const Icon(
        Icons.person_outline,
        color: Colors.black,
      ),
    ),
    title: const Text(
      'AppBar',
      style: TextStyle(
        color: Colors.black,
      ),
    ),
    actions: [
      IconButton(
        onPressed: () {},
        icon: const Icon(
          Icons.menu,
          color: Colors.black,
        ),
      ),
      IconButton(
        onPressed: () {},
        icon: const Icon(
          Icons.search,
          color: Colors.black,
        ),
      ),
    ],
  ),
);

Your result screen->

Solution 4:^[4]

You can also use `SilverAppBar`. Check it out

You can get idea from this about elements of appBar.

Change the color of appBar and define elevation:0.

Solution 5:^[5]

Change Color and icon according to your requirments

AppBar(
            leading: Icon(Icons.person),
            actions: [
              Icon(Icons.add),
              Icon(Icons.search),
            ],
            bottom: PreferredSize( preferredSize: Size.fromHeight(20),
            child: Align(alignment: Alignment.topLeft, child: Padding(
              padding: const EdgeInsets.only(left : 20.0,bottom: 8.0),
              child: Text("My Queries",),
            )))
          ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Vandad Nahavandipoor
Solution 2	Kishan
Solution 3	Ravindra S. Patil
Solution 4
Solution 5	Hammad Ali

'how to make customize app bar in flutter like in this image

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

You can also use SilverAppBar. Check it out

Solution 5:[5]