Flutter高度可定制组件插件customizable_widget的使用

customizable_widget

此Flutter包允许您使用各种可高度重用的可定制小部件，从而在应用程序开发过程中节省时间。

包含的小部件

我们提供以下多种格式和形状的小部件以满足您的需求：

• AppBar
• ElevatedButton
• DropdownButton
• TextFormField

这些小部件设计灵活且可定制，以适应不同的设计需求。如果它们不符合您的期望，您可以使用标准的Flutter小部件。

入门指南

添加依赖项

将customizable_widget添加到项目中，请在pubspec.yaml文件中包含它：

dependencies:
  customizable_widget: ^0.0.4

特性

AppBar 自定义

通过各种形状和特性自定义您的AppBar如下所示：

• 标准形状
• 曲线形状
• 半圆形形状
• 椭圆形状
• 三角形形状

CustomAppBar 代码示例

示例1

// 具有灵活设计的自定义AppBar，允许背景图像、自定义操作和搜索小部件。
appBar: CustomAppBar(
  titleText: 'Store', // AppBar的标题。
  textStyle: const TextStyle(
    fontWeight: FontWeight.bold, // 标题的粗体文本。
    fontSize: 30, // 标题的字体大小。
    color: Colors.white, // 标题文本的颜色。
  ),
  height: 120, // AppBar的高度。
  bottomWidget: SearchWidget(), // 放置在AppBar底部的自定义小部件。
  showBackButton: true, // 在AppBar上显示返回按钮。
  actions: const [
    Padding(
      padding: EdgeInsets.all(12.0), // 菜单图标周围的填充。
      child: Icon(Icons.menu), // AppBar右侧的菜单图标。
    ),
  ],
  backgroundWidget: Image.network(
    'https://example.com/image.jpg', // AppBar的背景图像。
    fit: BoxFit.cover, // 背景图像填充空间。
  ),
),

示例2

// 为个人资料屏幕量身定制的具有三角形设计的自定义AppBar。
appBar: CustomAppBar.triangleShape(
  titleText: 'Profile', // 显示在AppBar上的标题。
  textStyle: const TextStyle(
    fontWeight: FontWeight.bold, // 标题文本的粗体权重以增强可见性。
    fontSize: 30, // 大字体尺寸以便于阅读。
    color: Colors.white, // 标题文本的白色颜色以对比背景。
  ),
  height: 120, // 指定AppBar的高度，给内容留出充足的空间。
  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区域。
  ),
),

示例3

// 具有半圆形设计的自定义AppBar，简单但有效的标题。
appBar: CustomAppBar.semiCircularShape(
  titleText: 'Hello', // 显示在AppBar中的标题。
),

示例4

// 提供独特美学的应用程序的自定义AppBar，具有曲线设计。
appBar: CustomAppBar.curvyShape(
  titleText: 'Hello', // 设置AppBar的标题。
),

示例5

// 提供柔和和欢迎设计的自定义AppBar，具有椭圆形状。
appBar: CustomAppBar.ovalShape(
  titleText: 'Hello', // 设置AppBar的标题。
),

ElevatedButton 自定义

通过不同形状自定义您的ElevatedButton：

CustomElevatedButton 代码示例

示例1

// 具有斜角设计的自定义ElevatedButton，提供现代而有吸引力的外观。
CustomElevatedButton.beveledCornersShape(
  text: 'Edit', // 按钮上显示的文本，指示要执行的操作。
  icon: Icons.edit, // 图标表示编辑操作，增强用户理解。
  borderRadius: BorderRadius.circular(50), // 创建圆形斜角的大边框半径。
  onPressed: () {}, // 定义按钮按下时会发生什么的回调函数。
),

示例2

// 具有弯曲角落设计的自定义ElevatedButton，创建平滑且视觉上吸引人的界面。
CustomElevatedButton.curvedCornersShape(
  text: 'Edit', // 按钮的标签，清楚地向用户指示其功能。
  icon: Icons.edit, // 文本旁边的图标，视觉上表示编辑操作。
  borderRadius: BorderRadius.circular(50), // 设置边框半径以实现完全圆形的外观。
  onPressed: () {}, // 触发的回调函数
),

示例3

// 具有体育场形状的自定义ElevatedButton，提供带有拉长圆形末端的现代外观。
CustomElevatedButton.textOnlyWithStadiumShape(
  text: 'Edit', // 显示在按钮上的文本，指示将执行的操作。
  onPressed: () {}, // 将执行的回调函数
),

DropdownButton 自定义

自定义您的DropdownButton以匹配应用程序的主题：

// 用于从下拉菜单中选择选项的CustomDropdown组件，旨在视觉吸引力和灵活性。
CustomDropdown<String>(
  items: const [
    DropdownMenuItem(value: "Red", child: Text("Red")), // 第一个下拉项，值为'Red'。
    DropdownMenuItem(value: "Blue", child: Text("Blue")), // 第二个下拉项，值为'Blue'。
  ],
  value: selectedColor, // 保存当前从下拉列表中选择的值的变量。
  icon: const Icon(Icons.color_lens), // 表示该下拉列表用于选择颜色的图标。
  elevation: 10, // 下拉列表下的阴影深度使其在视觉上突出。
  padding: const EdgeInsets.all(16), // 下拉列表内的填充以分散内容。
  menuBorderRadius: BorderRadius.circular(50), // 下拉菜单的圆角以获得更平滑的外观。
  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 自定义

为一致的外观自定义您的TextFormField：

// 专门设计用于密码输入的CustomTextField，增强安全性和用户体验。
CustomTextField(
  labelText: 'Password', // 当TextField未聚焦时出现在其上方的标签文本。
  borderRadius: 20, // TextField的边框半径，提供圆角。
  focusedFieldColor: Colors.green, // TextField聚焦时的颜色，指示活动输入。
  prefixIcon: Icons.remove_red_eye, // 用于切换密码可见性的图标。
  hideText: true, // 确保文本隐藏因为它是一个密码字段。
  hintText: "Hint", // 提供有关预期密码提示的提示文本。
  hintStyle: const TextStyle(color: Colors.grey), // 提示文本的样式，微妙地建议输入。
),