How can I achieve this appbar design in flutter in which I insert Navigation inside appbar rather than bottomNavigationBar

Question

I want to design appbar of my app like this

Can someone help me out to achieve this task Thanks!

Answer 1

//customise this with your requirements
          home: Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
                backgroundColor: Colors.white,
                leading: Icon(Icons.account_circle, color: Colors.grey),
                title: DecoratedBox(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    border: Border.all(color: Colors.grey, width: 0.7),
                  ),
                  child: IntrinsicHeight(
                    child: Row(mainAxisSize: MainAxisSize.max,
                               children: [
                      Expanded(
                        child: DecoratedBox(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20),
                              bottomLeft: Radius.circular(20),
                            ),
                            color: Colors.grey,
                          ),
                          child: IconButton(
                            padding: EdgeInsets.zero,
                              icon: Icon(Icons.blur_circular, color: Colors.white,),
                              onPressed: () {
                                //todo
                              }),
                        ),
                      ),
                      VerticalDivider(
                        color: Colors.grey,
                        width: 0.5,
                      ),
                      Expanded(
                        child: DecoratedBox(
                          decoration: BoxDecoration(
                          //todo
                          ),
                          child: IconButton(
                              icon: Icon(Icons.people, color: Colors.grey),
                              onPressed: () {
                                //todo
                              }),
                        ),
                      ),
                      VerticalDivider(
                        color: Colors.grey,
                        width: 0.5,
                      ),
                      Expanded(
                        child: DecoratedBox(
                          decoration: BoxDecoration(
                          //todo
                          ),
                          child: IconButton(
                              icon: Icon(Icons.menu, color: Colors.grey),
                              onPressed: () {
                                //todo
                              }),
                        ),
                      ),
                    ]),
                  ),
                ),
                centerTitle: true,
                actions: [
                  IconButton(
                      icon: Icon(Icons.menu, color: Colors.grey),
                      onPressed: () {
                        //todo
                      }),
                ]),
            body: MyWidget(),
          ),