как добавить пользовательский цвет в флаттер?

Я хочу изменить цвет панели приложений и использовать для нее пользовательский цвет, я попробовал много вариантов, но ни один из них не работает. Есть ли что-то, что им не хватает?

import 'package:flutter/material.dart';

final ThemeData CompanyThemeData = new ThemeData(
  brightness: Brightness.light,
  primaryColorBrightness: Brightness.light,
  accentColor: CompanyColors.black[500],
  accentColorBrightness: Brightness.light
);

class CompanyColors {
  CompanyColors._(); // this basically makes it so you can instantiate this class

 static const _blackPrimaryValue = 0xFF000000;

  static const MaterialColor black = const MaterialColor(
    _blackPrimaryValue,
    const <int, Color>{
      50:  const Color(0xFFe0e0e0),
      100: const Color(0xFFb3b3b3),
      200: const Color(0xFF808080),
      300: const Color(0xFF4d4d4d),
      400: const Color(0xFF262626),
      500: const Color(_blackPrimaryValue),
      600: const Color(0xFF000000),
      700: const Color(0xFF000000),
      800: const Color(0xFF000000),
      900: const Color(0xFF000000),
    },
  );
}

и затем я использовал его в main.dart как

Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch:Theme1.CompanyColors.black[50],
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

но после его исполнения

Тип Цвет не относится к подтипу MaterialColor

Ответ 1

в основном флаттер использует цветовой формат AARRGGBB который вы можете использовать ниже цветового кода с любым свойством цвета, например:

new Container(color: const Color(0xff2980b9));

AA = прозрачность

RR = красный

GG = зеленый

BB = синий

Теперь, если вы хотите создать собственный 8-значный код цвета из 6-значного кода цвета, просто добавьте к нему значение прозрачности (AA)

Процент прозрачности Ниже приведены некоторые примеры процентов прозрачности и их шестнадцатеричных значений.

100% - FF
95% - F2
90% - E6
85% - D9
80% - CC
75% - BF
70% - B3
65% - A6
60% - 99
55% - 8C
50% - 80
45% - 73
40% - 66
35% - 59
30% - 4D
25% - 40
20% - 33
15% - 26
10% - 1A
5% - 0D
0% - 00

в моем случае я всегда использую AA = ff, потому что 6-значный цвет имеет прозрачность ff. за 6-значный цветной лучший сайт

Ответ 2

Вы не должны иметь [50] в конце здесь:

primarySwatch:Theme1.CompanyColors.black[50]

Просто используйте созданный объект MaterialColor:

primarySwatch:Theme1.CompanyColors.black

Я проверил это, создав MaterialColor, все красные, и он работал нормально:

Ответ 3

primarySwatch имеет тип MaterialColor и вы передаете ему значение типа Color.

Вы можете попробовать это

primarySwatch:Theme1.CompanyColors.black,

Или вместо этого используйте свойство primaryColor

primaryColor:Theme1.CompanyColors.black[50],

Ответ 4

Вы можете создать класс Seprate.

static const PrimaryColor =  Color(0xFF808080);
static const PrimaryAssentColor =  Color(0xFF808080);
static const PrimaryDarkColor =  Color(0xFF808080);
static const ErroColor =  Color(0xFF808080);

Ответ 5

В Appear есть свойство, называемое backgroundColor. Используйте это, чтобы установить любой цвет для вашего Appbar. Вам не нужно менять тему.

Ответ 6

Это объект MaterialColor (не Color), который вы должны назначить для свойства образца, предоставляя значения цвета для десяти различных яркостей. Пожалуйста, рассмотрите возможность использования этого решения для лучшего подхода.

Флаттер: создание пользовательского образца цвета для MaterialColor

Ответ 7

Я только что создал сайт, где вы можете выбрать Flutter Colours для вашего приложения. Вы можете использовать это, чтобы выбрать любой цвет, который вы хотите Flutter Doctor Color Picker

Ответ 8

Есть несколько способов сделать это, но этот метод я предпочитаю использовать. Это очень просто.

Создать кастом

MaterialColor myColor = MaterialColor(0xFF880E4F, color);

Создайте карту, и, как вы увидите ниже, я изменяю канал непрозрачности с 50 до 900, чтобы дать вам различные степени непрозрачности цвета.

Map<int, Color> color =
{
50:Color.fromRGBO(4,131,184, .1),
100:Color.fromRGBO(4,131,184, .2),
200:Color.fromRGBO(4,131,184, .3),
300:Color.fromRGBO(4,131,184, .4),
400:Color.fromRGBO(4,131,184, .5),
500:Color.fromRGBO(4,131,184, .6),
600:Color.fromRGBO(4,131,184, .7),
700:Color.fromRGBO(4,131,184, .8),
800:Color.fromRGBO(4,131,184, .9),
900:Color.fromRGBO(4,131,184, 1),
};

То же самое работает для Color.fromRGBA, если вы предпочитаете использовать Alpha, а не Opacity.

Я хотел бы отметить, что я видел, что вы пытались сделать это.

primarySwatch: Colors.black[500]

Это даст вам ошибку. Вы должны использовать созданный вами базовый MaterialColor. Использование модификаторов степени цвета сделает компилятор несчастным.

Ответ 9

Попробуй это

new Color(0xAARRGGBB)

https://github.com/flutter/engine/blob/master/lib/ui/painting.dart

Ответ 10

Попробуй это:

Colors _thisColor = Color(0xFF3366FF);