Google Flutter - Text Widget

Google Flutter Text Widget -

Google Flutter - Text Widget


This widget is probably used more than any other.

The Text widget displays a string of text with single style. Multiple line texts are allowed. To style the entire text in one way, specify a ‘style’ property in the constructor of the Text Widget.

  • To style sections of the text, use child TextSpans (see example below).
  • The Text widget only takes up as much space as it needs.
    • If you add a Text widget, align it to centered then view it, it may not show the text as centered because the Text widget hasn’t taken up all the available horizontal space.
      • To fix this, wrap the text in a Container Widget with the width set to double.infinity.


Every time you hit the ‘+’ a new word comes out in a different color.

Click here to view image.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Styled Text Demo',
      theme: new ThemeData(
      home: new MyHomePage(),

class TextBlock {
  final Color _color;
  final String _text;

  TextBlock(this._color, this._text);

  String get text => _text;

  Color get color => _color;

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  _MyHomePageState createState() => new _MyHomePageState();

class _MyHomePageState extends State {
  int _index = 0;
  final List textBlocks = [
    TextBlock(, 'every'),
    TextBlock(Colors.redAccent, ' schoolboy'),
    TextBlock(, '\nknows'),
    TextBlock(Colors.greenAccent, ' who'),
    TextBlock(, '\nimprisoned'),
    TextBlock(Colors.blueAccent, '\nMontezuma')

  void _incrementCounter() {
    setState(() {
      if (_index < textBlocks.length) {

  Widget build(BuildContext context) {
    final List textSpans = List();
    for (var i = 0; i < _index; i++) {
      TextBlock textBlock = textBlocks[i];
          text: textBlock.text,
          style: TextStyle(color: textBlock.color, fontSize: 32.0)));
    return new Scaffold(
      body: new Center(
        child: new Column(
          children: [ textSpans))],
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.note_add),
      ), // This trailing comma makes auto-formatting nicer for build methods.