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

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

Я заменил виджет Scaffold на виджет центра (просто возился). Весь текст был подчеркнут желтым цветом, чтобы преодолеть это, я использовал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
}

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

Источник

2 ответа

Решение

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

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

Вам необходимо определить TextTheme для ThemeData, чтобы стилизовать текстовые виджеты глобально. Кроме того, можно использовать виджет 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!'),
        ),
      ],
    );
  }
}

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

Вы можете найти подробный ответ здесь о цветах и теме.

Источник

Создайте один класс для всего текстового стиля следующим образом:

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()),
Источник
Другие вопросы по тегам