How to add custom Strikethrough to Text Widget in Flutter

Question

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

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

style: TextStyle(decoration: TextDecoration.lineThrough),

Solution 1

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

and strikethrough image

Solution 2

You can achieve to this like below

   Container(
        padding: EdgeInsets.all(20.0),
        child: Stack(
          children: <Widget>[
            Text(
              "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
              style: TextStyle(
                fontSize: 20,
              ),
            ),
            Container(
              child: Text(
                "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
                style: TextStyle(
                  color: Colors.transparent,
                  decorationColor: Colors.red,
                  decorationStyle: TextDecorationStyle.solid,
                  decoration:
                  TextDecoration.lineThrough,
                  fontSize: 20,
                ),
              ),
            )
          ],
        ))

Comments

[Hosar]

Why TextDecoration.lineThrough is not useful ? do you need an image ?

[user2733554]

Thanks, Eugene! Great detailed answer, appreciate your help. Do you know how we could animate the strikethrough, like how a human would strike off a to-do item. Maybe a un-fade animation that goes from left to right?

[Dhruvam Sharma]

This will definitely help you: gist.github.com/maksimr/7ad40fbe3f16329dd0bb548976150f8a I just came to this post very late!