【问题标题】:How can I achieve this appbar design in flutter in which I insert Navigation inside appbar rather than bottomNavigationBar如何在颤动中实现这个应用程序栏设计,在其中我将导航插入到应用程序栏而不是底部导航栏
【发布时间】:2021-05-04 10:36:01
【问题描述】:

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

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

【问题讨论】:

    标签: android ios flutter flutter-layout flutter-design


    【解决方案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(),
              ),
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-05-29
      • 2022-12-12
      • 1970-01-01
      相关资源
      最近更新 更多