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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more