在 Flutter 中通用将颜色设置为 App 中的 Text Widget，而无需每次都提及 Widget 内部的主题

Posted 2023-02-23

【中文标题】在 Flutter 中通用将颜色设置为 App 中的 Text Widget，而无需每次都提及 Widget 内部的主题

【英文标题】：Set Color to Text Widget in App universally in flutter without mentioning the theme inside the Widget everytime

【发布时间】：2020-06-10 06:50:20

【问题描述】：

我是新来的颤振和尝试的东西。

我用 Center Widget 替换了 Scaffold Widget（只是胡闹）。所有文字都有一个黄色下划线，为了解决这个问题，我使用了TextDecoration

Text(
    friend.name,
    style: TextStyle(
        decoration: TextDecoration.none
    ),
));

但这是所有 Text 小部件所必需的，因此我尝试通过在根 MaterialApp 中设置主题数据来为所有 Text 小部件通用设置它。

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp( 
      title: 'Friends List',
      theme: ThemeData(
        primaryColor: Colors.black,
        primarySwatch: Colors.teal,
        primaryTextTheme: TextTheme(
          headline1: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline2: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline3: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline4: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline5: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline6: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         bodyText1: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         bodyText2: TextStyle(color: Colors.green, decoration: TextDecoration.none),
        ),
        textTheme: TextTheme(
         headline1: TextStyle(decoration: TextDecoration.none),
         headline2: TextStyle(decoration: TextDecoration.none),
         headline3: TextStyle(decoration: TextDecoration.none),
         headline4: TextStyle(decoration: TextDecoration.none),
         headline5: TextStyle(decoration: TextDecoration.none),
         headline6: TextStyle(decoration: TextDecoration.none),
         bodyText1: TextStyle(decoration: TextDecoration.none),
         bodyText2: TextStyle(decoration: TextDecoration.none)
        ),
        ),
      home: MyHomePage(title: 'Friends list'),
    );
  

但 Text 小部件仍然是下划线。我正在尝试的类似于在 css 中为标签设置样式，而不必每次都设置。

p

    universal style here

我做错了吗？颤振中是否有类似的支持。如有不妥请指正

【问题讨论】：

也许这会对你的情况有所帮助：***.com/q/47114639/4934409

你为什么不创建自己的 Text 类，我想它更容易

是的，这样会更容易。但我只是好奇flutter中是否存在这样的功能

那里的答案解决了我的问题@Scriptim，但我想要为每个文本小部件全局设置样式，而不必更改每个小部件。

【参考方案1】：

不要将静态常量用于全局样式。使用 InheritedWidgets 以颤动的方式进行操作。这样，如果需要，您可以轻松地覆盖树的特定分支的默认样式。

那么，使用什么来全局设置文本小部件的样式？

您需要为 ThemeData 定义 TextTheme 以全局设置 Text 小部件的样式。此外，用户可以使用DefaultTextStyle 小部件为小部件树的一部分设置主题。

根据文档，

应用于没有明确样式的后代文本小部件的文本样式。

将它放在小部件树的根目录上。

示例：

DefaultTextStyle(
          style: TextStyle(fontSize: 36, color: Colors.blue),
         // child: other widgets
   )

这是一个完整的工作示例，说明以下内容

为所有文本小部件定义默认文本样式

覆盖树的特定分支上的默认文本样式。

  import 'package:flutter/material.dart';

  void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.white),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        ///This style will be applied to all the TextWidgets below.
        body: DefaultTextStyle(
          style:
              Theme.of(context).textTheme.headline6.copyWith(color: Colors.red),
          child: Center(
            child: MyWidget(),
          ),
        ),
      ),
    );
  


class MyWidget extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Column(
      children: <Widget>[
        ///This text will be in red color
        Text('Hello, World!'),
        DefaultTextStyle(
          style:
              DefaultTextStyle.of(context).style.copyWith(color: Colors.blue),

          ///We don't need to place Text widget as direct child of
          ///DefaultTextStyle. This is the proof.
          child: Container(
            ///Just another widget
            child: Container(
              ///This text will be in blue color
              child: Text('Hello, World!'),
            ),
          ),
        ),
        DefaultTextStyle(
          style:
              DefaultTextStyle.of(context).style.copyWith(color: Colors.green),

          ///This text will be in green color

          child: Text('Hello, World!'),
        ),
      ],
    );
  

观看现场演示here。

---

你可以找到关于颜色和主题的详细答案here。

【讨论】：

对不起，我是 Flutter 的新手。哪个 Widget 具有属性 DefaultTextStyle。我只在文本小部件中找到它

DefaultTextStyle 是一个小部件，而不是一个属性，只需用 DefaultTextStyle 包裹你的 Scaffold 主体

正是我想要的。不必更改每个 Text 小部件以应用特定样式。但这仅适用于文本小部件，对吗？有什么可以用于所有 Widget 样式的吗？只是好奇。

ThemeData 类上有 buttonTheme、textTheme.. 等属性。您可以定义这些值来设置所有小部件的样式，例如所有按钮。 :) 希望有帮助。随意接受答案:)

不，你可以使用copyWith方法。等待 5 分钟，我将更新 DefaultTextStyle 的详细示例以及如何将 copyWith 方法用于小部件树的不同部分。同样的方式你可以在你的小部件树中使用复制和主题小部件。

【参考方案2】：

为这样的所有文本样式创建一个类：

class AppTheme 

static final primaryFontFamily = "GT Walsheim";

static TextStyle homeScreenBoldStyle() 
    return TextStyle(
        fontFamily: AppTheme.primaryFontFamily,
        fontSize: 16,
        fontWeight: FontWeight.bold,
        color: Colors.white);
  

并像这样调用这个类：

Text(trainingType.name,
                      style: AppTheme.homeScreenBoldStyle()),

【讨论】：

您的答案有效，但我必须为它更改每个文本小部件。我正在寻找类似@Darish 的答案。