webentwicklung-frage-antwort-db.com.de

wie man benutzerdefinierte Farbe zum Flattern hinzufügt?

ich möchte die Farbe von Appbar ändern und eine benutzerdefinierte Farbe dafür verwenden. Ich habe viele Optionen ausprobiert, aber es scheint keine zu funktionieren.

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

und dann habe ich es in main.Dart als verwendet

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

aber nach der Ausführung heißt es 

typ Farbe ist nicht vom Subtyp MaterialColor

dartflutter
6
Karishma

grundsätzlich wird für das Flattern das Format AARRGGBB verwendet, das Sie mit dem folgenden Farbcode mit einer beliebigen Farbeigenschaft verwenden können:

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

AA = Transparenz

RR = rot

GG = grün

BB = blau

wenn Sie nun einen benutzerdefinierten 8-stelligen Farbcode aus einem 6-stelligen Farbcode erstellen möchten, fügen Sie einfach den Transparenzwert (AA) hinzu

Prozentsätze für Transparenz Nachfolgend einige Beispiele für Prozentsätze für Transparenz und deren Hex-Werte

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

in meinem Fall verwende ich immer AA = ff, da 6-stellige Farbe ff-Transparenz hat. _ für 6-stellige Farbe beste Seite

3
mo sean

Sie können eine separate Klasse erstellen.

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

Versuche dies:

Colors _thisColor = Color(0xFF3366FF);
1
Junel Alto

In Appear gibt es eine Eigenschaft namens backgroundColor. Verwenden Sie diese Option, um eine beliebige Farbe für Ihre Appbar festzulegen. Sie müssen das Thema nicht ändern.

1
Vinoth Kumar

Sie sollten am Ende nicht [50] haben:

primarySwatch:Theme1.CompanyColors.black[50]

Verwenden Sie einfach das von Ihnen erstellte MaterialColor-Objekt:

primarySwatch:Theme1.CompanyColors.black

Ich habe dies getestet, indem ich eine MaterialColor erstellt habe, die alles rot ist, und es hat gut funktioniert:

 Red color

1
Danny Tuppeny

primarySwatch ist vom Typ MaterialColor und Sie übergeben einen Wert vom Typ Color an diesen.

Sie können dies entweder versuchen 

primarySwatch:Theme1.CompanyColors.black,

Oder verwenden Sie stattdessen die primaryColor-Eigenschaft

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

Es gibt verschiedene Möglichkeiten, dies zu tun, aber ich bevorzuge diese Methode. Es ist ganz einfach.

Erstellen Sie eine benutzerdefinierte

MaterialColor myColor = MaterialColor(0xFF880E4F, color);

Erstellen Sie eine Karte und wie Sie unten sehen werden, ändere ich den Deckkraftkanal von 50 bis 900, um Ihnen die verschiedenen Farbdeckkraftgrade zu geben.

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

Gleiches gilt für Color.fromRGBA, wenn Sie Alpha der Opazität vorziehen.

Ich möchte darauf hinweisen, dass ich gesehen habe, dass Sie versucht haben, dies zu tun.

primarySwatch: Colors.black[500]

Dies gibt Ihnen einen Fehler. Sie müssen die von Ihnen erstellte MaterialColor-Basis verwenden. Die Verwendung der Farbgradmodifikatoren macht den Compiler unglücklich.

0
Patrick Kelly

Es ist ein MaterialColor -Objekt (nicht Color), das Sie für eine Farbfelderigenschaft zuweisen sollten und das Farbwerte für die zehn verschiedenen Luminanzen bereitstellt. Bitte überlegen Sie, diese Lösung für einen besseren Ansatz zu verwenden.

Flattern: Erstellen eines benutzerdefinierten Farbfelds für MaterialColor

0
filipvkovic

Versuche dies

new Color(0xAARRGGBB)

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

0
NEM

Ich habe gerade eine Website erstellt, auf der Sie Flutter Colors für Ihre App auswählen können. Sie können damit jede gewünschte Farbe auswählen Flutter Doctor Color Picker

0
EyoelD