How to add a border to a Container in Flutter?

Container in flutter

Container widget is having one child widget and handle multiple properties like height, widget, decoration color, padding alignment, margin, constraints.

Border in container

Container(
         height: 100.0,
         width: 200,
         padding: const EdgeInsets.symmetric(vertical: 30.0),
         decoration: BoxDecoration(
           border: Border.all(color: Colors.blueAccent, width: 5.0),
           color: Colors.amberAccent,
         ),
         child: Text(
           "Container demo",
           textAlign: TextAlign.center,
           style: TextStyle(color: Colors.white, fontSize: 25.0),
         ),
       )

How to add a border to a Container in Flutter?

Add an image in a container

Decoration  image widget if used for setting background image in a container

 

Container(
         height: 200.0,
         width: 300.0,
         decoration: BoxDecoration(
           image: DecorationImage(
             image: NetworkImage(
                 'https://images.unsplash.com/photo-1611095566888-f1446042c8fc?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80'),
             fit: BoxFit.cover,
           ),
         ),
       ),
     )

 

Transform in Container

This property is used for rotating the container, we can also rotate a container on any axis.

Container(
         height: 100.0,
         width: 200,
         transform: Matrix4.rotationZ(20.0),
         padding: const EdgeInsets.symmetric(vertical: 30.0),
         decoration: BoxDecoration(
           border: Border.all(color: Colors.blueAccent, width: 5.0),
           color: Colors.orangeAccent,
         ),
         child: Text(
           "Container demo",
           textAlign: TextAlign.center,
           style: TextStyle(color: Colors.white, fontSize: 25.0),
         ),
       )

Transform in Container

Container Constructor

Container(
   {Key? key,
   AlignmentGeometry? alignment,
   EdgeInsetsGeometry? padding,
   Color? color,
   Decoration? decoration,
   Decoration? foregroundDecoration,
   double? width,
   double? height,
   BoxConstraints? constraints,
   EdgeInsetsGeometry? margin,
   Matrix4? transform,
   AlignmentGeometry? transformAlignment,
   Widget? child,
   Clip clipBehavior: Clip.none}
)

Implementation

Container({
 Key? key,
 this.alignment,
 this.padding,
 this.color,
 this.decoration,
 this.foregroundDecoration,
 double? width,
 double? height,
 BoxConstraints? constraints,
 this.margin,
 this.transform,
 this.transformAlignment,
 this.child,
 this.clipBehavior = Clip.none,
}) : assert(margin == null || margin.isNonNegative),
    assert(padding == null || padding.isNonNegative),
    assert(decoration == null || decoration.debugAssertIsValid()),
    assert(constraints == null || constraints.debugAssertIsValid()),
    assert(clipBehavior != null),
    assert(decoration != null || clipBehavior == Clip.none),
    assert(color == null || decoration == null,
      'Cannot provide both a color and a decoration\n'
      'To provide both, use "decoration: BoxDecoration(color: color)".'
    ),
    constraints =
     (width != null || height != null)
       ? constraints?.tighten(width: width, height: height)
         ?? BoxConstraints.tightFor(width: width, height: height)
       : constraints,
    super(key: key);

Note:- If you use decoration and color property at the time it will gives you an error because decoration also accepts a color value, please use only one.

'color == null || decoration == null'

Furthor reading:-

https://api.flutter.dev/flutter/widgets/Container-class.html

Happy Coding:)

Leave a Comment