How to Create Strikethrough Text in Flutter?

Strikethrough text is common in mobile apps. You see it in discount tags, replaced values, completed tasks, or outdated details. Flutter app development makes this simple with the right styling. The key is understanding how TextStyle works and how you can apply a line over your text in different ways.

This guide covers practical methods, code samples, UI examples, and use cases. You will also see advanced patterns used by teams at Shiv Technolabs when building real Flutter apps. Each section focuses on a clear action, so even beginners can apply it without confusion.

What Strikethrough Means in Flutter?

Strikethrough text appears with a horizontal line through the words. In Flutter, this effect comes from the TextDecoration property inside TextStyle. You can apply it to a single text, a part of a sentence, or dynamic values.

Strikethrough helps:

• Show discounted prices
• Mark completed tasks
• Replace old values
• Indicate changes in cart items
• Show revised notes or instructions

Flutter supports this through a clean API, so you only need a few lines of code.

Basic Methods to Create Strikethrough Text in Flutter

Method 1: Basic Strikethrough Using TextStyle

This is the simplest way to show text with a line through it.

Text(
  '$1200',
  style: TextStyle(
    decoration: TextDecoration.lineThrough,
  ),
)

How it works

• TextDecoration.lineThrough adds the strikethrough line
• No extra widgets needed
• Works on any string

This is perfect for price displays in eCommerce or old values in a change log.

Method 2: Adding Color and Thickness

Flutter lets you control the look of the line. You can change its color, thickness, and style for better UI clarity.

Text(
  'Old Price: $1500',
  style: TextStyle(
    decoration: TextDecoration.lineThrough,
    decorationColor: Colors.red,
    decorationThickness: 2,
  ),
)

Why this helps

• Helps draw user attention
• Matches brand colors
• Works well in sale banners

Method 3: Partial Strikethrough Using RichText

If you want only part of your sentence to have a line, this is the right way.

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: 'Old Price ',
        style: TextStyle(color: Colors.black),
      ),
      TextSpan(
        text: '$1500',
        style: TextStyle(
          color: Colors.grey,
          decoration: TextDecoration.lineThrough,
        ),
      ),
    ],
  ),
)

Best fit for

• Price comparison
• Inline offers
• Task lists with notes

Advanced Ways to Create Strikethrough Text in Flutter

Method 4: Strikethrough Based on Conditions (Dynamic UI)

Many apps show or hide strikethrough styling based on user actions. For example, a task becomes crossed out only after completion, or a price changes when a coupon applies.

Here’s a simple pattern:

bool isCompleted = true;
Text(
  'Buy Groceries',
  style: TextStyle(
    decoration: isCompleted
        ? TextDecoration.lineThrough
        : TextDecoration.none,
  ),
)

Where this works well

• To-do apps
• Cart items with applied discounts
• Comparisons between old and new values
• Feature updates in settings screens

This pattern keeps your UI flexible and responsive to user actions.

Method 5: Strikethrough Inside ListView or Builder Widgets

Developers often need this effect in a scrollable list. Flutter handles it easily in list builders.

List<String> tasks = ['Milk', 'Bread', 'Eggs'];
List<bool> done = [true, false, true];
ListView.builder(
  itemCount: tasks.length,
  itemBuilder: (context, index) {
    return Text(
      tasks[index],
      style: TextStyle(
        decoration: done[index]
            ? TextDecoration.lineThrough
            : TextDecoration.none,
      ),
    );
  },
);

Ideal for

• Task tracking apps
• Product lists
• Cart updates
• Status boards

This method helps you manage large dynamic lists with clean code.

Method 6: Strikethrough With Custom Fonts

When brands need a certain look, custom fonts come into play. Flutter supports them easily, and the strikethrough layer remains consistent.

Text(
  '$999',
  style: TextStyle(
    fontFamily: 'Poppins',
    decoration: TextDecoration.lineThrough,
  ),
)

Why this matters

• Brands keep consistent typography
• The effect stays smooth across screens
• Works across Android, iOS, and web

Method 7: Using DefaultTextStyle for Multiple Widgets

If you want to apply the effect to a group of widgets, you can wrap them inside a DefaultTextStyle.

This reduces repeated styling.

DefaultTextStyle(
  style: TextStyle(
    decoration: TextDecoration.lineThrough,
    color: Colors.grey,
  ),
  child: Column(
    children: [
      Text('Old Plan'),
      Text('Old Price'),
      Text('Limited Offer'),
    ],
  ),
)

When this helps

• Pricing tables
• Feature archives
• UI sections with outdated content
• Settings with replaced labels

This keeps the code clean and easy to maintain.

Method 8: Multi-Line Strikethrough Text

Flutter handles long text blocks well. When text wraps across lines, the strikethrough line stays consistent across the entire block.

Text(
  'This text will cross through multiple lines if it wraps.',
  style: TextStyle(
    decoration: TextDecoration.lineThrough,
    decorationColor: Colors.black54,
  ),
)

Use cases

• Notes
• Old descriptions
• Revised instructions

Where Strikethrough Text is Common in Flutter Apps?

Strikethrough text appears in many real product screens. It helps users understand price changes, task progress, or outdated details. Developers prefer this method because it is clean and fast.

Here are common scenarios:

• Discounted prices in shopping apps
• Old values in cart updates
• Completed tasks in productivity apps
• Revised details in notes apps
• Step changes in onboarding pages
• Old subscription plans
• Archived details in admin dashboards

These patterns make the UI clear and easy to follow.

Strikethrough Methods in Flutter

Best Practices for Clean Strikethrough UI

Short, clear styling helps the UI stay neat. Here are safe habits developers follow:

• Keep line color simple for long text blocks
• Use partial styling only when needed
• Test text on dark and light themes
• Keep font weight readable
• Check line position on iOS and Android
• Avoid heavy thickness for small fonts

These keep the interface balanced.

Common Mistakes to Avoid

Some mistakes create clutter or confusion. You can avoid them with simple checks.

• Using thick lines with tiny fonts
• Mixing too many colors in price sections
• Adding strikethrough to long paragraphs
• Applying it inside a fixed-size container
• Using it on active or clickable labels

Clean styling improves UI clarity.

Why Flutter Makes This Easy

Flutter offers simple widget control, so strikethrough styling is fast. You can apply it to single text, partial text, or full UI sections. The same code works across Android, iOS, web, and desktop. This gives developers a smooth way to build clear interfaces.

Why Shiv Technolabs Builds Strong Flutter Interfaces?

Shiv Technolabs builds Flutter apps with clean interface patterns, fast code quality, and updated methods. Our team works on shopping apps, booking apps, task apps, dashboards, and custom software. We follow a strict approach to avoid messy UI and style issues.

We also help businesses with screen polish, feature logic, API links, cloud setup, and code review. You can hire our Flutter team if you need reliable app screens, custom widgets, or performance-focused structures inside your project.

Conclusion

Strikethrough text in Flutter is simple to create and easy to control. You can apply it with a single style, adjust it with colors and thickness, or add it conditionally for dynamic screens. The effect works across all Flutter platforms without extra setup.

By following the methods above, you can build clear price tags, revised notes, updated tasks, and clean UI patterns. This gives your Flutter app a polished feel with minimal code.