在应用程序中普遍设置颜色为文本小部件，而无需每次都在小部件内提及主题

Question

我不熟悉 flutter 和尝试。

我用中心小部件替换了脚手架小部件（只是胡闹）。所有文本都有黄色下划线，为了克服这个问题，我使用了 TextDecoration

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

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

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'),
    );
  }
}

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

p
{
    universal style here
}

我做错了什么吗？ flutter.js 有类似的支持吗？如有不妥请指正

Answer 1

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

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

您需要定义 TextTheme for the ThemeData to style Text widgets globally. Additionally, use can use the DefaultTextStyle 小部件来为小部件树的一部分设置主题。

根据文档，

The text style to apply to descendant Text widgets without explicit style.

将它放在您的小部件树的根部。

示例：

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。

Answer 2

为所有文本样式创建一个 class，如下所示：

class AppTheme {

static final primaryFontFamily = "GT Walsheim";

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

并这样称呼 class :

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

在应用程序中普遍设置颜色为文本小部件，而无需每次都在小部件内提及主题

Set Color to Text Widget in App universally in flutter without mentioning the theme inside the Widget everytime

flutter

flutter-theme

flutter-widget

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

示例：