如何在颤动中为整个应用程序设置文本颜色主题
Posted
技术标签:
【中文标题】如何在颤动中为整个应用程序设置文本颜色主题【英文标题】：How to set text color theme for entire app in flutter 【发布时间】：2020-10-06 23:25:42 【问题描述】：我使用 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;
);
);
,
),
],
)),
)
)
);
我也试过How to change text color for Theme?，但对我没用。
我的颜色和 textTheme 确实适用于 appBar，但我使用的 primaryTextTheme 不适用于其余应用。
screenshot of my output
如何使文本“标题”和“描述”具有我在主题中指定的颜色？
【问题讨论】：
【参考方案1】：您可以在 Material 应用中设置 textTheme 属性。这将适用于整个应用程序
MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
bodyText1: TextStyle(),
bodyText2: TextStyle(),
).apply(
bodyColor: Colors.orange,
displayColor: Colors.blue,
),
),
)
【讨论】：
简短而简单！但是你能告诉我bodyText1/bodyText2和bodyColor/displayColor有什么区别吗？因为显然我所有的文本小部件都使用了 bodyText1 和 bodyColor 的样式【参考方案2】：您可以在 main.dart 类中设置 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),
);
【讨论】：
【参考方案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);
【讨论】：
Appbar 主题 texttheme 完全没有效果。它不会改变文本或样式。！ 请在 dartpad 上查看 dartpad.dev/flutter?e297a8d711665de377e491608b5e6277以上是关于如何在颤动中为整个应用程序设置文本颜色主题的主要内容，如果未能解决你的问题，请参考以下文章