App's global ThemeData not working properly in flutter?

Question

I want to use ThemeData's textTheme for global using in my app , And the textTheme is only change the font and color.

But As you can see in the picture , there will be a obvious difference between the Text Widgets. How is this difference come ? because the above label's TextStyle is actually the same as the bottom label. Did the the ThemeData will do something more to change my TextStyle?

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          textTheme: TextTheme(
            headline1: TextStyle(fontSize: 17, color: Color(0xFFFF0000)),
          )),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
              style: Theme.of(context).textTheme.headline1,
            ),
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(fontSize: 17, color: Color(0xFFFF0000)),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

The reason both texts look different is that you have not specified their fontWeight and flutter unfortunately gives both texts different default fontWeights. You only need to specify the same fontWeight for both and it will work. I tried it. This is the code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          textTheme: TextTheme(
            headline1: TextStyle(fontSize: 17, color: Color(0xFFFF0000),
                fontWeight: FontWeight.normal),
          )),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
              style: Theme.of(context).textTheme.headline1,
            ),
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(fontSize: 17, color: Color(0xFFFF0000),
                  fontWeight: FontWeight.normal),
            ),
          ],
        ),
      ),
    );
  }
}