如何在 flutter 中为整个应用程序设置文本颜色主题

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 不适用于其余应用程序。

screenshot of my output

如何使文本 "Title" 和 "Description" 具有我在主题中指定的颜色？

Answer 1

您可以在 Material 应用程序中设置文本主题属性。这将适用于整个应用程序

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

Answer 2

您可以在 main.dart class 中设置 Theme，您可以在其中为 Text、Appbar、Button 设置 Theme，反之亦然

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 3

Example in DartPad

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
const Color PRIMARY_COLOR = Colors.indigo;
const Color ACCENT_COLOR = Colors.indigoAccent;
const Color BACKGROUND_COLOR = Colors.grey;


   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(
          headline1: 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: 20,
          //    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: 16),
    );
  }


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _buildTheme(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline1);
  }
}

如何在 flutter 中为整个应用程序设置文本颜色主题

How to set text color theme for entire app in flutter

themes

dart

flutter

Example in DartPad