customizable_widget 0.0.1

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

customizable_widget

⬛️ - To ensure that you don't waste your time in customizing widgets , you can easily use customizable_widget so that it can be as much as reuseble for you .

⬛️ - In this template, I provide only these widgets (AppBar,ElevatedButton,DropdownButton,TextFormField) in multiple formats & shapes and can be easily used to meet your requirements.

⬛️ - If these widgets don't match your expectations , you can use the ones provided by Flutter 😁.

Get started

Add dependency

dependencies:
  customizable_widget: ^1.0.0

⬛️ - Available AppBar Shapes :

    appBar: CustomAppBar(
  titleText: 'Store',
  textStyle: const TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 30,
    color: Colors.white,
  ),
  height: 120,
  bottomWidget: SearchWidget(),
  showBackButton: true,
  actions: const [
    Padding(
      padding: EdgeInsets.all(12.0),
      child: Icon(Icons.menu),
    ),
  ],
  backgroundWidget: Image.network(
    'https://th.bing.com/th/id/OIP.1r3kaoOqvX-QhkNqvVRa1wHaEK?rs=1&pid=ImgDetMain',
    fit: BoxFit.cover,
  ),
),

appBar: CustomAppBar.triangleShape(
  titleText: 'Profile',
  textStyle: const TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 30,
    color: Colors.white,
  ),
  height: 120,
  showBackButton: true,
  actions: const [
    Padding(
      padding: EdgeInsets.all(12.0),
      child: Icon(Icons.menu),
    ),
  ],
  backgroundWidget: Image.network(
    'https://th.bing.com/th/id/OIP.TsXboIzd83FRSSPVQMD9QHaEL?w=852&h=480&rs=1&pid=ImgDetMain',
    fit: BoxFit.cover,
  ),
),

appBar: CustomAppBar.semiCircularShape(
  titleText: 'Hello',
),

appBar: CustomAppBar.curvyShape(
  titleText: 'Hello',
),

appBar: CustomAppBar.ovalShape(
  titleText: 'Hello',
),

⬛️ - Available ElevatedButton Shapes :

CustomElevatedButton.beveledCornersShape(
  text: 'edit',
  icon: Icons.edit,
  borderRadius: BorderRadius.circular(50),
  onPressed: () {},
),

CustomElevatedButton.curvedCornersShape(
  text: 'edit',
  icon: Icons.edit,
  borderRadius: BorderRadius.circular(50),
  onPressed: () {},
),

CustomElevatedButton.textOnlyWithStadiumShape(
  text: 'edit',
  onPressed: () {},
),

⬛️ - DropdownButton :

CustomDropdown<String>(
  items: const [
    DropdownMenuItem(value: "Red", child: Text("Red")),
    DropdownMenuItem(value: "Blue", child: Text("Blue")),
  ],
  value: selectedColor,
  icon: const Icon(Icons.color_lens),
  elevation: 10,
  padding: const EdgeInsets.all(16),
  menuBorderRadius: BorderRadius.circular(50),
  // menuWidth: Some value,
  menuItemHeight: 50,
  menuColor: Colors.lightBlue[50],
  textStyle: const TextStyle(color: Colors.deepPurple, fontSize: 18),
  dropdownDecoration: BoxDecoration(
    color: Colors.grey[200],
    borderRadius: BorderRadius.circular(50),
  ),
  fittedDropdown: true,
  expandedDropdown: true,
  onDropdownTapped: () => print("dropdown tapped"),
  onChanged: (value) {
    setState(() {
      selectedColor = value!;
    });
  },
),

⬛️ - TextFormField :

CustomTextField(
  labelText: 'Password',
  borderRadius: 20,
  focusedFieldColor: Colors.green,
  prefixIcon: Icons.remove_red_eye,
  hideText: true,
  hintText: "Hint",
  hintStyle: const TextStyle(color: Colors.grey),
),

If you want more customization, you can make your own Template.

super easy ... wasn't it?

❤️ Found this project useful?

If you found this useful, then please 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-