In Flutter we have seen most of time TextAlign property of Text widget dose not works because some of developers don’t know its working environment. TextAlign property works inside Container widget which has increase width and height so the Text widget can move in all directions according to given alignment. So in this tutorial we would learn about Flutter TextAlign Property Explained Example Tutorial – How It Works in iOS and Android devices.
Contents in this project Flutter TextAlign Property Explained Example Tutorial – How It Works in iOS & Android Devices:
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 here we would call our main MyApp widget class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp class extends with StatelessWidget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area in MyApp class. Now we would make Scaffold widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text(' TextAlign Example in Flutter ')), body: ) ); } } |
5. Creating Container widget and then we would make Text widget as Child of Container widget. We are using textAlign property on Text widget here to set alignment of Text widget.
- TextAlign.center : Align the Text widget text in Container widget if Free space is available on screen.
- TextAlign.end : Align the Text Widget on the trailing edge of the Container widget.
- TextAlign.justify : Stretch lines of text that end with a soft line break and manage all the Text.
- TextAlign.left : Align the Text widget on the Left side of Container widget.
- TextAlign.right : Align the Text widget on Right side of Container widget.
- TextAlign.start : Align the Text widget on the Leading Edge of Container widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Container( height: 200, width: 400, decoration: BoxDecoration( border: Border.all( color: Colors.black, width: 2, )), child :Text('TextAlign Sample Text ', style: TextStyle(fontSize: 22), textAlign: TextAlign.left) ) |
6. 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 |
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(' TextAlign Example in Flutter ')), body: Container( height: 200, width: 400, decoration: BoxDecoration( border: Border.all( color: Colors.black, width: 2, )), child :Text('TextAlign Sample Text ', style: TextStyle(fontSize: 22), textAlign: TextAlign.left) ) ) ); } } |
Screenshot:
Great post.