Flutter-如何根据按钮位于应用程序栏还是主屏幕来为“平面按钮"设置不同颜色的文本样式 [英] Flutter - How to style different color text for Flat Buttons depending on whether button is in appbar or main screen
问题描述
在我的styles.dart中，我有以下主题:
In my styles.dart I have the following theme:
final ThemeData purpleTheme = ThemeData(
brightness: Brightness.light,
primaryColor: PURPLE,
buttonColor: GREEN,
fontFamily: FontNameDefault,
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme
.primary, // TODO: This is making the flat buttons all appear in blue instead of purple
buttonColor: GREEN,
height: 45),
appBarTheme: AppBarTheme(
textTheme: TextTheme(title: AppBarTextStyle, button: AppBarTextStyle),
iconTheme: new IconThemeData(color: Colors.white),
brightness: Brightness.dark,
color: PURPLE,
),
textTheme: TextTheme(
title: TitleTextStyle,
body1: Body1TextStyle,
subtitle: SubtitleTextStyle));
通过上述主题设置，buttonTheme textTheme是ButtonTextTheme.primary.尽管由于某种原因我现在使用蓝色，但由于某种原因，原色似乎是蓝色的.当我添加
With the above theme setting, The buttonTheme textTheme is ButtonTextTheme.primary. The primary color seems to be blue for some reason, even though nowhewere in my styling do I use blue. When I add
colorScheme: ColorScheme.light().copyWith(primary: PURPLE)
对于样式，原色变为紫色.但是，我希望紫色appbar中的平面按钮使用白色文本，而白色屏幕中的平面按钮使用紫色文本.如何将其编码到ThemeData中?
To the style, the primary color becomes purple. However, I would like the flat buttons in the purple appbar to use white text, and flat buttons in the white screen to use purple text. How can I get that coded into the ThemeData?
推荐答案
在Material主题规范中已经很好地定义了您的用例.
The use case you have is already well defined in the Material theme spec.
在这里，我将解释如何根据父窗口小部件的颜色设置任何窗口小部件的颜色样式(例如:按钮/文本/customWidget ..).
Here I am going to explain how to style color of any widget (eg: button/ text/ customWidget..) depending on the parent widget color.
用例示例:
- 白色appBar上的主要彩色文本 主色appBar上的
- 白色文本
- 白色表面上的黑色文本
- 白色表面上的原色文本
- primary colored text on white colored appBar
- white colored text on primary colored appBar
- black color text on white color surface
- primary color text on white color surface
您在这里.
首先， 定义一个原色色板，该色板定义了从50到900的所有变体.
First of all, Define a primary color swatch that define all the variants from 50 to 900.
final MaterialColor lightPrimaryColorSwatch = MaterialColor(
0xff4f9af0,
{
50: Color(0xffeaf3fd),
100: Color(0xffcae1fb),
200: Color(0xffa7cdf8),
300: Color(0xff84b8f5),
400: Color(0xff69a9f2),
500: Color(0xff4f9af0),
600: Color(0xff4892ee),
700: Color(0xff3f88ec),
800: Color(0xff367ee9),
900: Color(0xff266ce5),
},
);
步骤2:
您需要定义一个ColorScheme对象，该对象定义材料规格的所有12种颜色.
Step 2:
You need to define a ColorScheme object that define all the 12 colors of material spec.
final ColorScheme lightColorScheme = ColorScheme(
brightness: Brightness.light,
primary: Color(0xff4f9af0),
primaryVariant: Color(0xff2c86ed),
secondary: Color(0xff0863c4),
secondaryVariant: Color(0xff259b24),
error: Color(0xffb00020),
background: Color(0xfff7f8fa),
onError: Colors.white,
onSecondary: Colors.white,
onBackground: Color(0xff292929),
onPrimary: Colors.white,
onSurface: Color(0xff292929),
surface: Colors.white,
);
步骤3:
使用上述定义的值为您的MaterialApp定义主题数据.
Step 3:
Define theme data for your MaterialApp using the above defined values.
return MaterialApp(
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: lightPrimaryColorSwatch,
primaryColor: lightColorScheme.primary,
primaryColorDark: lightColorScheme.primaryVariant,
errorColor: lightColorScheme.error,
colorScheme: lightColorScheme,
primaryColorBrightness: Brightness.dark,
accentColorBrightness: Brightness.dark,
accentColor: lightColorScheme.secondary,
primaryColorLight: lightColorScheme.secondaryVariant,
backgroundColor: lightColorScheme.background,
canvasColor: lightColorScheme.background,
),
//... other attributes go here
);
现在您已经准备就绪.从现在开始，您可以将这12种颜色用于所需的任意组合.
这里是一个例子.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final MaterialColor lightPrimaryColorSwatch = MaterialColor(
0xff4f9af0,
{
50: Color(0xffeaf3fd),
100: Color(0xffcae1fb),
200: Color(0xffa7cdf8),
300: Color(0xff84b8f5),
400: Color(0xff69a9f2),
500: Color(0xff4f9af0),
600: Color(0xff4892ee),
700: Color(0xff3f88ec),
800: Color(0xff367ee9),
900: Color(0xff266ce5),
},
);
final ColorScheme lightColorScheme = ColorScheme(
brightness: Brightness.light,
primary: Color(0xff4f9af0),
primaryVariant: Color(0xff2c86ed),
secondary: Color(0xff0863c4),
secondaryVariant: Color(0xff259b24),
error: Color(0xffb00020),
background: Color(0xfff7f8fa),
onError: Colors.white,
onSecondary: Colors.white,
onBackground: Color(0xff292929),
onPrimary: Colors.white,
onSurface: Color(0xff292929),
surface: Colors.white,
);
return MaterialApp(
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: lightPrimaryColorSwatch,
primaryColor: lightColorScheme.primary,
primaryColorDark: lightColorScheme.primaryVariant,
errorColor: lightColorScheme.error,
colorScheme: lightColorScheme,
primaryColorBrightness: Brightness.dark,
accentColorBrightness: Brightness.dark,
accentColor: lightColorScheme.secondary,
primaryColorLight: lightColorScheme.secondaryVariant,
backgroundColor: lightColorScheme.background,
canvasColor: lightColorScheme.background,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
SizedBox(height: 8.0),
///white color text on container with primary color
Container(
color: Theme.of(context).colorScheme.primary,
height: 40.0,
width: 100.0,
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('Hello, World!',
style: Theme.of(context).textTheme.bodyText2.copyWith(
color: Theme.of(context).colorScheme.onPrimary)),
)),
SizedBox(height: 8.0),
///Primary color text on white color container.
Container(
color: Theme.of(context).colorScheme.surface,
height: 40.0,
width: 100.0,
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('Hello, World!',
style: Theme.of(context)
.textTheme
.bodyText2
.copyWith(color: Theme.of(context).colorScheme.primary)),
)),
],
);
}
}
您可以在此处找到现场演示.
You can find a live demo here.
这篇关于Flutter-如何根据按钮位于应用程序栏还是主屏幕来为“平面按钮"设置不同颜色的文本样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
