当前位置: 首页 > 知识库问答 >
问题:

更改Flutter的flatbutton中填充的颜色?

商迪
2023-03-14

我想在我的按钮中有两种颜色,像这样:

我可以使用排列在一列中的两个容器小部件来实现这一点,但我想使用FlatButton,因为它附带了onPressed和已经内置的inkwell动画。

所以我尝试在FlatButton中进行:

return new Container(
  child: new Material(
    child: new FlatButton(
      color: color[100],
      onPressed: () => _navigateToConverter(context),
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            child: new Icon(
              icon,
              size: 40.0,
            ),
          ),
          new Container(
            height: 30.0,
            width: 500.0, // Changing this doesn't do anything
            color: Colors.grey[200],
            child: new Center(
              child: new Text(
                name,
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);

共有1个答案

燕璞
2023-03-14

这是由于材料设计的限制。选择一个FlatButton,你暗示地要求Flutter为你设计它,这样它就尊重了你可以在材料设计官网找到的指导方针。特别是看一下关于“密度”、“尺寸和填充”的部分。

长话短说,一个平面按钮两边有16个dp边距。

解决办法:使用墨水池--我相信这是你想要使用的--因为它没有页边距。

      new Container(
          child: new Material(
            child: new InkWell(
              onTap: () => null, // ReplaceMe
              enableFeedback: true,
              child:
              new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  new Expanded(
                    child: new Container(
                   child: new Icon(
                      Icons.battery_charging_full, // ReplaceMe
                      size: 40.0,
                    ),
                      color: Colors.purple.shade200, // ReplaceMe
                  ),
                  ),
                    new Container(
                      height: 30.0,
                      color: Colors.grey[200],
                      child: new Center(
                        child: new Text(
                          "Energy", // ReplaceMe
                          textAlign: TextAlign.center,
                        ),
                      ),
                  ),
                ],
              ),
            ),
          ),
          height: 100.0, // DeleteMe needed just for test
        ),
 类似资料:
  • 我正在制作一个视频播放器,我想用一个滑块作为时间轴,我想将滑块从第一张图片更改为第二张图片 我可以用css代码来做这件事吗?如果是,此代码是什么

  • 如何将标题字体颜色更改为白色,填充为绿色?以下是我正在使用的类: 我相信,这是必须插入的代码。

  • Android Studio现在支持vector assets on 21,并将在编译时为较低版本生成PNG。我有一个要更改填充颜色的向量资源(来自材质图标)。这适用于21,但生成的PNG不会更改颜色。有没有办法做到这一点?

  • 我有一个嵌入在“img src”标记内的SVG图像。svg 包含带有颜色的不同路径,每个路径由 id 分隔。我想使用 jquery 更改每个 id 中的填充颜色 下面是我使用过的代码。但是颜色没有变化。通过大量搜索,我发现如果svg直接添加到html中,它就可以工作。一个工作示例:http://jsfiddle.net/P6t2B/ 但是如果是通过“img src”添加svg,我该如何实现呢??

  • 艺术离不开色彩,今天咱们来介绍一下填充颜色,体会一下色彩的魅力。 填充颜色主要分为两种: 基本颜色 渐变颜色(又分为线性渐变与径向渐变) 我们一个个来看。 填充基本颜色 Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单,例如: context.fillStyle = "red"; 下面是出自 HTML4 规范的可用颜色

  • 我已经使用nvd3很长时间了。在nvd3中,我们可以选择指定自动图形填充颜色。 如何在Chart.js图形中填充随机颜色,而不在数据集中定义每种颜色? 我不想使用JavaScript函数生成并从中获取随机颜色。我需要类似nvd3的东西 如果有可能的话,请帮助我。