flutter中如何設計常圓底曲線的appbar

Question

試圖用 roubded 曲線彎曲 appbar 但無法實現。 應用欄

有關更多參考，請查看附圖。：[https.//i.stack.imgur.com/I0xvT.png]

Answer 1

您可以嘗試使用 BottomAppBar class 之類的東西，並將形狀屬性設置為具有所需半徑的 CircularNotchedRectangle。 這是一個例子：

BottomAppBar(
  shape: CircularNotchedRectangle(),
  notchMargin: 4.0,
  child: Container(
    height: 50.0,
  ),
)

notchMargin 屬性確定應用欄邊緣與槽口起點之間的距離。 您可以調整此值以控制曲線的大小。

您還可以通過設置其背景顏色並向其添加按鈕或其他小部件來自定義應用欄的外觀。 例如：

BottomAppBar(
  shape: CircularNotchedRectangle(),
  notchMargin: 4.0,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),
)

Answer 2

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepOrangeAccent,
      body: Column(
        children: [
          SafeArea(
            bottom: false,
            child: Row(
              children: [
                IconButton(onPressed: () {}, icon: Icon(Icons.arrow_back_ios, color: Colors.white,)),
                Text('Document Details', style: TextStyle(
                  fontWeight: FontWeight.w500,
                  fontSize: 16,
                  color: Colors.white
                ),)
              ],
            ),
          ),
          Flexible(
              child: Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: const BorderRadius.only(
                    topRight: Radius.circular(30.0),
                    topLeft: Radius.circular(30.0),
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.5),
                      spreadRadius: 4,
                      blurRadius: 6,
                      offset: const Offset(0, 3), // changes position of shadow
                    ),
                  ],
                ),
                child: Column(
                  children: [
                    Text('Items'),
                    Text('Items'),
                    Text('Items')
                  ],
                ),
              )
          )
        ],
      ),
    );
  }
}

如果它不能滿足您的需求，則無需使用 appbar。 只需根據您的喜好自定義您的小部件，並使用 safearea 來避免 mobile.network bars 和 battery bars。 通過添加填充和更改圖標來滿足您的需要，嘗試使用家庭小部件。