How to set text color theme for entire app in flutter

Question

I used ThemeData() in the following manner:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterrequirements/ModelClasses/note.dart';

class CreateNewNote extends StatefulWidget {
  @override
  _CreateNewNoteState createState() => _CreateNewNoteState();
}

class _CreateNewNoteState extends State<CreateNewNote> {
  bool isStoringInDatabase = false;
  //var obj = Note.nothing();
  var _formKey = GlobalKey<FormState>();

  saveLocally() async {
    //storing data in sqflite
  }

  String titleNote;
  String descriptionNote;

  //var appTheme=//
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
            scaffoldBackgroundColor: Colors.white,
            appBarTheme: AppBarTheme(
              color: Color.fromRGBO(90, 50, 142, 1),
              textTheme: TextTheme(
                //rgb(136,252,254)
                title: TextStyle(
                    color: Color.fromRGBO(136, 252, 254, 1),
                    fontSize: 20,
                    fontStyle: FontStyle.italic),
              ),
            ),
            primaryTextTheme: TextTheme(
              title: TextStyle(),
              button: TextStyle(),
            ).apply(
              bodyColor: Color.fromRGBO(136, 252, 254, 1),
              displayColor: Color.fromRGBO(136, 252, 254, 1),
            )),
        home: Scaffold(
            appBar: AppBar(
              title: Text(
                "MemoNotes",
              ),
            ),
            body: Form(
                    key: _formKey,
                    child: Container(
                        margin: EdgeInsets.fromLTRB(5, 20, 30, 60),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Flexible(
                              child: FractionallySizedBox(
                                heightFactor: 0.3,
                              ),
                            ),

                            Text("Title:"),
                            TextFormField(
                              decoration: InputDecoration(
                                  border: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(30),
                                      borderSide: BorderSide(
                                          color: Colors.purpleAccent)),
                                  prefixIcon: Icon(Icons.text_fields),
                                  hintText: "Enter the title",
                                  prefixText:
                                      "  " //to show gap between icon and title
                                  ),
                              validator: (_) => null,
                              onSaved: (val) => titleNote = val,
                            ),

                            Flexible(
                              child: FractionallySizedBox(
                                heightFactor: 0.3,
                              ),
                            ),
                            Text("Description:"),
                            TextFormField(
                              decoration: InputDecoration(
                                  border: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(30),
                                      borderSide: BorderSide(
                                          color: Colors.purpleAccent)),
                                  prefixIcon: Icon(Icons.description),
                                  hintText: "Enter the description",
                                  prefixText: "  "),
                              validator: (_) => null,
                              onSaved: (val) => descriptionNote = val,
                            ),

                            Builder(
                              builder: (context) {
                                return RaisedButton(
                                    child: Text("SAVE THIS NOTE"),
                                    color: Colors.greenAccent,
                                    onPressed: () {
                                      saveLocally();
                                      setState(() {
                                        isStoringInDatabase = true;
                                      });
                                    });
                              },
                            ),
                          ],
                        )),
                  )
        )
    );
  }
}

I also tried How to change text color for Theme? but it didnt work for me.

My color and textTheme does work for the appBar but the primaryTextTheme that I used didnt work for the remaining app.

screenshot of my output

How do i make the texts "Title" and "Description" have the colors i specified in the theme?

Solution 1

You can set textTheme property in the Material app. This will work for entire app

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(),
      bodyText2: TextStyle(),
    ).apply(
      bodyColor: Colors.orange, 
      displayColor: Colors.blue, 
    ),
  ),
) 

Solution 2

You can set Theme in main.dart class, where you can set Them for Text, Appbar, Button vice versa

MaterialApp(
  theme: _buildTheme(),

)  



 ThemeData _buildTheme() {
      final ThemeData base = ThemeData.light();
      return base.copyWith(
        primaryColor: PRIMARY_COLOR,
        accentColor: ACCENT_COLOR,
        backgroundColor: BACKGROUND_COLOR,
        appBarTheme: _appBarTheme(base.appBarTheme),
        textTheme: _textTheme(base.textTheme),
        buttonTheme: base.buttonTheme.copyWith(
          buttonColor: PRIMARY_COLOR,
        ),
      );
    }

    AppBarTheme _appBarTheme(AppBarTheme base) =>
        base.copyWith(color: BACKGROUND_COLOR,
            brightness: Brightness.light,
            textTheme: TextTheme(title: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 18.0,
                fontFamily: 'Montserrat',
                color: ACCENT_COLOR)),
            iconTheme: IconThemeData(color: ACCENT_COLOR));


    TextTheme _textTheme(TextTheme base) {
      return base.copyWith(
        headline1: base.headline1.copyWith(
            fontWeight: FontWeight.w500,
            fontFamily: 'Montserrat',
            color: ACCENT_COLOR),

        subtitle1: base.subtitle1.copyWith(
            fontSize: TITLE_FONT_SIZE,
        //    fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat',
            color: ACCENT_COLOR),

        caption: base.caption.copyWith(
            fontWeight: FontWeight.w400,
            fontFamily: 'Montserrat',
          //  fontSize: TEXT_FONT_SIZE,
            color: ACCENT_COLOR),

        bodyText1: base.bodyText1.copyWith(
            fontWeight: FontWeight.w400,
            fontFamily: 'Montserrat',
         //   fontSize: TEXT_FONT_SIZE,
            color: ACCENT_COLOR),

        bodyText2: base.bodyText2.copyWith(
            fontWeight: FontWeight.w500,
            fontFamily: 'Montserrat',
          //  fontSize: TEXT_LARGE_FONT_SIZE,
            color: ACCENT_COLOR),

        button: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w500,
            fontFamily: 'Montserrat',
            fontSize: BUTTON_TEXT_LARGE_FONT_SIZE),
      );
    }

Comments

[jash gandhi]

Short and simple! But can u tell me what difference there is between bodyText1/bodyText2 and bodyColor/displayColor? Because apparently all my text widgets used styling of bodyText1 and bodyColor

[EngineSense]

Appbar theme texttheme has no effect at all. It doesnt change the text or style.!

[Javeed Ishaq]

kindly check this on dartpad dartpad.dev/flutter?e297a8d711665de377e491608b5e6277