Flutter - Как оформить разноцветный текст для плоских кнопок в зависимости от того, находится ли кнопка на панели приложений или на главном экране. - PullRequest
Новая
       47

Flutter - Как оформить разноцветный текст для плоских кнопок в зависимости от того, находится ли кнопка на панели приложений или на главном экране.

0 голосов
/ 15 февраля 2020

В моем файле styles.dart у меня есть следующая тема: 

final ThemeData purpleTheme = ThemeData(
    brightness: Brightness.light,
    primaryColor: PURPLE,
    buttonColor: GREEN,
    fontFamily: FontNameDefault,
    buttonTheme: ButtonThemeData(
        textTheme: ButtonTextTheme
            .primary, // TODO: This is making the flat buttons all appear in blue instead of purple
        buttonColor: GREEN,
        height: 45),
    appBarTheme: AppBarTheme(
      textTheme: TextTheme(title: AppBarTextStyle, button: AppBarTextStyle),
      iconTheme: new IconThemeData(color: Colors.white),
      brightness: Brightness.dark,
      color: PURPLE,
    ),
    textTheme: TextTheme(
        title: TitleTextStyle,
        body1: Body1TextStyle,
        subtitle: SubtitleTextStyle));

При указанной выше настройке темы текст кнопки TheThe text является темой ButtonTextTheme.primary. Основной цвет кажется почему-то синим, хотя в моем стиле я не использовал синий. Когда я добавляю 

colorScheme: ColorScheme.light().copyWith(primary: PURPLE)

к стилю, основной цвет становится фиолетовым. Однако мне бы хотелось, чтобы плоские кнопки на фиолетовой панели приложений использовали белый текст, а плоские кнопки на белом экране - фиолетовый текст. Как я могу получить это закодировано в ThemeData?

1 Ответ

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

Вариант использования, который у вас уже есть, хорошо определен в теме материала spe c.

Здесь я собираюсь объяснить, как стилизовать цвет любого виджета (например: button / text / customWidget .. ) в зависимости от цвета родительского виджета.

пример использования:

  1. основной цветной текст на белом appBar
  2. белый цветной на основном appBar
  3. черный цветной текст на белом цвет поверхности
  4. основной цвет текста на поверхности белого цвета

Вот вам go.

Шаг 1:

Прежде всего, определите образец основного цвета, который определяет все варианты от 50 до 900. 

final MaterialColor lightPrimaryColorSwatch = MaterialColor(
    0xff4f9af0,
    {
      50: Color(0xffeaf3fd),
      100: Color(0xffcae1fb),
      200: Color(0xffa7cdf8),
      300: Color(0xff84b8f5),
      400: Color(0xff69a9f2),
      500: Color(0xff4f9af0),
      600: Color(0xff4892ee),
      700: Color(0xff3f88ec),
      800: Color(0xff367ee9),
      900: Color(0xff266ce5),
    },
  );

Шаг 2:

Вам необходимо определить объект ColorScheme, который определяет все 12 цветов материала spe c. 

final ColorScheme lightColorScheme = ColorScheme(
        brightness: Brightness.light,
        primary: Color(0xff4f9af0),
        primaryVariant: Color(0xff2c86ed),
        secondary: Color(0xff0863c4),
        secondaryVariant: Color(0xff259b24),
        error: Color(0xffb00020),
        background: Color(0xfff7f8fa),
        onError: Colors.white,
        onSecondary: Colors.white,
        onBackground: Color(0xff292929),
        onPrimary: Colors.white,
        onSurface: Color(0xff292929),
        surface: Colors.white,
      );

Шаг 3:

Определить данные темы для вашего MaterialApp, используя определенные выше значения. 

 return MaterialApp(

      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: lightPrimaryColorSwatch,
        primaryColor: lightColorScheme.primary,
        primaryColorDark: lightColorScheme.primaryVariant,
        errorColor: lightColorScheme.error,
        colorScheme: lightColorScheme,
        primaryColorBrightness: Brightness.dark,
        accentColorBrightness: Brightness.dark,
        accentColor: lightColorScheme.secondary,
        primaryColorLight: lightColorScheme.secondaryVariant,
        backgroundColor: lightColorScheme.background,
        canvasColor: lightColorScheme.background,
      ),
    //... other attributes go here
  );

Теперь все готово. Отныне вы можете использовать эти 12 цветов для любого типа комбо, который вы будете использовать sh.

Вот пример. 

import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MaterialColor lightPrimaryColorSwatch = MaterialColor(
      0xff4f9af0,
      {
        50: Color(0xffeaf3fd),
        100: Color(0xffcae1fb),
        200: Color(0xffa7cdf8),
        300: Color(0xff84b8f5),
        400: Color(0xff69a9f2),
        500: Color(0xff4f9af0),
        600: Color(0xff4892ee),
        700: Color(0xff3f88ec),
        800: Color(0xff367ee9),
        900: Color(0xff266ce5),
      },
    );

    final ColorScheme lightColorScheme = ColorScheme(
      brightness: Brightness.light,
      primary: Color(0xff4f9af0),
      primaryVariant: Color(0xff2c86ed),
      secondary: Color(0xff0863c4),
      secondaryVariant: Color(0xff259b24),
      error: Color(0xffb00020),
      background: Color(0xfff7f8fa),
      onError: Colors.white,
      onSecondary: Colors.white,
      onBackground: Color(0xff292929),
      onPrimary: Colors.white,
      onSurface: Color(0xff292929),
      surface: Colors.white,
    );
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: lightPrimaryColorSwatch,
        primaryColor: lightColorScheme.primary,
        primaryColorDark: lightColorScheme.primaryVariant,
        errorColor: lightColorScheme.error,
        colorScheme: lightColorScheme,
        primaryColorBrightness: Brightness.dark,
        accentColorBrightness: Brightness.dark,
        accentColor: lightColorScheme.secondary,
        primaryColorLight: lightColorScheme.secondaryVariant,
        backgroundColor: lightColorScheme.background,
        canvasColor: lightColorScheme.background,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            SizedBox(height: 8.0),
           ///white color text on container with primary color
            Container(
                color: Theme.of(context).colorScheme.primary,
                height: 40.0,
                width: 100.0,
                alignment: Alignment.center,
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text('Hello, World!',
                      style: Theme.of(context).textTheme.bodyText2.copyWith(
                          color: Theme.of(context).colorScheme.onPrimary)),
                )),
            SizedBox(height: 8.0),
            ///Primary color text on  white color container.
            Container(
                color: Theme.of(context).colorScheme.surface,
                height: 40.0,
                width: 100.0,
                alignment: Alignment.center,
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text('Hello, World!',
                      style: Theme.of(context)
                          .textTheme
                          .bodyText2
                          .copyWith(color: Theme.of(context).colorScheme.primary)),
                )),
          ],
        );
      }
    }

Вы можете найти живое демо здесь .

...