Simple Text Widget

This “Simple Text Widget” is embedded in the MyApp widget, that in turns creates a MyHomePage widget.  It is not even called with a widget keyword but lives within the Scaffold widget, then the body widget and then finally  the center widget.  I have includes an image of this part of the “widget tree” at the very bottom of this page so you can get a feel for the visible and hidden widgets at work.

The following code is the complete text you need to replace the default code in a new Flutter project in your Android Studio main.dart window.  When run it will place a basic Flutter App on your connected Android Smartphone, as shown in the screen capture below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Text Widget',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Text Widget')),
      body: Center(
        child: Text(       // WB: TINY "Simple Text Widget" WIDGET STARTS HERE
          'Simple Text',
        ),                 // WB: TINY "Simple Text Widget" WIDGET ENDS HERE
      ),
    );
  }
}


 

Now modify a few items to change the appearance.  Note the fontSize: needs to be double, not 60 but 60.0!

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Text Widget',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Text Widget')),
      backgroundColor: Colors.amber,  // WB: ADD THIS LINE
      body: Center(
        child: Text(   
          'Simple Text',
          style: new TextStyle(  // WB: ADD FROM HERE
            color: Colors.blue,
            fontSize: 60.0,
            decoration: TextDecoration.underline,
            decorationColor: Colors.red,
            decorationStyle: TextDecorationStyle.dashed,
          ),  // WB: TO HERE
        ),
      ),
    );
  }
}

And you get this:

For many more options see: https://docs.flutter.io/flutter/painting/TextStyle-class.html

For ref, part of the widget tree: