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

Question

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

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

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

但这对于所有 Text 小部件都是必需的，因此我尝试通过在根 MaterialApp 中设置 Theme 数据来为所有 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 中为标签设置样式而不必每次都设置它。

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

我做错了什么吗？颤振中是否有类似的支持。如果我绞尽脑汁，请纠正我

Answer 1

不要将静态常量用于全局样式。使用InheritedWidgets以颤动的方式完成。这样，您可以根据需要轻松覆盖树的特定分支的默认样式。

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

您需要定义TextTheme为ThemeData到样式的文本控件全球。此外，用户可以使用DefaultTextStyle小部件来主题化小部件树的一部分。

根据文档，

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

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

例子：

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

在此处查看现场演示。

您可以在此处找到有关颜色和主题的详细答案。