circle_app_bar_change.dart

import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);	
void main() {
  runApp(MyApp());
}

class MyAppBar extends StatefulWidget implements PreferredSizeWidget {
  final Color color;

  MyAppBar({this.color}) : preferredSize = Size.fromHeight(kToolbarHeight);

  @override
  final Size preferredSize;

  @override
  _MyAppBarState createState() => _MyAppBarState();
}

class _MyAppBarState extends State<MyAppBar> with TickerProviderStateMixin {
  AnimationController controller;
  Color oldColor;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        vsync: this, duration: Duration(seconds: 1), value: 1);
  }

  @override
  void didUpdateWidget(MyAppBar oldWidget) {
    super.didUpdateWidget(oldWidget);
    oldColor = oldWidget.color;
    controller.forward(from: 0.0);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: oldColor,
      child: AnimatedBuilder(
        animation: controller,
        builder: (context, child) {
          return ClipOval(
            clipper: MyClipper(controller),
            child: child,
          );
        },
        child: Container(
          color: widget.color,
          width: MediaQuery.of(context).size.width,
          child: Center(
              child: Text('AppBar', style: TextStyle(color: Colors.white))),
        ),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

class MyClipper extends CustomClipper<Rect> {
  final Animation controller;
  MyClipper(this.controller);

  @override
  Rect getClip(Size size) {
    return Rect.fromCenter(
        center: Offset(size.width / 2, size.height / 2),
        height: size.width * controller.value,
        width: (size.width + 10) * controller.value);
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => true;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  var colors = [
    Colors.blue,
    Colors.green,
    Colors.red,
    Colors.amber,
    Colors.indigo
  ];
  var index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(
        color: colors[index],
      ),
      body: Center(
        child: RaisedButton(
            child: Text('Switch'),
            onPressed: () =>
                setState(() => index = (index + 1) % colors.length)),
      ),
    );
  }
}