Установите цвет в текстовом виджете в приложении повсеместно, не затрагивая тему внутри виджета каждый раз

Question

Я новичок, чтобы трепетать и пробовать вещи.

Я заменил Виджет Эшафот на Центральный Виджет (Просто возиться). Весь текст имеет желтое подчеркивание, для преодоления этого я использовал TextDecoration

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

Но это было необходимо для всех виджетов «Текст», поэтому я попытался установить его универсально для всех виджетов «Текст», установив данные темы в root 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
}

Я что-то не так делаю? Есть ли аналогичная поддержка во флаттере. Пожалуйста, поправьте меня, если я выжму

Answer 1

Не используйте stati c константы для глобального стиля. Сделайте это по-флаттерски, используя InheritedWidgets . Таким образом, вы можете легко переопределить стиль по умолчанию для конкретной ветви дерева, если это необходимо.

Итак, что использовать для глобальной стилизации текстовых виджетов?

Вам необходимо определить TextTheme для ThemeData для стилизации текстовых виджетов глобально. Кроме того, use может использовать виджет DefaultTextStyle , чтобы оформить часть дерева виджета.

Согласно документации,

Стиль текста, применяемый к виджетам-потомкам Text без явного стиля.

Поместите его на root вашего дерево виджетов.

Пример:

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

См. Демонстрационную версию здесь .

---

Подробный ответ здесь о цветах и ​​теме.

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