Установите цвет в текстовом виджете в приложении повсеместно, не затрагивая тему внутри виджета каждый раз - PullRequest
1 голос
/ 26 февраля 2020

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

Я заменил Виджет Эшафот на Центральный Виджет (Просто возиться). Весь текст имеет желтое подчеркивание, для преодоления этого я использовал 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
}

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

Ответы [ 2 ]

2 голосов
/ 26 февраля 2020

Не используйте 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!'),
            ),
          ],
        );
      }
    }
    

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


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

1 голос
/ 26 февраля 2020

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

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()),
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...