logo标签列表

如何在Flutter中添加自定义颜色？

flutterdartcolorsflutter-layout
121

我想改变AppBar的颜色并使用自定义颜色，我尝试了很多选项但似乎都不起作用。我有什么遗漏吗？

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

但执行后显示：

颜色类型不是材料颜色的子类型

有没有Flutter的Material Design颜色映射表？ - Jitesh Mohite
19个回答
5

你可以尝试：

将十六进制颜色转换为MaterialColor（Flutter）: : http://mcg.mbitson.com/

详情请见： image

2
目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
2

首先创建一个createMaterialColor.dart文件：

createMaterialColor.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CreateMaterialColor{
  MaterialColor createMaterialColor(Color color) {
    List strengths = <double>[.05];
    final swatch = <int, Color>{};
    final int r = color.red, g = color.green, b = color.blue;

    for (int i = 1; i < 10; i++) {
      strengths.add(0.1 * i);
    }
    strengths.forEach((strength) {
      final double ds = 0.5 - strength;
      swatch[(strength * 1000).round()] = Color.fromRGBO(
        r + ((ds < 0 ? r : (255 - r)) * ds).round(),
        g + ((ds < 0 ? g : (255 - g)) * ds).round(),
        b + ((ds < 0 ? b : (255 - b)) * ds).round(),
        1,
      );
    });
    return MaterialColor(color.value, swatch);
  }

}

现在，在您想要使用自定义颜色的 .dart 文件中，比如说 first.dart，首先添加以下内容：

import '<path_to>/createMaterialColor.dart';

然后，在无状态小部件的类内，首先像这样初始化类：

final createMaterialColor = CreateMaterialColor();

现在您可以使用此函数在first.dart中生成自定义颜色，例如，如果自定义颜色代码为#ffffff，则可以这样做：
createMaterialColor.createMaterialColor(Color(0xFFffffff))
非常感谢，你让我的一天变得美好了；不仅提供了定制化的解决方案，而且还是一个动态的解决方案。 - quantme
2

我使用了一个简单的int解析器，通过选择适当的十六进制颜色调色板，并将其定义为int解析器中的字符串，在"#"的位置上加上"0xff"前导符号，从而得到了解决方案。我的实际十六进制颜色代码是#7CEA9C，它实际上代表如下内容。

    color: Color(int.parse("0xff7CEA9C")),
您也可以使用 color: Color(xff7CEA9C)。在Dart中，0xff7CEA9C是一个有效的整型字面量。 - Peter Bruins
1

试试这个：

Colors _thisColor = Color(0xFF3366FF);
1

将以下部分添加到您想要更改颜色的部分（按钮、容器等）中。

color: Color(0xFFffd57e),
0
          color: const Color(0xFFF57F17),
    
    
     Container(
                  decoration: const BoxDecoration(
                  color: const Color(0xFFF57F17),
                 borderRadius:
                 BorderRadius.all(Radius.circular(30)),
                 ),
                child: Text(
                            "Pending",
                            textAlign: TextAlign.start,
                            style: TextStyle(
                            fontSize: 13,
                           color: HexColor(
                           HexColor.gray_text),
                          fontFamily:
                          'montserrat_regular',
                          decoration:
                          TextDecoration.none,
                          ),
                      ),
 )
0

Appear 中有一个名为 backgroundColor 的属性。使用它来为您的 Appbar 设置任何颜色。您不需要更改主题。

抱歉，您无法为“AppBar”设置任何颜色。它必须完全不透明。 - CopsOnRoad
0

尽管shade是一个整数索引和颜色选项列表，但它也是您的CompanyColors对象的属性，因此您必须以不同于列表的方式引用它。而且我不是Flutter和Dart的专家，但我不确定Theme1是用来做什么的。

//instead of this...    
primarySwatch: Theme1.CompanyColors.black[50]

//do this by accessing the shade property of the Colors.black object
//and drop the theme1 thing...allegedly ;)

primarySwatch: CompanyColors.black.shade(500);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接