View video tutorial
FLUTTER Text Widget
FLUTTER
This tutorial will show how to use Text widget in Flutter.
Example
Text widget
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
scaffoldBackgroundColor: Colors.blueGrey),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Title"),
),
body: Center(
child: Text(
"This is Flutter text example.",
style: TextStyle(
fontSize: 30,
color: Colors.purple,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
letterSpacing: 8,
wordSpacing: 20,
backgroundColor: Colors.yellow,
shadows: [
Shadow(
color: Colors.blueAccent,
offset: Offset(2, 1),
blurRadius: 10)
]),
),
),
);
}
}
Output should look like this.
Example
Text widget
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, scaffoldBackgroundColor: Colors.white),
//theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Appbar Title here"),
),
body: Container(
child: Center(
child: RichText(
text: TextSpan(
text: 'Don\'t have an account?',
style: TextStyle(color: Colors.black, fontSize: 20),
children: <TextSpan>[
TextSpan(
text: ' Sign up',
style: TextStyle(color: Colors.blueAccent, fontSize: 20),
recognizer: TapGestureRecognizer()
..onTap = () {
print("Tapped");
})
]),
),
),
),
);
}
}
Output should look like this.
Example
Text widget
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, scaffoldBackgroundColor: Colors.white),
//theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Appbar Title here"),
),
body: Container(
child: Center(
child: RichText(
text: TextSpan(
text: 'Don\'t have an account?',
style: TextStyle(color: Colors.black, fontSize: 20),
children: [
TextSpan(
text: ' Sign up',
style: TextStyle(color: Colors.blueAccent, fontSize: 20),
recognizer: TapGestureRecognizer()
..onTap = () {
print("Tapped");
}),
TextSpan(text: '\n\nIcon ', style: TextStyle(fontSize: 25)),
WidgetSpan(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 2.0),
child: Icon(Icons.email, color: Colors.red),
),
),
TextSpan(text: ' email ', style: TextStyle(fontSize: 25)),
TextSpan(text: '\n\nIcon ', style: TextStyle(fontSize: 25)),
WidgetSpan(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 2.0),
child: Icon(Icons.home, color: Colors.red),
),
),
TextSpan(text: ' home ', style: TextStyle(fontSize: 25)),
],
),
),
),
),
);
}
}
Output should look like this.
Note: For all material widgets visit Flutter Material Widgets. For all widgets classes visit Flutter Widgets Classes.
For documentation: visit dart documentation. visit flutter documentation.
Try Dart and Flutter Here or Here