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),

Why `TextDecoration.lineThrough` is not useful ? do you need an image ? — Hosar, May 15 '19 at 03:53

score 12 · Accepted Answer · answered May 15 '19 at 09:00

12

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

answered May 15 '19 at 09:00

1

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? – user2733554 May 15 '19 at 14:20
This will definitely help you: https://gist.github.com/maksimr/7ad40fbe3f16329dd0bb548976150f8a I just came to this post very late! – Dhruvam Sharma Jul 24 '20 at 07:43
1

I have tried this solution but the strike is coming below the text. I have find a solution by using stack https://stackoverflow.com/a/75715265/13800572 – Akhil Mar 12 '23 at 18:06
Bro, this makes the line go behind the text, not over it like the original question asked, Better use a Stack like @Akhil suggested – Mad World Jun 21 '23 at 08:48

score 2 · Answer 2 · answered Mar 12 '23 at 18:04

I have tried using decorationImage but couldn't get the desired result. The problem is that the strike is coming behind the text. So I have found a solution by using stack.

               Stack(
                  children: [
                    Text(
                      "\$250",
                      overflow: TextOverflow.ellipsis,
                      style: GoogleFonts.roboto(
                          decorationColor: Colors.red,
                          fontSize: 20,
                          color: Colors.grey.shade300,
                          fontWeight: FontWeight.w400),
                    ),

                    Positioned(
                      top: 2,
                      left: 3,
                      child: SizedBox(
                          width: 42,
                          child: Image.asset("assets/images/strike.png")),
                    )
                  ],
                ),

This is the result.

How to add custom Strikethrough to Text Widget in Flutter

2 Answers2

Linked