skip_ink_underline 1.0.0

Flutter text underlines that intelligently skip descender letters (g, j, p, q, y), just like CSS text-decoration-skip. Simple API, beautiful results.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:skip_ink_underline/skip_ink_underline.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
      title: 'Skip Ink Underline Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const DemoPage(),
    );
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Skip Ink Underline Demo'),
      ),
      body: const SingleChildScrollView(
        padding: EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Skip Ink Underline Demo',
              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 32),

            // Comparison Section
            Text(
              'Comparison',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
            ),
            SizedBox(height: 16),

            Text('Standard Flutter underline:'),
            SizedBox(height: 8),
            Text(
              'Typography with descenders like g, j, p, q, y',
              style: TextStyle(
                fontSize: 18,
                decoration: TextDecoration.underline,
              ),
            ),
            SizedBox(height: 16),

            Text('Skip ink underline (this package):'),
            SizedBox(height: 8),
            SkipInkText(
              'Typography with descenders like g, j, p, q, y',
              style: TextStyle(
                fontSize: 18,
                decoration: TextDecoration.underline,
              ),
            ),

            SizedBox(height: 40),

            // Examples Section
            Text(
              'Examples',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
            ),
            SizedBox(height: 16),

            Text('Auto mode (recommended):'),
            SizedBox(height: 8),
            SkipInkText(
              'Beautiful typography with smart underlines',
              style: TextStyle(
                fontSize: 18,
                decoration: TextDecoration.underline,
              ),
            ),

            SizedBox(height: 16),
            Text('Custom colors and thickness:'),
            SizedBox(height: 8),
            SkipInkText(
              'Purple underlines with custom styling',
              style: TextStyle(
                fontSize: 20,
                color: Colors.purple,
                decoration: TextDecoration.underline,
              ),
              underlineColor: Colors.purple,
              thickness: 2.5,
              autoThickness: false,
            ),

            SizedBox(height: 16),
            Text('Custom distance and gaps:'),
            SizedBox(height: 8),
            SkipInkText(
              'Typography with custom spacing',
              style: TextStyle(
                fontSize: 18,
                decoration: TextDecoration.underline,
              ),
              distance: 12,
              leftSkip: 6,
              rightSkip: 6,
              autoDistance: false,
              autoSkipPadding: false,
            ),

            SizedBox(height: 16),
            Text('Per-character control:'),
            SizedBox(height: 8),
            SkipInkText(
              'Custom skips for g, j, p, q, y',
              style: TextStyle(
                fontSize: 18,
                decoration: TextDecoration.underline,
              ),
              gSkip: [0.1, 0.9],
              pSkip: [0.0, 0.4],
              ySkip: [0.2, 0.8],
            ),

            SizedBox(height: 16),
            Text('Disable skip ink:'),
            SizedBox(height: 8),
            SkipInkText(
              'Standard underline behavior',
              style: TextStyle(
                fontSize: 18,
                decoration: TextDecoration.underline,
              ),
              skipInk: false,
            ),

            SizedBox(height: 40),
          ],
        ),
      ),
    );
}