Как установить цветовую тему текста для всего приложения во флаттере

Question

Я использовал ThemeData () следующим образом:

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;
                                      });
                                    });
                              },
                            ),
                          ],
                        )),
                  )
        )
    );
  }
}

Я также пробовал Как изменить цвет текста для темы? но у меня это не сработало.

Мой цвет и textTheme работают для appBar, но primaryTextTheme, который я использовал, не работал для оставшегося приложения.

снимок экрана моего вывода

Как сделать тексты "Заголовок" и "Описание" имеют цвета, указанные в теме?

Answer 1

Вы можете установить тему в классе main.dart, где вы можете установить их для текста, панели приложений, кнопки и наоборот

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),
      );
    }

Answer 2

Вы можете установить свойство textTheme в приложении Material. Это будет работать для всего приложения

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