Flutter Text widget

18-Sep-2024

A guide on using the Text widget to display and style text in your Flutter apps

Text widgets are used to display a single line of text.
This is a simple but essential widget for rendering text in your application.
Here's an overview of how to use the text widget:


Text(
"Micro Tutorial",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.red
),
)


TextView Example :



import 'package:flutter/material.dart';

void main() {
runApp(
MaterialApp(
home: Scaffold(
body: MyApp(),
),
)
);
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
Center(
child: Container(
width: 500,
height: 100,
alignment: Alignment.center,
margin: EdgeInsets.all(20),
child:
Column(
children: [
Text(
"Micro Tutorial",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.red
),
),

Text(
"In publishing and graphic design, Lorem ipsum is a placeholder"
" text commonly used to demonstrate the visual form of "
"a document or a typeface without relying on meaningful"
" content. Lorem ipsum may be ",
maxLines: 2,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.red
),
),
],
)

),
);
}
}


Text widgets are often used with other widgets, such as containers, columns, and rows, or in combination with other Flutter widgets to create more complex UI structures.

Open Device Manager, run the emulator, and  then run the application. Next, check the working output and check the output  you declared in your code.


Output:


Comments