Flutter – Padding around Image

Apply Padding around Image in Flutter

In this tutorial, we will learn how to apply padding around an Image.

You can apply padding for an image, by wrapping the Image widget in a Padding widget.

Sample Code Snippet

Following is a quick sample code snippet you can use for padding around an Image in Flutter.

Padding(
  padding: EdgeInsets.all(30),
  child: Image.network('https://googleflutter.com/sample_image.jpg'),
)

Example

This is an example Flutter application where we display an image with padding applied to it.

To recreate this example, create a basic Flutter application and replace main.dart with the following code.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial - googleflutter.com'),
      ),
      body: Center(
          child: Column(children: <Widget>[
            Text('Welcome to Flutter Tutorial on Image'),
            Padding(
              padding: EdgeInsets.all(30),
              child: Image.network('https://googleflutter.com/sample_image.jpg'),
            )
          ])),
    );
  }
}

When you run this Flutter Application, you may observe an image displayed with padding around it, as shown in the below screenshot.

Summary

In this Flutter Tutorial, we learned how to provide padding to an Image widget.