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

Question

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

我用 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
}

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

Answer 1

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

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

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

根据文档，

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

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

示例：

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

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

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

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

     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。

Answer 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()),