簡體   English   中英

如何在 flutter 中實現此 appbar 設計,其中我將 Navigation 插入 appbar 而不是 bottomNavigationBar

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

我想像這樣設計我的應用程序的 appbar

應用欄 有人可以幫我完成這項任務嗎謝謝!

在此處輸入圖像描述

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM