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)
              ]),
        ),
      ),
    );
  }
}

flutter scaffold

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");
                        })
                ]),
          ),
        ),
      ),
    );
  }
}

flutter scaffold

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)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

flutter scaffold

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