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。 通过添加填充和更改图标来满足您的需要，尝试使用家庭小部件。