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.
Please Wait...
No any Comments on this Article