Show Border To Image Widget Using Flutter Android App

Posted By Bajarangi soft , Posted On 13-10-2020

The container widget in flutter supports decoration argument which accepts BoxDecoration() function with multiple values like border direction, border width and border color. To set a border around a image we need to wrap the Image widget component in a parent Container component and then apply the border on parent container widget.

Show Border To Image Widget

Step 1
The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.

Step 2
The image added inside the assets/images folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below

flutter: 
  assets: 
   - assets/

Complete Code For Show Border To Image widget In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
          backgroundColor: Colors.black,
          appBar: AppBar(
            backgroundColor: Colors.orange,
            title: Text('Border Widget'),
            centerTitle: true,
          ),
            body:SafeArea(
                child: Center(
                  child: Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(top:30.0),
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(15.0)),
                              border: Border.all(
                                color: Colors.orange,
                                width: 6,
                              )),
                          child: Image.asset(
                            'assets/img3.jpg',
                            width: 250,
                            fit: BoxFit.contain,
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top:30.0),
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(15.0)),
                              border: Border.all(
                                color: Colors.orange,
                                width: 6,
                              )),
                          child: Image.asset(
                            'assets/img2.jpg',
                            width: 250,
                            fit: BoxFit.contain,
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top:30.0),
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(15.0)),
                              border: Border.all(
                                color: Colors.orange,
                                width: 6,
                              )),
                          child: Image.asset(
                            'assets/img1.jpg',
                            width: 250,
                            fit: BoxFit.contain,
                          ),
                        ),
                      ),
                    ],
                  ),
                ))
        )
    );
  }
}

Show Border To Image Widget Using Flutter Android App

Step 1 The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.

Step 1
The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.