DecoratedBox Widget

What is DecoratedBox Widget?

The DecoratedBox widget is to paint a Decoration either before or after its child paints.

Default Constructor

The default Constructor creates a widget that paints a Decoration.

DecoratedBox(
    decoration: // required argument
    position: DecorationPosition.background,
    child:
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The decoration parameter is to paint a decoration. Tne decoration argument is required and must not be null.

The position parameter is to whether to paint the box decoration behind or in front of the child. Defaults to DecorationPosition.background.

The child parameter is to add the child widget below this(DecoratedBox) widget in a tree.

Code snippet

The following code snippet shows how to configure DecoratedBox widget.

DecoratedBox(
      decoration: BoxDecoration(
        gradient: RadialGradient(
          center: const Alignment(-0.5, -0.6),
          radius: 0.15,
          colors: <Color>[
            const Color(0xFFEEEEEE),
            const Color(0xFF111133),
          ],
          stops: <double>[0.9, 1.0],
        ),
      ),
);

Demo Code

This sample shows a radial gradient that draws a moon on a night sky:

import 'package:flutter/material.dart';

class DecoratedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        gradient: RadialGradient(
          center: const Alignment(-0.5, -0.6),
          radius: 0.15,
          colors: <Color>[
            const Color(0xFFEEEEEE),
            const Color(0xFF111133),
          ],
          stops: <double>[0.9, 1.0],
        ),
      ),
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'DecoratedBox Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: Material(child: DecoratedBoxDemo()),
        ),
      ),
    );
  }
}

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