DEV Community

Cover image for DecoratedBox | DecoratedBoxTransistion in Flutter
vasanthkumar
vasanthkumar

Posted on • Edited on

1 1

DecoratedBox | DecoratedBoxTransistion in Flutter

A widget that paints a Decoration either before or after its child paints.

Container insets its child by the widths of the borders; DecoratedBox does not.

DecoratedBox is commonly used with BoxDecoration.
you can watch the video at


DecoratedBox({Key? key, required Decoration decoration, DecorationPosition position, Widget? child})
Enter fullscreen mode Exit fullscreen mode
DecoratedBox(
        decoration: BoxDecoration(
          gradient: RadialGradient(
            center: Alignment(-0.5, -0.6),
            radius: 0.15,
            colors: <Color>[
              Color(0xFFEEEEEE),
              Color(0xFF111133),
            ],
            stops: <double>[0.9, 1.0],
          ),
        ),
        position: DecorationPosition.background,
        child: FlutterLogo(size: 400));
Enter fullscreen mode Exit fullscreen mode

position determines whether the decoration should be at foreground or background to the child.
The above decoration created a full moon with dark night background of FlutterLogo()

DecoratedBoxTransistion

Declare it in a statefulwidget and declare the DecorationTween.

final DecorationTween decorationTween = DecorationTween(
      begin: BoxDecoration(
        gradient: RadialGradient(
          center: Alignment(-0.5, -0.6),
          radius: 0.15,
          colors: <Color>[
            Color(0xFFEEEEEE),
            Color(0xFF111133),
          ],
          stops: <double>[0.9, 1.0],
        ),
      ),
      end: BoxDecoration(
        gradient: RadialGradient(
          center: Alignment(-0.5, -0.6),
          radius: 0.15,
          colors: <Color>[
            Colors.orange,
            Colors.cyan,
          ],
          stops: <double>[0.9, 1.0],
        ),
      ));
Enter fullscreen mode Exit fullscreen mode

Declare and intialize AnimationController

  AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 5))
          ..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
Enter fullscreen mode Exit fullscreen mode

finally return DecorationBoxTransistion

child: DecoratedBoxTransition(
          position: DecorationPosition.background,
          decoration: decorationTween.animate(_controller),
          child: Container(
              width: 800,
              height: 1000,
              padding: EdgeInsets.all(10),
              child: Container()),),
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more