Question

我正在尝试更改列表视图中图标的颜色，但无法更改。另外，我试图将图标圆形，但也不能这样做。

下面是我到目前为止的代码

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个。

当前从素材图标使用的图标是

我想将图标变成这个：

是否可以使用上面的代码更改图标的颜色并在图标周围添加圆形圆圈？

Answer 1

您可能需要堆叠一个圆形容器和图标。尝试一个类似这样的函数，然后修改内容以查看是否可行。容器使用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;
  }
}

在列表视图中更改图标的颜色

1 个答案: