Flutter app, Theme.of(context) style doesn't work on text

Question

Trying to apply a text color to my header tiles in my list view. I define a headline text style with red text color (yes I have also tried this with Colors.red).

When I create the tile, I use the function _headerTile. Trying to load the style via Theme.of(context).textTheme.headline. However the text does not use ANY of the three properties I have defined in headline when I do this.

Is there something I'm doing wrong?

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'App',
        home: Scaffold(
            appBar: AppBar(
                title: const Text(
              'App',
            )),
            body: _buildList(context)),
        theme: ThemeData(
          textTheme: TextTheme(
            headline: TextStyle(
                color: Color.fromRGBO(255, 0, 0, 1),
                fontSize: 72.0,
                fontWeight: FontWeight.bold),
          ),
        ));
  }
}

Widget _buildList(BuildContext context) => ListView(
      children: [
        _headerTile(context, "About Us")
      ],
    );

ListTile _headerTile(BuildContext context, String title) => ListTile(
      title: Text(title,
          style: Theme.of(context)
              .textTheme
              .headline
      contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 8),
    );

Answer 1

It's because you are calling Theme.of(context) using the same context that is passed to MyApp 's build function. This means that the ThemeData returned by it will not be the one you have defined for the MaterialApp .

When you get a widget's state by calling WidgetName.of(context) , you basically use that context to look upwards through the widget hierarchy (all the parents of the widget to which that context belongs) until a widget state of that specific type is found. The context you are using belongs to the MyApp widget, which is the parent of the MaterialApp widget.

Try using routes or onGenerateRoute instead of home - this will give you a context to build your routes that sits below the MaterialApp widget, so that when you call Theme.of(context) it will return the expected ThemeData .

Answer 2

Ovidiu was right about it using the wrong context. So instead I turned my buildList function into its own StatelessWidget

class List extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        _headerTile(context, "About Us")
      ],
    );
  }
}

Answer 3

Your text doesn't use any of the these three properties because 
 .textTheme.headline is predefined in text_theme.dart . When you define
 .textTheme.headline , it styles it according to predefined style
 described in text_theme file. You can see the changes by using 
.textTheme.display1 or .textTheme.display2 . If you want your custom style 
you can do it this way :

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'App',
        home: Scaffold(
            appBar: AppBar(
                title: const Text(
                  'App',
                )),
            body: Text("MyApp",style: heading,),
       )
    );
  }
}



final heading =  TextStyle(fontSize: 60.0,
    fontWeight: FontWeight.bold,
    color:Colors.green
);

Answer 4

Remove MaterialApp that exists after your build. Then it won't overwrite your customization.