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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay