CODEWITHSUNDEEP
flutterdartdialog
DJ. XYZ
DJ. XYZ

Reputation: 129

Animate backgroundColor of Dialog

I created a Color Tween animation to change the background color of Dialog, but it still doesn't change.

My code:

void _showDialog() {
AnimationController? animationController = AnimationController(
    vsync: this,
    duration: const Duration(
      milliseconds: 1000,
    )
);
Animation<Color?>? animation = ColorTween(
  begin: Colors.black54,
  end: Colors.redAccent,
).animate(animationController!.view);


showDialog(
    context: context,
    builder: (BuildContext context) {
      return Dialog(
        backgroundColor: animation!.value,
        elevation: 6,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8)
        ),
        child: MyTextWidget(
          onSubmitted: (text) {
            animationController.forward();
          }
      );
    }
).then((value) => {
  print(value)
});
}

Then I use animationController.forward(), but nothing happens.

What am I doing wrong?

Upvotes: 0

Views: 140

Answers (1)

bluenile
bluenile

Reputation: 6029

There was no animation because you did not wrap your dialog with any widget that would animate. Please see the working code below the only thing I did was to wrap Dialog with a AnimatedBuider and call animationController.repeat(). You may call animationController.forward from your custom text widget :

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

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

class MyWidgets extends StatefulWidget {
  @override
  _MyWidgetsState createState() => _MyWidgetsState();
}

class _MyWidgetsState extends State<MyWidgets> with TickerProviderStateMixin {
  void _showDialog() {
    AnimationController animationController = AnimationController(
        vsync: this,
        duration: const Duration(
          milliseconds: 1000,
        ));
    Animation<Color> animation = ColorTween(
      begin: Colors.black54,
      end: Colors.redAccent,
    ).animate(animationController.view);

    showDialog(
        context: context,
        builder: (BuildContext context) {
          animationController.repeat();
          return AnimatedBuilder(
              animation: animation,
              builder: (context, snapshot) {
                return Dialog(
                    backgroundColor: animation.value,
                    elevation: 6,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8)),
                    child: Container());
              });
        }).then((value) => {print(value)});
  }

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        _showDialog();
        //animationController
      },
      child: const Text("Show Dialog"),
    );
  }
}

Upvotes: 1

Related Questions