What are the checkmark (✅) and cross/X (❌) icons in Flutter?
Asked Answered
S

2

22

I'm trying to display tick (✅) and cross (❌) icons using Flutter. I have this code:

child: SlideAction(
    sliderButtonIconPadding: 8,
    text: Slidewords,
    textStyle: TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: (18),
        color: Colors.white),
    key: key,
    submittedIcon: formvalid
          ? const Icon(Icons.visibility) // tick icon
          : const Icon(Icons.visibility_off), // cross icon
    onSubmit: () async {
        Future.delayed(
          Duration(seconds: 1),
          () => key.currentState!.reset(),
        );
        _trySubmitForm();
    })

Clearly the Icons.visibility and Icons.visibility_off values don't work, but I can't find the right ones in the documentation. Ctrl+F doesn't seem to work to search on that page and it isn't very responsive.

I also tried Icon.tick, Icon.correct, and Icon.cross; none of these give me the result I want.

Sexdecillion answered 30/6, 2022 at 15:22 Comment(0)
K
44

For a cross, use Icons.close, and for a tick, Icons.check.

Koehler answered 30/6, 2022 at 15:26 Comment(0)
F
13

The icons you're looking for are Icons.check_box and Icons.close. For check icon without the filled box around it, use Icons.check.

Icons screenshot


If it's hard to search for icons in the Flutter docs, you can use the Material Symbols and Icons page from Google Fonts.

After finding the icon, you can click on it and a sidebar will appear on the right side. Go to the "Android" tab, the icon code will be the same as the one from the Icons class. For example, here's what you'll get if you click on the "Check Box" icon:

Material Symbols icon example

The code for this icon is "check_box", so you can use it in Flutter like this:

Icon(Icons.check_box)

In case there are icons you find in that page but not available in the Icons class, you can use the material_symbols_icons package. Now instead of using Icons, you can use Symbols:

// Import the package
import 'package:material_symbols_icons/symbols.dart';

// In your widget, use it as the IconData the same way as Icons
Icon(Symbols.add_task)
Father answered 30/1 at 2:45 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.