添加边框半径后为应用栏背景着色

Question

我已经为应用栏添加了一个边框半径，应用栏的背景保持白色，我想为边框半径凹口的背景添加一种颜色。

应用栏代码

  appBar: AppBar(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        bottom: Radius.circular(30),
      ),
    ),
    centerTitle: true,
    toolbarHeight: 100,
    title: Text(
      'Registration',
      style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
    ),
    backgroundColor: Color(0xff1F1F1F),
    // backgroundColor: #,
  ),

Answer 1

您需要更改您的 canvasColor 值：

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Colors.transparent, // Change this
      ),
      home: MyHomePage(),
    );

通过这种方式，您可以更改 Scaffold 默认背景颜色！

Answer 2

如下创建自定义 AppBar 并将其用作您的 AppBar。

class CustomAppBar extends StatefulWidget with PreferredSizeWidget{
  @override
  _CustomAppBarState createState() => _CustomAppBarState();

  @override
  Size get preferredSize => Size(double.infinity,100);
}

class _CustomAppBarState extends State<CustomAppBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.deepOrange,
        child: AppBar(
            backgroundColor: Colors.black,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.vertical(
                  bottom: Radius.circular(30),
                ))),);
  }
}

添加边框半径后为应用栏背景着色

Color the background of app bar after adding border radius

mobile

android

flutter

flutter-layout