要在AppBar上添加渐变效果，需要使用AppBar的flexibleSpace属性。该属性可以接受一个Widget作为AppBar的背景，并且可以设置该Widget的高度，用来控制AppBar高度变化。在这个Widget中，可以使用Container和Decoration实现渐变效果。

示例代码如下：

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('My AppBar'),
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.blue, Colors.purple],
          ),
        ),
      ),
    );
  }
}

在上面的代码中，我们使用了Container作为AppBar的背景，并在Container的decoration属性中设置了一个渐变的LinearGradient。这个LinearGradient定义了渐变的起点和终点，以及渐变的颜色数组。

�注意事项：在设置渐变效果时，也可以通过修改begin和end属性来改变渐变方向。同时，也可以使用RadialGradient实现不同的渐变效果。