web-dev-qa-db-fra.com

comment ajouter une couleur personnalisée à flutter?

je veux changer la couleur de appbar et utiliser une couleur personnalisée pour cela, j'ai essayé de nombreuses options, mais aucune ne semble fonctionner .. .. Y a-t-il quelque chose que je manque?

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

et puis je l'ai utilisé dans main.Dart comme

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

mais après l'exécution, il est dit 

type La couleur n'est pas du sous-type MaterialColor

dartflutter
6
Karishma

fondamentalement, flutter utilise le format de couleur AARRGGBB que vous pouvez utiliser ci-dessous avec du code de couleur avec toute propriété de couleur telle que:

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

AA = transparence

RR = rouge

GG = vert

BB = bleu

maintenant, si vous voulez créer un code de couleur personnalisé à 8 chiffres à partir d'un code de couleur à 6 chiffres, ajoutez-y simplement une valeur de transparence (AA)

Pourcentages de transparence Voici quelques exemples de pourcentages de transparence et leurs valeurs hexadécimales.

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

dans mon cas, j'utilise toujours AA = ff car la couleur à 6 chiffres a une transparence ff . pour une couleur à 6 chiffres meilleur site

3
mo sean

Il y a une propriété dans Apparaître appelée backgroundColor. Utilisez-le pour définir une couleur pour votre barre d’application. Vous n'avez pas besoin de changer de thème.

1
Vinoth Kumar

Vous ne devriez pas avoir [50] à la fin d'ici:

primarySwatch:Theme1.CompanyColors.black[50]

Utilisez simplement l'objet MaterialColor que vous avez créé:

primarySwatch:Theme1.CompanyColors.black

J'ai testé cela en créant une MaterialColor qui est tout rouge et qui a bien fonctionné:

 Red color

1
Danny Tuppeny

primarySwatch est de type MaterialColor et vous lui transmettez une valeur de type Color.

Vous pouvez soit essayer ceci 

primarySwatch:Theme1.CompanyColors.black,

Ou utilisez plutôt la propriété primaryColor

primaryColor:Theme1.CompanyColors.black[50],
1
aziza

Essaye ça

new Color(0xAARRGGBB)

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

0
NEM