How to Add Padding/Margin on Text Widget in Flutter

In this example, you will learn different ways to add padding and margin on the Text widget in Flutter. We will use, Padding() and Container() widget to wrap Text() widget and apply padding and margin. Furthermore, you will learn about EdgeInsets method.

Apply padding to all sides:

Padding(
  padding: EdgeInsets.all(15), //apply padding to all four sides
  child: Text("Hello World, Text 1"),
),

Apply padding to specific side only:

Padding(
  padding: EdgeInsets.only(left:15, bottom: 20, right: 20, top:10), //apply padding to some sides only
  child: Text("Hello World, Text 2"),
),

Apply padding horizontally or vertically:

Padding(
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20), //apply padding horizontal or vertical only
  child: Text("Hello World, Text 3"),
),

Apply padding by Left, Top, Right, Bottom:

Padding(
  padding: EdgeInsets.fromLTRB(10, 10, 20, 20), //apply padding to LTRB, L:Left, T:Top, R:Right, B:Bottom
  child: Text("Hello World, Text 3"),
),

Container( //apply margin and padding using Container Widget.
  padding: EdgeInsets.all(20), //You can use EdgeInsets like above
  margin: EdgeInsets.all(5),
  child: Text("Hello World, Text 4"),
),

You can use EdgeInsets like shown above in the Container widget.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Padding/Margin on Text Widget"),
              backgroundColor: Colors.deepOrangeAccent
          ),
          body: Container(
            alignment:Alignment.topCenter,
            padding: EdgeInsets.all(15),
             child: Column(
               children:[
                        Padding(
                          padding: EdgeInsets.all(15), //apply padding to all four sides
                          child: Text("Hello World, Text 1"),
                        ),

                        Padding(
                          padding: EdgeInsets.only(left:15, bottom: 20, right: 20, top:10), //apply padding to some sides only
                          child: Text("Hello World, Text 2"),
                        ),

                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20), //apply padding horizontal or vertical only
                          child: Text("Hello World, Text 3"),
                        ),

                        Padding(
                          padding: EdgeInsets.fromLTRB(10, 10, 20, 20), //apply padding to LTRB, L:Left, T:Top, R:Right, B:Bottom
                          child: Text("Hello World, Text 3"),
                        ),

                        Container( //apply margin and padding using Container Widget.
                          padding: EdgeInsets.all(20), //You can use EdgeInsets like above
                          margin: EdgeInsets.all(5),
                          child: Text("Hello World, Text 4"),
                        ),
               ]
             )
          )
      );
  }
}

In this way, you can add padding and margin on Text Widget in Flutter apps.

No any Comments on this Article


Please Wait...