Question 76298 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Slidable, cannot put svg for icon property of Slidable

Slidable(
      groupTag: 0,
      key: UniqueKey(),
      endActionPane: ActionPane(
        children: [
          SlidableAction(
            onPressed: (BuildContext context) {
                //whatever I will do here
            },
            icon: Icons.delete
          )// SvgPicture.asset(Assets.svg.trash.svg()),)
        ],
      ),
      child: _makeColumnTile(
        myCard,
      ),

    );

This is just a basic slidable item, which I am doing for every list item I have. I understand, and can work with slidable and listTile. However, I want to put my own custom svg file I saved in my assets folder, not pre-built Icons. But the icon: is apparently only wanting IconData

I tried putting svg directly with SvgPicture.asset(Assets.svg.trash.svg()), but the error is

The argument type SvgPicture can’t be assigned to the parameter type IconData?,

also when I want to assign Icon to icon, this error pops up.

The argument type ‘Icon’ can’t be assigned to the parameter type ‘IconData?.

I understand why I cannot assign those properties, but isn’t there any way I could solve this problem?

Tags:

2

Answers


  1. 0

    The SlidableAction only accepts IconData in its icon property. A list of MaterialIcons is available here.

    SlidableAction(
   icon: Icons.archive,
 ),

    For your use case, you can instead use a CustomSlidableAction (check the package’s API reference here).

    CustomSlidableAction (
  child: //Your action's icon or label.
 )

    You can pass your SVG as a child to it.

    Login or Signup to reply.
  2. 0

    Flutter can’t generate IconData from svgs. You must convert it to a ttf file and use it as your icon source.
    You can use an online converter like https://fluttericon.com or do it locally with a package like https://pub.dev/packages/icon_font_generator

    Then import it as following in your pubspec.yaml:

    fonts:
- family: MyIcons
  fonts:
    - asset: assets/fonts/MyIcons.ttf

    Then pass the Icon to your widget:

     SlidableAction(
      onPressed: (_) {},
      backgroundColor: Color(0xFFFE4A49),
      foregroundColor: Colors.white,
      icon: MyIcons.Delete,
      label: 'Delete',
    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search