Flutter Container – Padding

Flutter Container Padding

To set specific padding for Container widget in Flutter, set padding property of the Container with the required EdgeInsets value.

Syntax

Container (
  padding: EdgeInsets.all(50),
),

Example

Flutter Application with two Container widgets.

The padding for the outer Container widget is set to 50. Inner Container widget is only for demonstrating the padding of outer Container widget, and is not mandatory in an actual application.

Padding is included within the width/height of the Container widget.

main.dart

import 'package:flutter/material.dart';

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

/// main application widget
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Application';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

/// stateful widget that the main application instantiates
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// private State class that goes with MyStatefulWidget
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: const EdgeInsets.all(50),
        width: 200,
        height: 200,
        color: Colors.lightGreen,
        child: Container(
          color: Colors.blue,
        ),
      ),
    );
  }
}

Screenshot

Let us now change the padding to EdgeInsets.all(50), and observe the output.