swipe_path_typer 1.1.5

A swipe-based typing widget for Flutter that mimics gesture typing on mobile keyboards. Ideal for games, word puzzles, or creative input mechanics.

swipe_path_typer

A swipe-based typing widget for Flutter, mimicking the gesture typing experience of modern mobile keyboards like Gboard or SwiftKey.

Ideal for games, puzzles, and creative UIs that need swipe input on a grid of characters.

---

✨ Features

• 📱 Swipe over tiles to form words
• 🔀 Sharp turn detection for smart letter selection
• 👆 Tap support (with optional auto-complete on tap)
• 🎨 Fully customizable tile UI
• 🧱 Adjustable layout, spacing, and interaction
• 🖌️ Painted swipe trail (customizable color and thickness)
• 🖱️ Desktop/web mouse support

---

🚀 Usage

Basic

SwipePathTyper(
  tiles: ['h', 'e', 'l', 'l', 'o'],
  onSwipeCompleted: (word) {
    print('User typed: $word');
  },
  onLetterSelected: (letter){
    print('User selected $letter')
  }
)

---

Custom Tile Example

tileBuilder: (context, letter, isSelected) {
  return Container(
    padding: const EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: isSelected ? Colors.blue : Colors.grey[200],
      borderRadius: BorderRadius.circular(10),
    ),
    child: Text(
      letter.toUpperCase(),
      style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
  );
},

---

⚙️ Parameters

Parameter	Type	Description
tiles	List<String>	The list of characters to render as tiles
onSwipeCompleted	ValueChanged<String>	Called when a word is completed via swipe
onLetterSelected	ValueChanged<String>	Called when a letter is selected
tileBuilder	TileBuilder?	Optional builder to customize tile UI
columnCount	int	Number of tiles per row (default: 5)
simpleTapMode	bool	Taps immediately complete a word (default: true)
horizontalTileSpacing	double	Horizontal space between tiles
verticalTileSpacing	double	Vertical space between tile rows
padding	EdgeInsets	Padding around the entire widget
onPanUpdate	Function(DragUpdateDetails)?	Called during a swipe
onPanEnd	Function(DragEndDetails)?	Called when a swipe ends
onPanStart	Function(DragEndDetails)?	Called when a swipe starts
onTapDown	Function(int)?	Called when a tile is tapped down
onTapUp	Function(int)?	Called when a tile is tapped up
widgetHitTestBehavior	HitTestBehavior	Behavior for the gesture container
tileHitTestBehavior	HitTestBehavior	Behavior for mouse hover on tiles
tileCursor	SystemMouseCursor	Cursor to use on hover (e.g., click)
swipeTrailColor	Color	Color of the swipe trail
swipeTrailStrokeWidth	double	Thickness of the swipe trail line

---

🧪 Example

A working example is available in /example/main.dart.

---

📦 Installation

Add to your pubspec.yaml:

dependencies:
  swipe_path_typer: ^1.1.5

---

📄 License

MIT © 2025 [Your Name or Studio]