Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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 using Padding() widget:

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"),
),

Apply Padding and Margin using Container Widget:

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.

Full Code Example:

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"),
                        ),
               ]
             )
          )
      );
  }
}

Output Screenshot:

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

No any Comments on this Article


Please Wait...