Color the background of app bar after adding border radius

Question

I have added a border radius for the app bar and the background of the app bar stays white color and want to add a color to the background of the border radius notches.

The code for the App bar

  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

You need to change your canvasColor value:

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

In this way you change the Scaffold default background color!