Our customer, Hello World Travel, loves blue and purple, and so we need to change the colors of our app, as well as the formatting of our text. Let's change the MyApp class code as shown here:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Hello World Travel Title",
        home: Scaffold(
            appBar: AppBar(
              title: Text("Hello World Travel App"),
              backgroundColor: Colors.deepPurple,),
            body: Center(
              child: Text(
                'Hello World Travel',
                style: TextStyle(
                    fontSize: 26,
                    fontWeight: FontWeight.bold,
                    color: Colors.blue[800]),)
        )));
  }
}

We've added a couple of features to the app. First, we added a background color for the AppBar as shown here:

backgroundColor: Colors.deepPurple,

The Colors class contains several colors that we can use out of the box, including deepPurple, which we used there. In the color, you can also choose a shade, which is generally a number from 100 to 900, in increments of 100, plus the color 50. The higher the number, the darker the color. For example, for the text, we chose a color of blue[800], which is rather dark:

style: TextStyle(   fontSize: 26,
                    fontWeight: FontWeight.bold,
                    color: Colors.blue[800]),)

In the Text widget, we used the style property to add a TextStyle class, and there we chose a bigger fontSize, a bold fontweight, and of course, color.

Our app is definitely getting better, but we aren't finished yet. We now need to add a second piece of text below the first one. The problem right now is that the Center widget only takes one child, so we cannot add a second Text widget there. The solution is choosing a container widget that allows more than one child, and as we want to place our widgets on the screen, one below the other, we can use a Column container widget. A Column has the children property, instead of child, which takes an array of widgets. So let's change the body of the Scaffold widget, like this:

body: Center(
    child: Column(children: [
  Text(
    'Hello World Travel',
    style: TextStyle(
        fontSize: 26,
        fontWeight: FontWeight.bold,
        color: Colors.blue[800]),
  ),
  Text(
    'Discover the World',
    style: TextStyle(
        fontSize: 20,
        color: Colors.deepPurpleAccent),
  )
]))

Now, the Center widget still contains a single child, but its child is a Column widget that now contains two Text widgets, 'Hello World Travel' and 'Discover the World.'