svg_color_changing.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/svg.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: const Home(),
      theme: ThemeData.dark(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({
    Key? key,
  }) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

String getSvg(String color) {
  return '''
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="139" height="159" viewBox="0 0 139 159">
  <defs>
    <filter id="Ellipse_10" x="35" y="89" width="70" height="70" filterUnits="userSpaceOnUse">
      <feOffset dy="3" input="SourceAlpha"/>
      <feGaussianBlur stdDeviation="8" result="blur"/>
      <feFlood flood-color="#ffc72f"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="light_bulb" data-name="light bulb" transform="translate(-204 4)">
    <g transform="matrix(1, 0, 0, 1, 204, -4)" filter="url(#Ellipse_10)">
      <circle id="Ellipse_10-2" data-name="Ellipse 10" cx="11" cy="11" r="11" transform="translate(59 110)" fill="$color"/>
    </g>
    <path id="Path_100" data-name="Path 100" d="M30.334,1.617h79.054c3.314,0,4.206,2.324,6,6L139,62a6,6,0,0,1-6,6H6a6,6,0,0,1-6-6L24.334,7.617C25.837,4.237,27.02,1.617,30.334,1.617Z" transform="translate(204 52)" fill="#fff"/>
    <rect id="Rectangle_13" data-name="Rectangle 13" width="5" height="102" transform="translate(271 -4)" fill="#fff"/>
    <rect id="Rectangle_14" data-name="Rectangle 14" width="4" height="58" rx="2" transform="matrix(0.921, -0.391, 0.391, 0.921, 303.828, 59.087)" fill="#568bd0" opacity="0.151"/>
  </g>
</svg>
  ''';
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  late final AnimationController animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 500),
  );
  var colorAnimation = ColorTween(
    begin: null,
    end: Colors.primaries[0],
  ).animate(const AlwaysStoppedAnimation(1));

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Material App Bar')),
      body: Center(
        child: AnimatedBuilder(
            animation: animationController,
            builder: (_, __) {
              final color =
                  '#${colorAnimation.value!.value.toRadixString(16).substring(2)}';

              return SvgPicture.string(getSvg(color));
            }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final index = Random().nextInt(Colors.primaries.length);
          final newColor = Colors.primaries[index];
          colorAnimation =
              ColorTween(begin: colorAnimation.value, end: newColor).animate(
            CurvedAnimation(
              parent: animationController,
              curve: Curves.easeInOut,
            ),
          );
          animationController.forward(from: 0);
        },
      ),
    );
  }
}