customizable_widget 0.0.2

UI template to simplify your creation of multi-shapes widgets.

customizable_widget

⬛️ - This Flutter package allows you to use a variety of customizable widgets that are designed to be highly reusable, saving you time in your app development process.

Included Widgets

We provide the following widgets in multiple formats and shapes to easily meet your requirements:

⬛️ AppBar. ⬛️ ElevatedButton. ⬛️ DropdownButton. ⬛️ TextFormField.

These widgets are designed to be flexible and customizable to fit different design needs. If they don't meet your expectations, you're welcome to use the standard Flutter widgets.

Getting Started

Add dependency

Add customizable_widget to your project by including it in your pubspec.yaml file :

dependencies:
  customizable_widget: ^1.0.0

Features

AppBar Customizations

Customize your AppBar with various shapes and features as shown below:

⬛️ Standard Shape. ⬛️ Curvy Shape. ⬛️ Semi-Circular Shape. ⬛️ Oval Shape. ⬛️ Triangle Shape.

CustomAppBar code examples

⬛️ 1

// Custom AppBar with a flexible design allowing for image backgrounds, custom actions, and a search widget.
appBar: CustomAppBar(
  titleText: 'Store', // Title of the AppBar.
  textStyle: const TextStyle(
    fontWeight: FontWeight.bold, // Bold text for the title.
    fontSize: 30, // Font size for the title.
    color: Colors.white, // Color of the title text.
  ),
  height: 120, // Height of the AppBar.
  bottomWidget: SearchWidget(), // Custom widget placed at the bottom of the AppBar.
  showBackButton: true, // Displays a back button on AppBar.
  actions: const [
    Padding(
      padding: EdgeInsets.all(12.0), // Padding around the menu icon.
      child: Icon(Icons.menu), // Menu icon on the right side of AppBar.
    ),
  ],
  backgroundWidget: Image.network(
    'https://example.com/image.jpg', // Background image for the AppBar.
    fit: BoxFit.cover, // Cover fit for the background image to fill the space.
  ),
),

⬛️ 2

// Custom AppBar with a triangle shape design tailored for profile screens.
appBar: CustomAppBar.triangleShape(
  titleText: 'Profile', // Title of the AppBar, displayed prominently.
  textStyle: const TextStyle(
    fontWeight: FontWeight.bold, // Bold weight for the title text to enhance visibility.
    fontSize: 30, // Large font size for clear readability.
    color: Colors.white, // White color for the title text to contrast with the background.
  ),
  height: 120, // Specifies the height of the AppBar, giving ample space for content.
  showBackButton: true, // Includes a back button for navigation.
  actions: const [
    Padding(
      padding: EdgeInsets.all(12.0), // Padding around the menu icon for better touch area.
      child: Icon(Icons.menu), // Menu icon placed on the right for additional options.
    ),
  ],
  backgroundWidget: Image.network(
    'https://th.bing.com/th/id/OIP.TsXboIzd83FRSSPVQMD9QHaEL?w=852&h=480&rs=1&pid=ImgDetMain',
    fit: BoxFit.cover, // Ensures the background image covers the entire AppBar area.
  ),
),

⬛️ 3

// Custom AppBar with a semi-circular design, simple yet effective for titles.
appBar: CustomAppBar.semiCircularShape(
  titleText: 'Hello', // The title displayed in the AppBar.
),

// Custom AppBar with a curvy design, offering a unique aesthetic for the application.
appBar: CustomAppBar.curvyShape(
  titleText: 'Hello', // Sets the title of the AppBar.
),

⬛️ 4

// Custom AppBar with an oval shape, providing a soft and welcoming design.
appBar: CustomAppBar.ovalShape(
  titleText: 'Hello', // Sets the title of the AppBar.
),

ElevatedButton Customizations

Customize your ElevatedButton with different shapes:

CustomElevatedButton code examples

⬛️ 1

// Custom ElevatedButton designed with beveled corners, providing a modern and attractive look.
CustomElevatedButton.beveledCornersShape(
  text: 'Edit', // Display text on the button, which indicates the action to be taken.
  icon: Icons.edit, // Icon that visually represents the action (edit), enhancing user understanding.
  borderRadius: BorderRadius.circular(50), // Large border radius to create rounded, beveled corners.
  onPressed: () {}, // Callback function that defines what happens when the button is pressed.
),

⬛️ 2

// Custom ElevatedButton designed with curved corners to create a smooth and visually appealing interface.
CustomElevatedButton.curvedCornersShape(
  text: 'Edit', // The button's label, clearly indicating its function to users.
  icon: Icons.edit, // Icon accompanying the text, visually representing the editing action.
  borderRadius: BorderRadius.circular(50), // Sets the border radius to achieve a fully rounded look.
  onPressed: () {}, // Callback function that is triggered 
),

⬛️ 3

// Custom ElevatedButton with a stadium shape, providing a modern look with elongated rounded ends.
CustomElevatedButton.textOnlyWithStadiumShape(
  text: 'Edit', // Text displayed on the button, indicating the action that will be performed.
  onPressed: () {}, // Callback function that will be executed
),

DropdownButton Customizations

Customize your DropdownButton to match your app's theme:

// CustomDropdown component for selecting options from a dropdown menu, designed for visual appeal and flexibility.
CustomDropdown<String>(
  items: const [
    DropdownMenuItem(value: "Red", child: Text("Red")), // First dropdown item with 'Red' as the value.
    DropdownMenuItem(value: "Blue", child: Text("Blue")), // Second dropdown item with 'Blue' as the value.
  ],
  value: selectedColor, // Variable that holds the currently selected value from the dropdown.
  icon: const Icon(Icons.color_lens), // Icon to indicate that this dropdown is for selecting a color.
  elevation: 10, // Shadow depth beneath the dropdown to make it stand out visually.
  padding: const EdgeInsets.all(16), // Padding inside the dropdown to space out the content.
  menuBorderRadius: BorderRadius.circular(50), // Rounded corners of the dropdown menu for a smoother look.
  menuItemHeight: 50, // Fixed height for each item in the dropdown menu.
  menuColor: Colors.lightBlue[50], // Background color of the dropdown menu.
  textStyle: const TextStyle(color: Colors.deepPurple, fontSize: 18), // Style of the text in dropdown items.
  dropdownDecoration: BoxDecoration(
    color: Colors.grey[200], // Background color of the dropdown itself.
    borderRadius: BorderRadius.circular(50), // Rounded corners of the dropdown.
  ),
  fittedDropdown: true, // Ensures the dropdown fits its content tightly.
  expandedDropdown: true, // Allows the dropdown to expand to show all items without scrolling.
  onDropdownTapped: () => print("Dropdown tapped"), // Function to call when the dropdown is tapped.
  onChanged: (value) { // Function that updates the state when a new option is selected.
    setState(() {
      selectedColor = value!; // Update the selected color with the new value.
    });
  },
),

TextFormField Customizations

Customize your TextFormField for a cohesive look:

// CustomTextField specifically designed for password entry, enhancing security and user experience.
CustomTextField(
  labelText: 'Password', // Label text that appears above the TextField when it is not focused.
  borderRadius: 20, // Border radius for the TextField, providing rounded corners.
  focusedFieldColor: Colors.green, // Color of the TextField when it is focused, indicating active input.
  prefixIcon: Icons.remove_red_eye, // Icon used to toggle password visibility.
  hideText: true, // Ensures the text is hidden as it is a password field.
  hintText: "Hint", // Hint text that provides a clue about the password expected.
  hintStyle: const TextStyle(color: Colors.grey), // Style for the hint text, subtly suggesting input.
),

Support and Contributions

❤️ Found this project useful? Consider giving it a ⭐ on GitHub and sharing it with your friends via social media.

Contact Info

🔲 LinkedIn : https://www.linkedin.com/in/emran-al-daqaq-627740145

🔲 Facebook : https://www.facebook.com/emran.aldakak?mibextid=ZbWKwL-