How to give Borders to images in flutter

Hi Guy’s Welcome to Proto Coders Point. In this flutter Article let’s learn how to add border to images in flutter.

In this Article will cover 4 example:

• Flutter image with Border all side.
• Flutter Image with rounded/circular borders
• Flutter Image with one side border
• Different border color at each side

As you all know to display Image in flutter we make use of Image Widget, But Flutter Image widget do not provide any properties to set a border to a image. To achieve border to any widget we can use Container widget in which we use decoration properties to set border.

Video Tutorial

Giving Border to Image in flutter

Example:

Container(
          decoration: BoxDecoration(
              // add border
              border: Border.all(/*  widget, color,..etc */),     
          // add image
          child: Image.asset(/* ..path to image. */),
),

In Detail Complete Code Example below.

Flutter Image with Border on all side – Example 1

This Example will create a Border around Image widget by using container, Inside container widget I have used decoration properties with BoxDecoration which has border property and then set Border on all the sides on child widget.

Source Code

body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              SizedBox(height: 10,),
              Container(
                width: 150,
                height: 220,
                decoration: BoxDecoration(
                  border: Border.all(width: 5,color: Colors.orange)
                ),
                  child: Image.asset('assets/img1.jpg',fit: BoxFit.fill,)
              ),
              
            ],
          ),
        ),
      ),

Flutter image with rounded border or circular borders

The Below Example will clip the edge of a image, To do so we make use of ClipRRect widget with borderRadius property.

ClipRRect(
                borderRadius: BorderRadius.circular(/*..20.*/),
                child: Image.asset(/* ... */),
),

Then to add border color, Container widget is been used with decoration as BoxDecoration.

Source Code

body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [

              SizedBox(height: 10,),
              Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 5,color: Colors.redAccent),
                  borderRadius: BorderRadius.circular(20)
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(15),
                    child: Image.asset('assets/img2.jpg')
                ),
              ),
              SizedBox(height: 10,),
            
            ],
          ),
        ),
      ),

Flutter Image with one side border

Some time in flutter ui designing you may need border to be set only on one side of a widget, In that case you can make border set like this:

Container(
                  decoration: BoxDecoration(
                    border: Border(
                      left: BorderSide(width: 10,color: Colors.blue),
                      // Here use border properties left, right, top, bottom
                    )
                  ),
                    child: Image.asset('assets/img3.jpg')),

Here in border use properties like left, right, top, bottom.

Source Code

body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(25.0),
                child: Container(
                  decoration: BoxDecoration(
                    border: Border(
                      left: BorderSide(width: 10,color: Colors.blue),
                      // Here you can make use of border properties left, right, top, bottom
                    )
                  ),
                    child: Image.asset('assets/img3.jpg')),
              ),
            ],
          ),
        ),
      ),

Flutter Different color border on each side

Source Code

body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              SizedBox(height: 10,),
              Padding(
                padding: const EdgeInsets.all(25.0),
                child: Container(
                  decoration: BoxDecoration(
                    border: Border(
                      left: BorderSide(width: 10,color: Colors.blue),
                      right: BorderSide(width: 10,color: Colors.redAccent),
                      bottom: BorderSide(width: 10,color: Colors.green),
                      top: BorderSide(width: 10,color: Colors.orange),
                    )
                  ),
                    child: Image.asset('assets/img3.jpg')),
              ),
            ],
          ),
        ),
      ),