Flutter Set Border on Image - Easy Solution

Hello guys, There are so many customization a developer can use on Image widget while developing a app. But Image widget directly does not support border formatting options.

Flutter Set Border on Network Image

To put border around a Image we have to use Container widget as its parent widget. Now we will apply border on Container and does not give fixed width and height to Container. So it will adapt the image width height eventually. At the end we will integrate BoxDecoration property on Container to set border on image.

1. Creating Container widget with Border as Parent and put network Image inside it as its child.

Container(
      decoration: BoxDecoration(
          border: Border.all(
        color: Colors.red,
        width: 5,
      )),
      child: Image.network(
        imageURL,
        width: 300,
        height: 200,
        fit: BoxFit.cover,
      ),
    )

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Container(
      decoration: BoxDecoration(
          border: Border.all(
        color: Colors.red,
        width: 5,
      )),
      child: Image.network(
        imageURL,
        width: 300,
        height: 200,
        fit: BoxFit.cover,
      ),
    )))));
  }
}

Flutter Set Border on Local Image

1. The coding process is same for both Network image and local image. If you want to learn about How to use local image in flutter app than read from HERE.

2. Wrap local image widget in container widget as child and put border on Container.

Container(
      decoration: BoxDecoration(
          border: Border.all(
        color: Colors.red,
        width: 5,
      )),
      child: Image.asset(
        localImagePath,
        width: 300,
        height: 200,
        fit: BoxFit.cover,
      ),
    )

Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final String localImagePath = 'assets/images/flower.jpg';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Container(
      decoration: BoxDecoration(
          border: Border.all(
        color: Colors.red,
        width: 5,
      )),
      child: Image.asset(
        localImagePath,
        width: 300,
        height: 200,
        fit: BoxFit.cover,
      ),
    )))));
  }
}

Screenshot: