Multiple font styles within a cell of a Flutter pluto_grid?

Question

Is it possible to have multiple font styles in a Flutter pluto_grid? I would to show the difference between two strings, each on in a separate column.

For example,

1. This is a story about a boy
2. This is a <font color=red>true</font> story about a boy <font color=red style="text-decoration: line-through;">and a girl</font>.

I don't see any documentation that suggests that this is supported. It doesn't have to be CSS. I was able to do this with a Flutter Table widget, but I would like to have the rich UI features that come with pluto_grid.

Answer 1

So, with a lot tinkering I discovered that the PlutoColumn class object has an optional 'renderer' property (I had to really dig to find it). You can return any widget to this property, and for my use case I need to return an HTML widget.

So, if you take the pluto_grid example code from pub.dev you can set the 'renderer' property for a PlutoColumn in the _PlutoGridExamplePageState as follows:

class _PlutoGridExamplePageState extends State<PlutoGridExamplePage> 
{
    final List<PlutoColumn> columns = <PlutoColumn>
    [
        PlutoColumn
        (
            title: 'SOURCE Language: English (EN)',
            field: 'source',
            type: PlutoColumnType.text(),
        ),
        PlutoColumn
        (
            title: 'RAW - Google Cloud Advanced Translation API',
            field: 'raw',
            type: PlutoColumnType.text(),        
        ),
        PlutoColumn
        (
            title: 'TARGET Language: Nepali (NE)',
            field: 'target',
            type: PlutoColumnType.text(),
            // SET THE 'renderer' property to an HTML widget
            // VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
            renderer: (rendererContext) { return Html( data: rendererContext.cell.value, ); },           
        ),
    ];

    final List<PlutoRow> rows = 
    [
        PlutoRow
        (
            cells: 
            {
                'source': PlutoCell(value: 'This is a sample row.' ),
                'raw':    PlutoCell(value: 'यो नमूना पङ्क्ति हो।', ),  
                'target': PlutoCell(value: 'यो नमूना पङ्क्ति हो।', ),
            },
        ),
        PlutoRow
        (
            cells: 
            {
                'source': PlutoCell(value: 'You data will look something like this' ),
                'raw':    PlutoCell(value: 'तपाईको डाटा केहि यस्तो देखिन्छ।', ),
                // TEXT WITH HTML CSS STYLE TAGS BELOW
                // VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
                'target': PlutoCell(value: 'तपाईको डाटा <font color=red style="text-decoration: line-through;">केहि यस्तो</font> <font color="green"> यस्तै यस्तै</font> देखिन्छ।', ),
            },
        ),
    ];

    /// [PlutoGridStateManager] has many methods and properties to dynamically manipulate the grid.
    /// You can manipulate the grid dynamically at runtime by passing this through the [onLoaded] callback.
    late final PlutoGridStateManager stateManager;

    @override
    Widget build(BuildContext context) 
    {
        return Scaffold
        (
            body: Container
            (
                padding: const EdgeInsets.all(15),
                child: PlutoGrid
                (
                    columns: columns,
                    rows: rows,
                    //columnGroups: columnGroups,
                    onLoaded: (PlutoGridOnLoadedEvent event) 
                    {
                        stateManager = event.stateManager;
                        // stateManager.setShowColumnFilter(true);
                    },
                    onChanged: (PlutoGridOnChangedEvent event) 
                    {
                        print(event);
                    },
                    configuration: const PlutoGridConfiguration(),
                ),
            ),
        );
    }
}

Hope this helps!