Search code examples
flutterdarttextflutter-layoutstrikethrough

How to add custom Strikethrough to Text Widget in Flutter


I am looking for a way to add a custom strikethrough to a text widget like below

enter image description here

I looked at the Text Style API, but couldn't find any option to customize the Strikethrough graphic.

style: TextStyle(decoration: TextDecoration.lineThrough),

Solution

  • as an option

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Center(
              child: StrikeThroughWidget(
                child: Text('Apple Juice', style: TextStyle(fontSize: 30)),
              ),
            ),
          ),
        );
      }
    }
    
    class StrikeThroughWidget extends StatelessWidget {
      final Widget _child;
    
      StrikeThroughWidget({Key key, @required Widget child})
          : this._child = child,
            super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: _child,
          padding: EdgeInsets.symmetric(horizontal: 8), // this line is optional to make strikethrough effect outside a text
          decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage('graphics/strikethrough.png'), fit: BoxFit.fitWidth),
          ),
        );
      }
    }
    

    the result enter image description here

    and strikethrough image enter image description here