How to Show Border Around Image in Flutter

This Article is posted by xitex34014 at 5/8/2021 8:33:44 AM



I have already blogged on 

How to Add Borders to a Widget In Flutter ?

  and how to show image from url in flutter. In this blog post, I will show you how to add a border around an image in flutter.

In order to show local images in your flutter app, you need to add images inside your project folder. You can follow steps to add images from this link. After adding an image what you need is to draw a border around the image.

In this Flutter example, we use BoxDecoration class. Box decoration has body and border. Here I am using a red color border with a width of 10 around the image.


import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Image with border Example'),
        ),
        body: Center(
      child: Body()
    ),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
  decoration: BoxDecoration(
    color: const Color(0xff7c94b6),
    image: DecorationImage(
      image: ExactAssetImage('images/girl.png'),
      fit: BoxFit.cover,
    ),
    border: Border.all(
      color: Colors.red,
      width: 10.0,
    ),
  ),
);
  }
}


Tags: flutter








1 Comments
Login to comment.
Recent Comments

seven.srikanth at 5/31/2021

nice one.

Login to Reply.












© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com