android - 如何在颤动中实现这个应用程序栏设计，在其中我将导航插入应用程序栏而不是底部导航栏

Question

我想像这样设计我的应用程序的 appbar

有人可以帮我完成这项任务吗谢谢！

标签： androidiosflutterflutter-layoutflutter-design

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(),
          ),