Padding is used to set space between Text content and defined text content area. Its like a margin type but only applied on Text to set space between border defined area. There are two ways to set Padding in flutter first is using the Padding Widget and second is Wrap the Text widget in container widget and apply the padding on Container widget. We would discuss the both example in our current tutorial. So in this tutorial we would Add Padding to Text Widget Text in Flutter Android iOS Example Tutorial.
Contents in this project Add Padding to Text Widget Text in Flutter Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp class with it.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main root view class named as MyApp extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Column widget in Scaffold widget build area.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Disable Screen Rotation in Flutter App"), ), body: Column( children: <Widget>[ ] ) ) ); } } |
5. Creating a Container widget in Column widget and make a child Text widget in Container widget. Here we would use the padding property with EdgeInsets.fromLTRB() property. Here LTBR means left, right, top and bottom.
|
1 2 3 4 |
Center(child:Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 20), child: Text('Padding Via Container Widget', style: TextStyle(fontSize: 22)))), |
6. Creating Padding widget and make a Text widget as child in Padding widget. Here we are using the padding property with EdgeInsets.fromLTRB() parameter.
|
1 2 3 4 |
Padding( padding: EdgeInsets.fromLTRB(20, 20, 20, 20), child: Text('Padding Via Padding Widget', style: TextStyle(fontSize: 22))), |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Add Padding to Text Widget in Flutter"), ), body: Column( children: <Widget>[ Center(child:Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 20), child: Text('Padding Via Container Widget', style: TextStyle(fontSize: 22)))), Padding( padding: EdgeInsets.fromLTRB(20, 20, 20, 20), child: Text('Padding Via Padding Widget', style: TextStyle(fontSize: 22))), ] ) ) ); } } |
Screenshot:
