flutter - 在 ListView 中更改图标的颜色

Question

我正在尝试更改 ListView 中图标的颜色，但无法更改。另外，我试图将图标围成一个圆圈，但也做不到。

下面是我目前的代码

import 'package:flutter/material.dart';

@immutable
class CardviewListItem {
  //final FlatButton icon;
  final Icon icon;
  final String title;
  final String amount;

  const CardviewListItem({
    @required this.icon,
    @required this.title,
    @required this.amount,
  });
}

import 'package:finsec/model/cardview_list_item.dart';
import 'package:flutter/material.dart';
import 'package:finsec/utils/strings.dart';

const summaryListItems = <CardviewListItem>[
  CardviewListItem(
      title: 'Total Income',
      amount:'4434.65',
      icon:
      Icon(
        icon: Icons.widgets,
        color: Colors.blue,
      ),

  ),

];

以上代码无效。在运行代码之前，我在 android studio 中收到错误消息。错误:需要 1 个必需参数，但找到 0 个。

目前我使用的 Material 图标是

我想把图标变成这样:

有没有办法使用上面的代码更改图标的颜色并在图标周围添加圆圈？

Answer 1

您可能需要堆叠一个圆形容器和图标。尝试这样的函数 a 并修改内容以查看是否可行。容器使用 BoxDecoration 创建绿色圆圈。然后 Stack 将绿色圆圈放在图标下方。

如果您需要其他帮助，请告诉我。

  makeIconWithCircle() {
    final circle =  Container(
      height: 25.0,
      width: 25.0,
      decoration: BoxDecoration(
        color: Colors.green,
        shape: BoxShape.circle
      ),
    );
    final icon = Icon(
      Icons.attach_money,
      color: Colors.white,
      size: 18,
    );

    final iconWithCircle = Stack(
      alignment: Alignment.center,
      children: <Widget>[
        circle,
        icon
      ],
    );

    return iconWithCircle;
  }

为了使它与您的代码一起工作，我认为您可以这样做。没有你的整个文件，我不能自信地说这将适用于复制和粘贴。您可能需要根据需要调整一些东西。

@immutable
class CardviewListItem {
  //final FlatButton icon;
  final Widget icon; // this is a widget. Not an icon.
  final String title;
  final String amount;

  const CardviewListItem({
    @required this.icon,
    @required this.title,
    @required this.amount,
  });
}


class SomeOtherClass {
final summaryListItems = <CardviewListItem>[
  CardviewListItem(
      title: 'Total Income',
      amount:'4434.65',
      icon: makeIconWithCircle(Icons.attach_money) // call function to create an icon with a circle in the background.
  ),
];


  static Widget makeIconWithCircle(IconData iconData) { // function takes in the icon you want to create with a green background
    final circle =  Container(
      height: 25.0,
      width: 25.0,
      decoration: BoxDecoration(
        color: Colors.green,
        shape: BoxShape.circle
      ),
    );
    final icon = Icon(
      iconData, // iconData paramater is used here
      color: Colors.white,
      size: 18,
    );

    final iconWithCircle = Stack(
      alignment: Alignment.center,
      children: <Widget>[
        circle,
        icon
      ],
    );

    return iconWithCircle;
  }
}