Flutter Text Widget

Let’s make a basic Text

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
title: "Tutorial",
home: Home(),
));


class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Text tutorial"),
),
body:Text("Hi")
);
}
}
Preview of the above code

Let’s add some basic styling

Align the text

import 'package:flutter/material.dart';

class TextAlignScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Text tutorial"),
),
body: Text(
"Hi",
textAlign: TextAlign.center,
),
);
}
}
Cannot align as there are no space
double width = MediaQuery.of(context).size.width;
Widget build(BuildContext context) {

double width = MediaQuery.of(context).size.width;

return Scaffold(
appBar: AppBar(
title: Text("Text tutorial"),
),
body: Container(
width: width,
child: Text(
"Hi",
textAlign: TextAlign.center,
),
),
);
}
Preview of the above code

Font size using textScaleFactor

Text(
"Hi",
textAlign: TextAlign.center,
textScaleFactor: 4.0,
),
Preview of the above code

Style using TextStyle class

Text(
"Hi",
style: TextStyle(
//code here
),
),

Adding text colours

Add colours using Colors class
Text(
"Hi",
textAlign: TextAlign.center,
textScaleFactor: 2.0,
style: TextStyle(
color: Colors.blue
),
),
Preview of the above code

Adding font weights

style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w300,
),
Preview of different font weights

Changing Font size

Text(
"Hi",
textAlign: TextAlign.center,
textScaleFactor: 2.0,
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
Preview of the above code

Adding space between letters and words

Text(
"Hi There",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w600,
fontSize: 40.0,
letterSpacing: 2.0,
wordSpacing: 100.0,
),
),
Preview of the above code

Adding custom fonts

fonts:
- family: Caveat
fonts:
- asset: fonts/Caveat-Regular.ttf
weight: 400
- asset: fonts/Caveat-Bold.ttf
weight: 700
Text(
"Hi There",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blue,
fontSize: 20.0,
fontFamily: "Caveat",
fontWeight: FontWeight.w700
),
Text(
"This is regular",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blue,
fontSize: 40.0,
fontFamily: "Caveat",
fontWeight: FontWeight.w400),
)

Let’s do some alignment

Horizontally add Text widgets

Row(
children: <Widget>[
// Add text widgets here
]
)
Row(
children: <Widget>[
Text(
"One",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
color: Colors.blue,
fontFamily: "Caveat",
fontWeight: FontWeight.w700),
),
Text(
"Two",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
color: Colors.blue,
fontFamily: "Caveat",
fontWeight: FontWeight.w700),
),
],
),
Preview of the above code
When text exceeds the screen size

Avoids overflow using Expanded widget

Row(
children: <Widget>[
Expanded(
child: Text(
"One",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
color: Colors.blue,
fontFamily: "Caveat",
fontWeight: FontWeight.w700),
),
),
Expanded(
child: Text(
"Two",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
color: Colors.blue,
fontFamily: "Caveat",
fontWeight: FontWeight.w700),
),
),
Expanded(
child: Text(
"This is a big paragraph",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
color: Colors.blue,
fontFamily: "Caveat",
fontWeight: FontWeight.w700),
),
),
],
),
Equally divided the screen.

Vertically add Text Widgets

Column(
children: <Widget>[
Text(
"One",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
color: Colors.blue,
fontFamily: "Caveat",
fontWeight: FontWeight.w700),
),
Text(
"Two",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
color: Colors.blue,
fontFamily: "Caveat",
fontWeight: FontWeight.w700),
),
],
Preview of the above code

Let’s change text using a button click

int _variable = 0Text("$_variable")
import 'package:flutter/material.dart';

class TextAlignScreen extends StatefulWidget {
@override
_TextAlignScreenState createState() => _TextAlignScreenState();
}

class _TextAlignScreenState extends State<TextAlignScreen> {
int _value = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Text tutorial"),
),
body: Row(
children: <Widget>[
Expanded(
child: Text(
"$_value",
textScaleFactor: 3.0,
),
),
Expanded(
child: RaisedButton(
onPressed: () {},
child: Text("Click"),
),
),
],
),
);
}
}
Preview of the above code

Adding the logic

onPressed: () {
setState(() {
_value += 1;
});
},
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
title: "Tutorial",
home: TextAlignScreen(),
));

class TextAlignScreen extends StatefulWidget {
@override
_TextAlignScreenState createState() => _TextAlignScreenState();
}

class _TextAlignScreenState extends State<TextAlignScreen> {
int _value = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Text tutorial"),
),
body: Row(
children: <Widget>[
Expanded(
child: Text(
"$_value",
textScaleFactor: 3.0,
),
),
Expanded(
child: RaisedButton(
onPressed: () {
setState(() {
_value += 1;
});
},
child: Text("Click"),
),
),
],
),
);
}
}
Preview of the above code

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yashod Perera

Yashod Perera

165 Followers

Technical Writer | Tech Enthusiast | Open source contributor