How to change the textTheme in the ThemeData class?-CodePudding

I cannot change the color of the TextTheme property in the ThemeData class even though the code doesn't give any error. Here is what I have done so far:

import 'package:flutter/material.dart';

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

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        appBarTheme: AppBarTheme(
          backgroundColor: Color(0xff0a0e21),
        ),
        scaffoldBackgroundColor: Color(0xff0a0e21),
        textTheme: TextTheme(bodyText1: TextStyle(color: Colors.blue)),//the text remains white in the app.
      ),
      home: InputPage(),
    );
  }
}

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Center(
        child: Text('Body Text'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => print('object'),
      ),
    );
  }
}

What am I doing wrong?

CodePudding user response：

You have declared the themes successfully, but are not using it. Here is the replacement code snippet:

body: Center(
        child: Text('Body Text', style: Theme.of(context).textTheme.bodyText1),
      )

You need to specify the theme in style attribute for the necessary changes to take place.

CodePudding user response：

Try passing textTheme: ThemeData value here is an example for textTheme

 textTheme: ThemeData.light().textTheme.copyWith(
          headline6: TextStyle(
            fontFamily: 'OpenSans',
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),

Just match your implementation with mine, here I have implemented textTheme for titles. now if I want to refer to this headline6 theme I can do

Theme.of(context).textTheme.headline6

CodePudding user response：

As much as I know there are a-lot of different properties in TextTheme class, such as bodytext1, bodytext2, headline1, headline2, caption etc etc... And you can configure many of them to use them later, but there is no catalog or confirmation that which part of the app it will be applied to, i.e. Out of all the places that uses the text widget, to which bodytext1 will be applied to it is not known...but overtime you will get the feel for it.

But for now you have to call it manually where-ever you want to use that specific text configuration, such as in your code you have to do it like:

return Scaffold(
  appBar: AppBar(
    title: Text('BMI CALCULATOR'),
  ),
  body: Center(
    child: Text('Body Text', style: Theme.of(context).textTheme.bodyText1,),
  ),
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () => print('object'),
  ),
);

The main point of adding theme is code-reusability and making it dynamic which is obviously achieved by this too.