RSK World - Flutter Custom Widgets Kit | Buttons, Cards, Inputs, Animations | RSK World

Flutter Custom Widgets Kit - Buttons & Cards - RSK World

Buttons Cards Inputs Animations Extras

Flutter Custom Widgets Kit is a reusable Flutter UI library with custom buttons (PrimaryButton, GhostButton, IconGlassButton), cards (StatCard, BlurredInfoCard, PricingCard), inputs (ModernTextField), and extras (PillSegmentedControl, ToggleRow, ProfileHeader). It includes breathing glow and shimmer placeholder animations, Material 3 light and dark themes, and a bottom-navigation showcase app. Built with Flutter and Dart only (no Lottie or shared_preferences). Ideal for learning Flutter widget design, theming and premium 2026-style UI. By Molla Samser, RSK World.

If you find this Flutter Custom Widgets Kit useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Flutter Custom Widgets Kit

Primary, Ghost & Glass Buttons

PrimaryButton with gradient, shadow and press-scale animation; GhostButton for outline secondary actions; IconGlassButton with BackdropFilter blur and glow. All theme-aware and reusable for CTAs and toolbars.

PrimaryButton: Flutter CTA button with LinearGradient (primary to secondary), BoxShadow elevation, optional leading icon (IconData), and loading state with CircularProgressIndicator for async actions.
PrimaryButton press animation: GestureDetector with TapDown/TapUp/TapCancel drives AnimationController (140ms); Transform.scale(1 - t) for subtle press feedback; AnimatedSwitcher for loading vs label transition.
GhostButton: Flutter OutlinedButton with pill shape (borderRadius 999), optional icon, theme outline color; ideal for secondary actions, cancel flows, and low-emphasis CTAs without gradient.
IconGlassButton: circular 56×56 Flutter widget using BackdropFilter (ImageFilter.blur sigmaX/Y 12), semi-transparent gradient and white border; perfect for floating action bars, toolbars, and glassmorphism UI.
All buttons read Theme.of(context).colorScheme for primary, secondary, onSurface; work in light and dark theme; reusable across Android, iOS and Flutter web for 100% SEO-friendly app UI.
Button parameters: label (String), onPressed (VoidCallback), optional icon (IconData), isLoading (bool) for PrimaryButton; GhostButton and IconGlassButton share similar minimal APIs for easy Flutter integration and SEO-rich UIs.

StatCard, BlurredInfoCard & PricingCard

StatCard for metrics with label, value and trend (up/down). BlurredInfoCard with BackdropFilter, tag and accent. PricingCard with tier, price, features list and optional Most Popular badge.

StatCard: Flutter card widget for KPIs and analytics; shows label (bodySmall), value (headlineSmall, fontWeight 800), trend row with Icons.trending_up_rounded or trending_down_rounded and trendLabel; fullWidth parameter for single full-width card or side-by-side layout in Row; greenAccent/redAccent for trend direction.
BlurredInfoCard: glassmorphism card with ClipRRect, BackdropFilter (blur 16), gradient container (accentColor + surface), optional tag pill with accent dot; title (titleLarge), description (bodyMedium); ideal for featured content, hero blocks, and premium Flutter UI sections.
PricingCard: Flutter pricing layout with optional isPopular badge (secondary color, auto_awesome icon), tier name, price + "/project" suffix, description, List of features with checkmark icon in circular primary-tinted container, and full-width ElevatedButton "Use this layout"; gradient border and soft gradient background from theme.
All cards use Theme.of(context).colorScheme, RoundedRectangleBorder 24–28px radius, and consistent padding; no external package – pure Flutter Material and dart:ui for blur; SEO-friendly semantic structure for Flutter app landing pages and dashboards.
Card parameters: StatCard (label, value, trendLabel, trendUp, fullWidth); BlurredInfoCard (title, description, tag, accentColor); PricingCard (tier, price, description, features, isPopular) – all optional and theme-driven for Flutter Custom Widgets Kit reuse.

ModernTextField & Inputs

ModernTextField with floating label, optional prefix icon, focus ring shadow, and password visibility toggle. Perfect for sign-up and login forms with subtle micro-interactions.

ModernTextField: Flutter TextField wrapper with TextEditingController, labelText, optional obscureText, keyboardType and prefixIcon; uses theme InputDecoration for filled background, 24px borderRadius, contentPadding; perfect for Flutter sign-up and login forms with modern 2026 UI.
Focus handling: FocusNode listener updates _hasFocus; AnimatedContainer (160ms) adds BoxShadow (primary.withOpacity(0.18), blur 24, offset (0,10)) when focused for subtle focus ring – no outline, just soft glow for better SEO and accessibility.
Password visibility: when obscureText true, suffixIcon is IconButton toggling _obscure state; icons Icons.visibility_off_rounded and Icons.visibility_rounded; state preserved in _ModernTextFieldState for secure yet user-friendly Flutter form UX.
Theme integration: all styles from Theme.of(context).inputDecorationTheme and colorScheme; 24px border radius matches AppTheme; reusable across light/dark mode; ideal for Flutter Material 3 form design and SEO-friendly form pages.
ModernTextField API: controller (TextEditingController), labelText (String), obscureText, keyboardType, prefixIcon – drop-in replacement for Flutter TextField with enhanced focus and password UX; dispose controllers in parent for clean Flutter form state.

ProfileHeader & ToggleRow

ProfileHeader shows avatar, name, role and location in a gradient card. ToggleRow pairs title and subtitle with Switch.adaptive for settings and preferences.

ProfileHeader: Flutter layout with Container gradient (primary/secondary opacity), Row with circular 54×54 avatar (BoxDecoration gradient + Icons.person_rounded), Column for name (titleMedium w700), role (bodySmall), location row (Icons.location_on_rounded + text); trailing Icons.more_horiz_rounded; ideal for Flutter profile screens, account pages, and team cards.
ToggleRow: Row with Expanded Column (title bodyLarge w600, subtitle bodySmall muted) and Switch.adaptive(value, onChanged); perfect for Flutter settings screens – dark mode, push notifications, preferences; ValueChanged callback for state; theme-aware colors.
Both widgets use Theme.of(context).colorScheme.primary/secondary.withOpacity for gradients and onSurface for text; no hard-coded colors; reusable in any Flutter app with Material 3 for consistent, SEO-friendly profile and settings UI.
Use cases: Flutter user profile header, app settings toggles, preference panels, onboarding preference selection; copy into lib/widgets for quick Flutter UI development and better UX.
ProfileHeader (name, role, location) and ToggleRow (title, subtitle, value, onChanged) – simple required parameters; no external assets; works with Theme.of(context) for Flutter Custom Widgets Kit and production apps.

PillSegmentedControl

Horizontal pill-style segmented control: select one of several options with animated background and white text on primary. Great for device type (Mobile/Tablet/Desktop) or view mode toggles.

PillSegmentedControl: Flutter segmented control with List segments, int selectedIndex, ValueChanged onChanged; Container with surfaceVariant background, padding 4, Row of Expanded GestureDetector children – one per segment.
Selection UI: each segment is AnimatedContainer (180ms, Curves.easeOut) with padding, borderRadius 999; selected segment gets colorScheme.primary background, unselected transparent; text uses bodyMedium w600, white when selected, onSurface 0.7 when not – smooth Flutter animation for better UX and SEO.
Pill shape and layout: outer container borderRadius 999 (full pill); inner segments also pill-shaped; no external package – pure Flutter Material; ideal for device selector (Mobile/Tablet/Desktop), view mode (List/Grid), or filter tabs in Flutter apps.
Theme and accessibility: reads Theme.of(context).colorScheme and textTheme; works in light and dark ThemeData; semantic structure supports screen readers; reusable Flutter widget for modern 2026 UI and cross-platform (Android, iOS, Web).
API: segments (List), selectedIndex (int), onChanged (ValueChanged); call setState in parent to update selectedIndex on tap; flexible segment count for Flutter toolbar and filter UIs with SEO-friendly labels.

AppTheme – Light & Dark

Centralized AppTheme with light and dark ThemeData. Material 3 ColorScheme, card and input styles, elevated button and chip themes. Primary indigo, accent green, soft surfaces.

AppTheme light: ThemeData useMaterial3 true; ColorScheme.fromSeed primary #4F46E5, secondary #22C55E, brightness light; scaffoldBackgroundColor #F5F5F7; cardTheme 24px RoundedRectangleBorder, white, zero elevation; inputDecorationTheme filled, surfaceSoft #F4F4FB, 24px border; elevatedButtonTheme pill shape, primary bg; chipTheme surfaceSoft bg, primary selected tint – full Flutter Material 3 theming.
AppTheme dark: primary #312E81, scaffold #050816, card #0F172A; input fill #020617; chip backgroundColor #020617, selectedColor primary 0.32 opacity; same structure as light for consistent Flutter dark mode and SEO-friendly theme switching.
Single source: all widgets import app_theme.dart; AppTheme.lightTheme and AppTheme.darkTheme used in MaterialApp theme/darkTheme; fontFamily Roboto; appBarTheme centerTitle, zero elevation, transparent; no scattered colors – easier maintenance and brand consistency for Flutter Custom Widgets Kit.
Extensibility: add custom TextTheme, BottomNavigationBarTheme, or component overrides in one place; Flutter theme best practices for scalable UI kit and production apps; 100% SEO through consistent, semantic Material 3 design.
Color constants: _primaryColor #4F46E5, _primaryDark #312E81, _accentColor #22C55E, _surfaceSoft #F4F4FB; used in ColorScheme, gradients and fills; change once in app_theme.dart for full Flutter Custom Widgets Kit rebrand.

Animations – Breathing Glow & Shimmer

Breathing glow: circular gradient with animated scale and blur for highlight effect. Shimmer placeholder: gradient sweep over skeleton bars for loading states. Both use AnimationController and AnimatedBuilder.

Breathing glow: AnimationController duration 2200ms repeat(reverse: true); AnimatedBuilder with Curves.easeInOut; Transform.scale 1 + (t * 0.04); BoxShadow blurRadius 25 + (t * 15), color primary 0.45 opacity; circular gradient container (primary/secondary) with Icon auto_awesome_rounded – ideal Flutter hero or highlight animation without Lottie.
ShimmerPlaceholder: StatefulWidget with AnimationController 1400ms repeat(); ShaderMask with LinearGradient shaderCallback – begin Alignment(-1 - t*2, 0), end Alignment(1 + t*2, 0), colors base/highlight/base, stops 0.1/0.3/0.6; blendMode srcATop; child Column of FractionallySizedBox placeholder bars (height 14, borderRadius 999) – skeleton loading for Flutter lists and cards.
No external packages: only Flutter SDK – AnimationController, AnimatedBuilder, ShaderMask, LinearGradient.createShader; lightweight and fast; perfect for Flutter Custom Widgets Kit SEO and performance; copy into any Flutter project for loading and emphasis effects.
Use cases: loading states, feature highlights, onboarding focus, premium app feel; reusable _ShimmerPlaceholder and breathing glow builder pattern in lib/src/screens/animations_showcase.dart for Flutter 2026 UI.
Animation lifecycle: initState creates AnimationController, dispose disposes it; SingleTickerProviderStateMixin for one controller; repeat() or repeat(reverse: true) for continuous Flutter animations without Lottie – better bundle size and SEO.

Showcase Screens – Buttons, Cards, Inputs, Animations, Extras

Five tabs in HomeShell: Buttons (Primary, Ghost, Glass), Cards (BlurredInfo, StatCard), Inputs (ModernTextField form), Animations (breathing, shimmer), Extras (ProfileHeader, PricingCard, ToggleRow, PillSegmentedControl).

ButtonsShowcaseScreen: CustomScrollView with SliverToBoxAdapter (title "Buttons", subtitle, Wrap of Chips), SliverList of _SectionCard widgets – Primary Gradient Button (two PrimaryButton side by side), Ghost & Outline Buttons (two GhostButton), Glass Icon Buttons (IconGlassButton x3 with favorite/settings/download icons); each section has title, subtitle and live Flutter widget demo for SEO and UX.
CardsShowcaseScreen: BlurredInfoCard "Pro UI Kit" with tag "Featured", Row of two StatCard (Downloads 12.4K, Rating 4.9), then fullWidth StatCard "Active Users" 3.2K; demonstrates layout variants and real content for Flutter card widget SEO and copy-paste usage.
InputsShowcaseScreen: StatefulWidget with TextEditingController for name/email/password; Card "Sign Up Form" with three ModernTextField (prefixIcon person, mail, lock), ElevatedButton "Create Account", and terms footer; shows Flutter form best practices and focus/shadow behavior for form SEO.
AnimationsShowcaseScreen: breathing glow card and shimmer placeholder card with full descriptions; ExtrasShowcaseScreen: ProfileHeader "Molla Samser", Card with PillSegmentedControl (Mobile/Tablet/Desktop) and two ToggleRow (dark preview, push notifications), PricingCard "Creator Kit" – complete Flutter showcase for all widgets and 100% SEO content.
Each showcase uses CustomScrollView, SliverToBoxAdapter for header text, SliverPadding and SliverList for content; _SectionCard in Buttons for title + subtitle + child; same structure across all five tabs for consistent Flutter Custom Widgets Kit demo and SEO.

Bottom Navigation & Home Shell

HomeShell StatefulWidget with bottom navigation bar and AnimatedSwitcher for five tabs: Buttons, Cards, Inputs, Animations, Extras. Rounded nav bar, theme colors, SafeArea; standard Flutter shell pattern for widget kit demo.

HomeShell: StatefulWidget with _index state; body is AnimatedSwitcher(duration 350ms) showing _pages[_index]; _pages list holds ButtonsShowcaseScreen, CardsShowcaseScreen, InputsShowcaseScreen, AnimationsShowcaseScreen, ExtrasShowcaseScreen – one widget per tab for Flutter Custom Widgets Kit.
BottomNavigationBar: five items with Icons (radio_button_checked_rounded, credit_card_rounded, text_fields_rounded, auto_awesome_rounded, widgets_rounded); labels Buttons, Cards, Inputs, Animations, Extras; selectedItemColor primary, unselectedItemColor onSurface 0.5; showUnselectedLabels false.
Layout: Scaffold with extendBody false, AppBar title "Flutter Custom Widgets Kit", body SafeArea(top: true, bottom: false), bottomNavigationBar wrapped in Padding and ClipRRect borderRadius 999 for pill-shaped nav bar; theme-aware for Flutter Material 3 and SEO.
AppBar: centerTitle, fontWeight w700; no drawer or actions; minimal shell so content is focus; ideal pattern for Flutter widget kit, design system demo, or component gallery with SEO-friendly navigation structure.
Import structure: home_shell.dart imports all five showcase screens; main.dart imports app_theme and home_shell; single entry point for Flutter Custom Widgets Kit app; same card structure (icon, title, description, highlights) used across all feature sections for consistent SEO and UX.

What You Get

Complete Flutter Custom Widgets Kit: pubspec.yaml, lib/main.dart, lib/src/app_theme.dart, home_shell.dart, widgets (primary_button, ghost_button, icon_glass_button, stat_card, blurred_info_card, pricing_card, modern_text_field, toggle_row, profile_header, pill_segmented_control), screens (buttons/cards/inputs/animations/extras_showcase). Educational widget kit by RSK World.

Complete Flutter source: pubspec.yaml (name flutter_widgets_kit, SDK >=3.0.0, cupertino_icons), lib/main.dart (FlutterWidgetsKitApp, MaterialApp theme/darkTheme), lib/src/app_theme.dart, lib/src/home_shell.dart (HomeShell, bottom nav, AnimatedSwitcher), all Dart files ready to copy into your Flutter project for fast UI development.
Widget files: primary_button.dart, ghost_button.dart, icon_glass_button.dart, pill_segmented_control.dart, stat_card.dart, blurred_info_card.dart, pricing_card.dart, modern_text_field.dart, toggle_row.dart, profile_header.dart – each self-contained, theme-aware, with clear parameters for Flutter Custom Widgets Kit reuse and SEO.
Showcase screens: buttons_showcase.dart, cards_showcase.dart, inputs_showcase.dart, animations_showcase.dart, extras_showcase.dart in lib/src/screens/; demonstrate every widget with titles and descriptions; README documents Flutter SDK >= 3.0.0, flutter pub get, flutter run for getting started and SEO.
Technologies: Flutter SDK, Dart 3+, Material 3 (useMaterial3 true), cupertino_icons only – no Lottie, no fl_chart, no shared_preferences; minimal dependencies for maximum Flutter widget kit portability. © 2026 RSK World. Educational and commercial use with attribution.
File count: 10 widget files, 5 showcase screens, app_theme.dart, home_shell.dart, main.dart; test/widget_test.dart included; analysis_options.yaml with flutter_lints; full Flutter project structure for immediate run and SEO-ready documentation.

Usage

Run flutter pub get and flutter run. Use bottom nav to switch between Buttons, Cards, Inputs, Animations and Extras. Copy any widget from lib/src/widgets/ into your project and pass your theme and callbacks. Build for Android, iOS or Web.

Run commands: open project in IDE (VS Code, Android Studio); terminal run flutter pub get then flutter run for device/emulator, or flutter run -d chrome for Flutter web; build APK with flutter build apk, web with flutter build web – standard Flutter workflow for Flutter Custom Widgets Kit demo and deployment.
Navigation: HomeShell StatefulWidget with _index state; BottomNavigationBar five items (Buttons, Cards, Inputs, Animations, Extras); body AnimatedSwitcher duration 350ms showing _pages[_index]; SafeArea, rounded nav bar with theme surface color – Flutter bottom nav pattern for widget kit showcase and SEO-friendly app structure.
Reuse in your app: import package:flutter_widgets_kit/src/widgets/primary_button.dart (or relative path); use PrimaryButton(label: "Get Started", onPressed: () {}, icon: Icons.add); same for StatCard, ModernTextField, etc.; pass Theme or rely on context; copy app_theme.dart for consistent Flutter Material 3 theming and SEO.
Author and support: RSK World | rskworld.in – Flutter Custom Widgets Kit for learning, prototypes, and production Flutter apps; contact for custom widgets, training, or integration; 100% SEO-optimized Flutter UI kit by Molla Samser.
Build targets: flutter run (default device), flutter run -d chrome (web), flutter build apk, flutter build web; output in build/; no native code changes required – standard Flutter Custom Widgets Kit workflow for Android, iOS and Web.

Project Features

Flutter Custom Widgets Kit with buttons, cards, inputs, animations and extras. Material 3 light/dark theme, glassmorphism, gradients, press animations, shimmer and breathing glow. No external UI packages – only Flutter SDK and cupertino_icons.

Ten reusable Flutter widgets: PrimaryButton (gradient CTA, loading, press animation), GhostButton (outline secondary), IconGlassButton (glassmorphism icon), PillSegmentedControl (pill segments), StatCard (KPI + trend), BlurredInfoCard (blur + tag), PricingCard (tier, price, features), ModernTextField (label, focus ring, password toggle), ToggleRow (title + Switch), ProfileHeader (avatar, name, role, location) – all in lib/src/widgets for Flutter Custom Widgets Kit and SEO.
Animations: breathing glow (AnimationController repeat reverse, scale and blur), shimmer skeleton (ShaderMask + gradient sweep), PrimaryButton press scale (GestureDetector + AnimationController 140ms); no Lottie or external animation package – pure Flutter for performance and SEO.
Theme: AppTheme.lightTheme and AppTheme.darkTheme in app_theme.dart; ColorScheme, CardTheme, InputDecorationTheme, ElevatedButtonTheme, ChipTheme; ThemeMode.system in MaterialApp; all widgets use Theme.of(context) for 100% theme consistency and Flutter Material 3 best practices.
Cross-platform: single Flutter codebase runs on Android, iOS, and Web; Flutter 3+, Dart 3+, Material 3; only dependency cupertino_icons; ideal for Flutter UI kit, app template, or learning project with full SEO and production-ready structure.
Summary: ten widgets (buttons, cards, inputs, toggles, profile, segmented control), two animation patterns (breathing, shimmer), one theme file, one shell; everything theme-driven and reusable – Flutter Custom Widgets Kit by RSK World for SEO and real apps.

Credits & Acknowledgments

Flutter Custom Widgets Kit by RSK World. Reusable buttons, cards, inputs and animations with modern 2026 UI. Built with Flutter and Dart for learning and production use.

Flutter Custom Widgets Kit: reusable Flutter buttons, cards, inputs, animations and extras for learning, prototyping, and production apps; free to use with attribution; ideal for Flutter developers seeking Material 3, glassmorphism, and modern 2026 UI components with full SEO value.
RSK World – Creator of Flutter Custom Widgets Kit and educational platform for UI/UX, Flutter, and web development; more projects at rskworld.in for Flutter widgets, dashboards, and templates.
Author: Molla Samser (Founder, RSK World). Website: https://rskworld.in. Email: help@rskworld.in | support@rskworld.in. Phone: +91 93305 39277. Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147. Flutter Custom Widgets Kit © 2026 RSK World.
Third-party credits: Font Awesome – Icons for landing pages; Flutter – Google UI framework; cupertino_icons – Flutter package. Flutter Custom Widgets Kit for educational and commercial use with attribution to RSK World.
License: MIT; use Flutter Custom Widgets Kit in personal and commercial projects; attribution to RSK World and Molla Samser appreciated; no warranty; see LICENSE file in project for full terms – SEO-friendly open-source Flutter widget kit.

Support & Contact

For Flutter Custom Widgets Kit customization, widget requests or Flutter training, please contact us.

Email: help@rskworld.in and support@rskworld.in – Flutter Custom Widgets Kit customization, new widget requests, Flutter integration help, or general Flutter and Dart questions; response for educational and commercial projects.
Phone: +91 93305 39277 – direct contact for Flutter Widgets Kit support, custom widget development, licensing, or training; RSK World, India.
Website: RSKWORLD.in – discover more Flutter projects, UI/UX templates, and educational content by RSK World; download Flutter Custom Widgets Kit and other open-source Flutter UI kits.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147 – RSK World base for Flutter development, support, and training; local and remote Flutter project assistance.
Author: Molla Samser (Founder, RSK World) – creator of Flutter Custom Widgets Kit and other Flutter UI/UX projects; contact for credits, collaboration, or custom Flutter work.
Documentation: README with getting started, project structure, and Flutter SDK requirements; inline code comments in app_theme.dart and widget files for quick understanding and SEO-friendly documentation.
Technical support: get help with Flutter theming, Material 3, animations, glassmorphism, or integrating widgets into your Flutter app; RSK World supports learners and teams using Flutter Custom Widgets Kit.
Feature requests: suggest new Flutter widgets, screens, or theme variants for future Flutter Custom Widgets Kit updates; community feedback helps improve the kit for SEO and real-world Flutter apps.