Skip to main content

Flutter Add Padding on Text Inside Container

The Container widget has a property padding to apply padding on Container child. It support various type of padding formats using EdgeInsets function. But the most common is EdgeInsets.fromLTRB(left, top, right, bottom). Here LTRB means Left, Top, Right and Bottom.

Flutter Add Padding on Text Inside Container:

1. Defining Container widget with padding property.
Padding function syntax:
EdgeInsets.fromLTRB(left, top, right, bottom)
Container(
        padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
        width: double.infinity,
        height: 200,
        color: Colors.brown,
        child: const Text(
          'Padding on Text in Container',
          style: TextStyle(fontSize: 28, color: Colors.white),
          textAlign: TextAlign.center,
        ),
      )
Source code for main.dart file:
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
      child: Container(
        padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
        width: double.infinity,
        height: 200,
        color: Colors.brown,
        child: const Text(
          'Padding on Text in Container',
          style: TextStyle(fontSize: 34, color: Colors.white),
          textAlign: TextAlign.center,
        ),
      ),
    )));
  }
}
Screenshot:
Flutter Add Padding on Text Inside Container

Comments