Flutter Widget Catalogue

pub package GitHub stars License: MIT Flutter Compatible Platform


A collection of visual, structural, platform-adaptive, and interactive widgets to help you build beautiful and functional Flutter apps faster.
🎯 100% Dart | πŸ’™ Flutter-ready | βœ… Easy to use | 🧩 Modular components


✨ Features

πŸ”˜ Buttons

  • Social Auth Buttons (Google, Facebook, Apple, etc.)
  • Rounded Buttons
  • Icon Buttons
  • Line Buttons
  • Gradient Buttons
  • Many more…

πŸ”„ Custom Switch

Highly customizable Flutter switch widget:

  • Adjustable height, width, toggle size
  • Borders, colors, radius, icons, labels

πŸ’  Neumorphic UI Kit

Ready-to-use Neumorphic-styled widgets:

  • Buttons, Switches, Containers, Sliders, Texts, Icons
  • Checkboxes, Toggles, Indicators, Range Sliders, and more

πŸ”€ Text Fields

Fully customizable and themeable text input fields:

  • Outline, filled, underlined, or borderless styles
  • Support for icons, hint text, labels
  • Password visibility toggle, character counter, input formatter support
  • Focus, validation, and keyboard behavior control

πŸ“¦ Installation

Add the dependency to your pubspec.yaml:

dependencies:
  flutter_widget_catalogue: <latest-version>

Then import it:

import 'package:flutter_widget_catalogue/flutter_widget_catalogue.dart';

πŸ–ΌοΈ Screenshots

Neumorphic Widgets

Buttons

Switch

TextField


πŸ§ͺ Usage

Buttons Example

SuccessButton(title: "Success Button", onPressed: () {});
ButtonWithIcon(
  icon: Icons.local_cafe,
  title: "Icon Button",
  color: Colors.white,
  buttonColor: Colors.cyan,
  onPressed: () {},
);
GradientButton(
  onPressed: () {},
  splashColor: Colors.orange,
  colors: [Colors.red, Colors.orange],
  title: "Gradient Button",
);

Switch Example

FlutterSwitch(
  width: 90.0,
  height: 45.0,
  toggleSize: 38.0,
  value: status,
  borderRadius: 24.0,
  padding: 2.0,
  toggleColor: Colors.white,
  switchBorder: Border.all(color: Colors.blueAccent, width: 3.0),
  activeColor: Colors.cyan,
  inactiveColor: Colors.grey.shade400,
  onToggle: (val) {
    setState(() {
      status = val;
    });
  },
);

TextField Example

FlutterTextField(
  borderRadius: 50,
  hintText: "Fill Color",
  hintStyling: TextStyle(color: Colors.black),
  readOnly: false,
  fillColor: Colors.pink,
  borderColor: Colors.transparent,
  cursorColor: Colors.black,
);
FlutterTextField(
  iconBackgroundColor: Colors.black,
  borderRadius: 20,
  customTextFieldIcon: Icon(
  Icons.lock,
  color: Colors.black,),
  hintText: "Enter your password",
  isPasswordField: true,
  isIconShow: true,
  readOnly: false,
  fillColor: Colors.white,
  borderColor: Colors.black,
  cursorColor: Colors.black,
  leadingIconColor: Colors.black,
  labelName: "Password",
);
FlutterTextField(
  isIconShow: false,
  iconBackgroundColor: Colors.white10,
  borderRadius: 30,
  isNumber: true,
  hintText: "Enter your number",
  readOnly: false,
  borderColor: Colors.yellow,
  labelName: "Phone number",
  labelNameTextStyle: const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.w600),
);

βœ… Platform Support

Platform Supported
Android βœ…
iOS βœ…
Web βœ…

πŸ“Œ Changelog

Please see the CHANGELOG.md for a list of recent changes.


πŸ‘¨β€πŸ’» Contributors


πŸ“ƒ License

This project is licensed under the MIT License.

Libraries

Buttons/Module/BoostrapButtons/danger_button
Buttons/Module/BoostrapButtons/dark_button
Buttons/Module/BoostrapButtons/disabled_button
Buttons/Module/BoostrapButtons/info_button
Buttons/Module/BoostrapButtons/primary_button
Buttons/Module/BoostrapButtons/secondary_button
Buttons/Module/BoostrapButtons/secoundary_button
Buttons/Module/BoostrapButtons/success_button
Buttons/Module/BoostrapButtons/warning_button
Buttons/Module/button_with_icon
Buttons/Module/custom_buttons
Buttons/Module/floating_icon_button
Buttons/Module/gradiant_button
Buttons/Module/LineButtons/danger_line_button
Buttons/Module/LineButtons/default_line_button
Buttons/Module/LineButtons/info_line_button
Buttons/Module/LineButtons/line_button
Buttons/Module/LineButtons/primary_line_button
Buttons/Module/LineButtons/secoundary_line_button
Buttons/Module/LineButtons/success_line_button
Buttons/Module/LineButtons/warning_line_button
Buttons/Module/rounded_button
Buttons/Module/rounded_button_with_icon
Buttons/Module/SocialButtons/apple_signin_button
Buttons/Module/SocialButtons/email_signin_button
Buttons/Module/SocialButtons/facebook_button
Buttons/Module/SocialButtons/facebook_signin_button
Buttons/Module/SocialButtons/github_button
Buttons/Module/SocialButtons/github_signin_button
Buttons/Module/SocialButtons/google_button
Buttons/Module/SocialButtons/google_signin_button
Buttons/Module/SocialButtons/instagram_button
Buttons/Module/SocialButtons/instagram_signin_button
Buttons/Module/SocialButtons/linkedin_button
Buttons/Module/SocialButtons/linkedin_singin_button
Buttons/Module/SocialButtons/microsoft_button
Buttons/Module/SocialButtons/microsoft_signin_button
Buttons/Module/SocialButtons/pinterest_button
Buttons/Module/SocialButtons/pinterest_signin_button
Buttons/Module/SocialButtons/tiktok_signin_button
Buttons/Module/SocialButtons/tumblr_signin_button
Buttons/Module/SocialButtons/twitter_button
Buttons/Module/SocialButtons/twitter_signin_button
flutter_widget_catalogue
Neumorphic/Module/colors
Neumorphic/Module/decoration/cache/abstract_neumorphic_painter_cache
Neumorphic/Module/decoration/cache/neumorphic_emboss_painter_cache
Neumorphic/Module/decoration/cache/neumorphic_painter_cache
Neumorphic/Module/decoration/neumorphic_box_decoration_helper
Neumorphic/Module/decoration/neumorphic_decoration_painter
Neumorphic/Module/decoration/neumorphic_decorations
Neumorphic/Module/decoration/neumorphic_emboss_decoration_painter
Neumorphic/Module/decoration/neumorphic_text_decoration_painter
Neumorphic/Module/decoration/neumorphic_text_decorations
Neumorphic/Module/light_source
Neumorphic/Module/neumorphic_box_shape
Neumorphic/Module/neumorphic_icons
Neumorphic/Module/shape
Neumorphic/Module/shape/beveled_path_provider
Neumorphic/Module/shape/circle_path_provider
Neumorphic/Module/shape/neumorphic_path_provider
Neumorphic/Module/shape/path/flutter_logo_path_provider
Neumorphic/Module/shape/rect_path_provider
Neumorphic/Module/shape/rrect_path_provider
Neumorphic/Module/shape/stadium_path_provider
Neumorphic/Module/theme/app_bar
Neumorphic/Module/theme/inherited_neumorphic_theme
Neumorphic/Module/theme/neumorphic_theme
Neumorphic/Module/theme/theme
Neumorphic/Module/theme/theme_wrapper
Neumorphic/Module/widget/animation/animated_scale
Neumorphic/Module/widget/app
Neumorphic/Module/widget/app_bar
Neumorphic/Module/widget/back_button
Neumorphic/Module/widget/background
Neumorphic/Module/widget/button
Neumorphic/Module/widget/checkbox
Neumorphic/Module/widget/clipper/neumorphic_box_shape_clipper
Neumorphic/Module/widget/close_button
Neumorphic/Module/widget/container
Neumorphic/Module/widget/floating_action_button
Neumorphic/Module/widget/icon
Neumorphic/Module/widget/indicator
Neumorphic/Module/widget/progress
Neumorphic/Module/widget/radio
Neumorphic/Module/widget/range_slider
Neumorphic/Module/widget/slider
Neumorphic/Module/widget/switch
Neumorphic/Module/widget/text
Neumorphic/Module/widget/toggle
Switch/switch
TextField/text_field