📚 Flet Widgets Library

✨ A rich collection of custom, animated UI components for Flet applications — designed to enhance user interfaces with smooth animations, elegant transitions, and engaging interactions.

---

🚀 Features

🌀 Animated Components

• BubbleText → Bubble-style animated markdown text.
• TextFader → Smooth fade-in/fade-out text transitions.
• TypeWriter → Classic typing animation effect.
• SplitText → Directional split text animations.
• HighlightRotatingText → Dynamic rotating phrases inside a highlight box.
• ImageSlider → Elegant image slider with transition effects (inspired by DevSenate).
• Animated Lists → Stylish unordered and ordered animated list components.
• Circle Card → Stylish and animated circle card

🎁 Oauth Provider Buttons → Stylish buttons with icons and animations from the most recognized OAuth providers

🧩 Basic Components

• BasicButton → Animated button with hover and click effects.
• RestrictedInput → Input with pattern validation rules.
• Stepper → Modern stepper widget for multi-step forms.

---

🎨 Components

AnimatedTextBubble

Create text with bubble animation and full Markdown support.

AnimatedTextBubble(
    texts: Union[str, List[str]],
    speed: int = 10,
    pause: float = 0,
    bgcolor: Colors = Colors.GREY_900,
    border_radius: int = 20,
    MarkdownCodeTheme: MarkdownCodeTheme = MarkdownCodeTheme.ATOM_ONE_DARK,
    ExtensionSet: MarkdownExtensionSet = MarkdownExtensionSet.GITHUB_WEB
)

🎬 Example:

bubble-text.mp4

---

🌫️ TextFader

Smoothly fade between multiple text strings.

TextFader(
    text: str,
    color: Any = Colors.WHITE,
    size: int = 24,
    speed: float = 0.05,
    pause: float = 1,
    loop: bool = False,
    permanent: bool = False
)

🎬 Example:

text-fader.mp4

---

⌨️ TypeWriter

Simulates a typing effect for one or multiple phrases.

TypeWriter(
    texts: str | List[str],
    speed: int = 10,
    pause: float = 1,
    loop: bool = False,
    size: int = 24,
    color: Any = Colors.WHITE,
    bold: bool = False
)

🎬 Example:

type-writter.mp4

---

✂️ SplitText

Creates animated text that enters from a direction (top, bottom, left, right).

SplitText(
    texts: list[str],
    speed: float = 0.1,
    pause: float = 1.5,
    loop: bool = True,
    size: int = 32,
    color: Colors = Colors.WHITE,
    bold: bool = True,
    direction: str = "bottom"
)

🎬 Example:

split-text.mp4

---

💡 HighlightRotatingText

Combine static and dynamic text inside a highlight box.

HighlightRotatingText(
    static_text: str,
    phrases: list[str] | str,
    interval: float = 2.0,
    size: int = 28,
    color: str = Colors.WHITE,
    bold: bool = True,
    box_color: str = Colors.INDIGO,
    loop: bool = True,
    direction: str = "bottom",
    speed: float = 0.05,
    width_factor: int = 20,
)

🎬 Example:

rotating-text.mp4

---

🖼️ ImagesSlider

An elegant image carousel with smooth transitions.

ImagesSlider(
    images: list[Image],
    auto_play: bool = False,
    interval: float = 3,
    buttons_color: str = Colors.GREY_900,
    selected_buttons_color: str = Colors.WHITE,
    animation_type: str = "FADE"
)

🎬 Example:

image-carousel.mp4

---

🔘 BasicButton

A modern button with hover and click animations.

BasicButton(
    text: str,
    on_click: Optional[Callable] = None,
    bgcolor: Union[str, Colors] = Colors.BLUE,
    text_color: Union[str, Colors] = Colors.WHITE,
    icon: Optional[str] = None,
    hover_scale: float = 1.08,
    click_scale: float = 0.9,
    animation_duration: int = 200,
)

🎬 Example:

basic-button.mp4

---

✏️ RestrictedInput

Input field with validation based on regular expressions.

⚠ This widget is still under development, so its documentation is not yet complete and is subject to change.

RestrictedInput(
    pattern: str = None,
    on_validate=None,
    **kwargs
)

---

🧭 Stepper

A customizable multi-step UI widget for modern forms.

⚠ This widget is still under development, so some features may not work correctly.

For example:

• Internal Null Input Values
• Values ​​within the False checkbox
• Animations

StepperEvent

@dataclass
class StepperEvent:
    type: str
    current_step: int
    total_steps: int
    step: Control
    is_first: bool
    is_last: bool
    completed: bool
    parent: Control
)

StepperStepCard

StepperStepCard(
    title: str,
    subtitle: str = "",
    description: str = "",
    icon: Union[Control, Icons] = Icons.CIRCLE,
    icon_color: str = Colors.WHITE,
    icon_size: int = 30,
    content: Optional[Control] = None,
    color: str = Colors.BLUE_400,
    active_color: Optional[str] = None,
)

Stepper

Stepper(
    steps: list[StepperStepCard],
    on_event=None,
    on_complete=None,
    active_color=Colors.BLUE,
    inactive_color=Colors.GREY_700,
    completed_color=Colors.GREEN,
)

🎬 Example:

stepper.mp4

---

📋 Animated Lists

Create beautiful animated ordered and unordered lists.

Unordered

UnorderedList(
    items: List[ListItem],
    spacing: int = 5,
    item_color: str = Colors.AMBER_700,
    delay: float = 0.01
)

Ordered

OrderedList(
    items: List[ListItem],
    spacing: int = 5,
    item_color: str = Colors.AMBER_700,
    delay: float = 0.01
)

🎬 Example:

animated-list.mp4

---

📋 Circle Card

Create A Circle Card With Animations And Dynamic Content

CircleCard(
    title: Control = None,
    icon: Union[Icon, Icons] = Icons.random(),
    icon_color: Colors = Colors.WHITE,
    content: Control = None,
    expanded_width: int = 500,
    expanded_height: int = 200,
    collapsed_width: int = 60,
    bgcolor: Colors = Colors.GREY_900,
    padding: int = 16,
    on_click: Callable = None,
    animation_duration: int = 300,
    border_color: Colors = Colors.WHITE,
    divider_color: Colors = Colors.WHITE,
    animation_curve: AnimationCurve = AnimationCurve.DECELERATE
)

Example

circle-card.mp4

---

---

OauthProvidersButtons

Create elegant and stylish buttons that are already created but modifiable and also include icons from some of the best-known OAuth providers.

GithubButton(
    self,
    text: str = "Github Account",
    on_click: Any = None,
    on_hover: Any = None,
    bgcolor: Colors = None,
    text_color: Colors = Colors.WHITE
)

By default, the buttons already have styles and animations; you only need to add custom events to give them real functionality, such as login, logout, and more.

OauthProvidersButtons.mp4

---

🧪 Tested On

Platform	TypeWriter	SplitText	ImagesSlider	TextFader	BubbleText	RotatingText	BasicButton	RestrictedInput	Stepper	UnorderedList	OrderedList	CircleCard	OauthProvidersButtons
Android	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
iOS	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌
Windows	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
macOS	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌
Linux	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌

---

📝 Examples

Explore the Demo-Example.py file for a complete showcase, or open individual examples inside the examples/ folder.

---

🤝 Contributing

Pull requests are welcome! If you'd like to contribute, fork the repo and submit your improvements — code style, docs, or new widgets are all appreciated 💡

---

❤️ Powered By Flet

Built with love using Flet.