✨ Lesson 8: Polish Your CLI

⏱ 25-35 min 📊 Intermediate ✨ UX Polish 🔥 Professional 2026 🔗 Official Source

🎨

From Functional to Fabulous

Your CLI works, but does it impress? Let's transform it from a basic tool into a professional masterpiece!

Before Polish 😰

help Commands: search - search download - download exit - exit

After Polish ✨

╔══════════════════════╗ ║ 📚 COMMAND HELP ║ ╚══════════════════════╝ 🔍 search Search the database ⬇️ download Download files 🚪 exit Close application

🎯

Today's Project: "CLI Beautifier"

We'll build a complete CLI polishing toolkit:

🎨 ANSI color formatter
📊 Animated progress bars
📋 Formatted table printer
💬 Verbose help system
⚡ StringBuffer performance optimizer

Step 1

StringBuffer: Efficient String Building

⚡ String Concatenation vs StringBuffer

❌ String Concatenation (+)

Creates 100 intermediate strings

Slower, more memory

✅ StringBuffer

Single buffer, appends efficiently

Faster, less memory

🎮 StringBuffer Playground

📝 Add Lines:

📤 Buffer Output:

Buffer is empty. Add some lines!

Generated Dart Code:

final buffer = StringBuffer();
// Add lines to see the code!

Step 2

ANSI Colors & Styling

🎨 ANSI Color Workshop

Click colors to see their ANSI codes and preview:

Foreground:

Styles:

👁️ Live Preview:

Hello, Colorful World!

\x1B[37mHello, Colorful World!\x1B[0m

📝 Color Extension Class

Step 3

Animated Progress Bars

📊 Progress Bar Designer

Style: Width: Progress:

👁️ Preview:

Downloading...

[████████████████████░░░░░░░░░░] 65%

1.2 MB / 1.8 MB

📄 Generated Code:

String buildProgressBar(int progress, int total, {int width = 30}) {
  final filled = (progress / total * width).round();
  final empty = width - filled;
  return '[${'=' * filled}>${' ' * empty}] ${(progress/total*100).round()}%';
}

Step 4

Formatted Table Printer

📋 Interactive Table Builder

Headers (comma-separated):

Data (semicolon-separated rows):

Style:

👁️ Table Preview:

┌─────────┬─────┬───────┬──────────┐
│ Name    │ Age │ Role  │ Status   │
├─────────┼─────┼───────┼──────────┤
│ Alice   │ 30  │ Admin │ Active   │
│ Bob     │ 25  │ User  │ Active   │
│ Charlie │ 35  │ Mod   │ Inactive │
└─────────┴─────┴───────┴──────────┘

Step 5

Verbose Help System

💬 Help Output Levels

╔════════════════════════════════╗
║        AVAILABLE COMMANDS       ║
╚════════════════════════════════╝

  search    Search the database
  download  Download files
  config    Configure settings
  help      Show this help message

Use 'help ' for more details.

🏆

Build: Complete CLI Beautifier

🎨 Console Output Formatter

📊 Animated Progress Bar

📋 Formatted Table Printer

class TablePrinter {
  static String print(List<String> headers, List<List<String>> rows,
      {String style = 'simple'}) {
    final buffer = StringBuffer();
    final widths = List<int>.filled(headers.length, 0);
    
    // Calculate column widths
    for (int i = 0; i < headers.length; i++) {
      widths[i] = headers[i].length;
      for (var row in rows) {
        if (row[i].length > widths[i]) {
          widths[i] = row[i].length;
        }
      }
    }
    
    // Print top border
    buffer.writeln(_border(widths, '┌', '┬', '┐'));
    
    // Print headers
    buffer.writeln(_row(headers, widths, true));
    buffer.writeln(_border(widths, '├', '┼', '┤'));
    
    // Print data
    for (var row in rows) {
      buffer.writeln(_row(row, widths, false));
    }
    
    // Print bottom border
    buffer.writeln(_border(widths, '└', '┴', '┘'));
    
    return buffer.toString();
  }
  
  static String _border(List<int> widths, String left, String mid, String right) {
    return left + widths.map((w) => '─' * (w + 2)).join(mid) + right;
  }
  
  static String _row(List<String> cells, List<int> widths, bool isHeader) {
    final padded = cells.asMap().entries.map((e) {
      return ' ${e.value.padRight(widths[e.key])} ';
    }).join('│');
    return '│$padded│';
  }
}

🎮 Demo CLI Application

📤 CLI Output Preview

Terminal — Dart CLI

Click "Run Demo" to see the output!

🎮 CLI Polish Challenge: UX Master Quiz

✨ Score: 0/5

⚡ Streak: 0

⏱ Time: 0s

🎨 Polish: 0%