我们都知道，狂热的日常变得越来越受欢迎。 flutter应用被人们的平稳性所爱。一个这样的示例应用程序是Zerodha的风筝。风筝是印度最大的股票经纪人Zerodha发布的交易应用程序。与此类似，有许多复杂的应用程序扑来。但是，构建复杂的应用程序并不是那么简单。您必须在需要时重新分配代码以维护应用程序的性能。一种这样的重构技术是提取重复的代码/组件并在多个位置重复使用。
在此博客中，我们将学习通过在flutter中构建自定义小部件来替换重复的组件。
什么是自定义小部件
在Flutter中，自定义小部件是指用户定义的小部件，该小部件封装了一组特定的功能或视觉表示。自定义小部件是颤抖应用程序的基础。它们允许开发人员创建可重复使用的UI组件，可在整个应用程序中使用。
如果您从React Native切换，请假设自定义小部件为自定义React组件，而我们称为React中的道具将被称为flutter中的参数。
为什么要自定义小部件
自定义小部件使您能够封装复杂的UI元素，促进代码可重复使用性并增强颤音应用程序的可维护性。开发人员应以多种原因构建自定义小部件。这是一些，
代码可重复使用
它允许开发人员将复杂的功能和外观封装到可重复使用的组件中。创建后，可以在整个应用程序中多次使用自定义小部件，减少代码重复并促进模块化开发方法。
可维护性
它有助于代码库的可维护性。通过封装特定功能或视觉表示形式，自定义小部件会创建关注点的分离。这种分离使您更容易找到与特定UI组件相关的定位，修改和调试代码。
与力一致
它使开发人员能够在其应用程序上定义一致统一的UI设计。
抽象
它提供了一种抽象水平，可以隐藏特定UI元素的实现细节和复杂性。开发人员可以创建高级小部件，以揭示简化的接口并处理内部逻辑，从而使其他开发人员可以使用小部件而不必担心其内部工作。这种抽象促进了模块化，使其更容易理解，测试和维护代码。
构建自定义小部件
让我们开始构建我们的自定义小部件。
克隆仓库
我没有从划痕开始，而是在github中创建了一个flutter应用程序，并在该存储库中添加了重复的代码/组件。让我们从那里开始。
通过运行以下任何一个命令
从github汲取代码git clone https://github.com/5minslearn/Flutter-Custom-Widget.git
git clone [email protected]:5minslearn/Flutter-Custom-Widget.git
默认情况下，它将在主分支中。我要切换到重构分支（您不需要），因为我希望大家都看一下我的初始代码和最终代码。初始代码将在主分支中，最终代码将在重构分支中。
运行以下命令安装所有依赖项。
cd Flutter-Custom-Widget/
flutter pub get
运行应用程序
在Visual Studio代码中打开存储库并旋转模拟器（您也可以连接移动设备）。模拟器启动并运行后，按F5在模拟器中运行应用程序。
在第一次运行中，您的应用程序的视图。
如果您走得那么远，那很棒。
分析代码
让我们看代码。打开lib/main.dart文件。
我们在开始时打电话给我们。这个旋转称为MyHomePage类。
我们走了。我们整个UI的代码。
如果您喜欢编写干净的代码的人，那么您肯定会说这是一个丑陋的代码。这是原因。仔细查看该代码，其中从44到56的线以及58到70的线完全重复了，除了很少的手工挑选单词。例如，Twitter一词已被Instagram替换。
干净的编码器肯定会在添加新功能/功能之前重构此代码。让我们也遵循干净的编码练习。
重构构建自定义小部件
我们必须将文本和按钮提取到单独的组件中。此组件应接受平台并在其参数时启用。我们可以从中取出常见文本。
所以，我们构建自定义小部件的代码如下。
class CustomButton extends StatelessWidget {
final String platform;
final VoidCallback onPressed;
const CustomButton(
{super.key, required this.platform, required this.onPressed});
@override
Widget build(BuildContext context) {
return Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Text("Press the below button to follow me on $platform"),
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text("Pressed Follow on $platform button"),
duration: const Duration(seconds: 1),
),
);
onPressed();
},
child: Text("Follow on $platform"),
)
]));
}
}
正如我们上面讨论的那样，我们浏览了模板文本，并接受平台和打开的参数。我们在需要的任何位置替换平台，并将其称为“显示零食棒的扩展”。
在main.dart文件的末尾添加上述代码。
集成自定义小部件
让我们将自定义小部件集成到我们的代码中。
用以下代码替换第44章，
CustomButton(
platform: 'Twitter',
onPressed: () {
// Open Twitter App
},
),
用以下代码将第58行58替换为70，
CustomButton(
platform: 'Instagram',
onPressed: () {
// Open Instagram App
},
),
立即运行您的应用。
不幸的是，您不会注意到UI的任何变化。但是，您的基础代码已更改。那是什么重构。
引用马丁·福勒（Martin Fowler）
** 重构**是一种纪律处分的技术，用于重组现有的代码，更改其内部结构而不改变其外部行为。
*https://refactoring.com/*
您可以通过查看上述代码提出问题。行号43和50还包含相同的代码（const siziedbox（高度：16），）。您为什么不将其包括在组件中。
如果这个问题确实引起了您的想法，那就太好了。
无需自定义小部件组件包括SIDIED框组件。因为，在主页中添加了小型框组件，以在每个组件之间提供一些空间。每当我们使用此按钮时，我们都必须在小部件的顶部/底部提供一个空间。但是，如果出现这种情况，您可以在自定义小部件中添加大小的窗口小部件。
构建自定义小部件的好处是什么
您不会立即看到直接利益。但是，您将来可能会遇到它。这是您的快速示例。
假设您为客户端构建了此应用程序。它已成为一个复杂的应用程序，您在应用程序中使用了该自定义小部件。该应用程序已发布，人们喜欢使用它。大约六个月后，您的客户以下一版本的更改回到您身边。巨大列表中的项目之一是，我们想出的主题略有变化。替换所有社交媒体推荐按钮以概述形状，然后将颜色更改为greenâ。
这是我们自定义小部件中的一个简单配置更改。但是，如果您尚未在所有20个位置构建自定义小部件并复制/粘贴相同的代码。然后，您必须仔细查看每个地方，并在不触摸其他代码的情况下将其更换。
这些是我们在自定义窗口小部件中只需要更改的2行
OutlinedButton(
style: OutlinedButton.styleFrom(foregroundColor: Colors.green),
如果您没有重构代码，则必须在20个地方进行此更改。
我将代码推到同一Github repo。请参阅Master分支以获取非脱离代码和重构分支以进行重构代码。
笔记
始终为特定用例使用自定义小部件。例如，在我们的情况下，这是针对社交媒体重定向的。该小部件不应在与背景无关的地方使用。如果您这样做，请记住以上情况，客户要求仅更改社交媒体推荐按钮的设计，但是我们的更改将应用于使用该小部件使用的所有其他位置，从而导致意外的错误。始终建议为自定义小部件编写单元测试用例，这将帮助我们较早地减轻错误。
另外一个提示是更可读性的组件命名。这使另一个开发人员仅通过阅读其名称来知道小部件的作用。在我们的情况下，我将其命名为CustomButton，这是没有意义的。相反，最好的替代方案是适合我们用例的社交中相信，socialbutton等。
结论
在此博客中，我们通过删除重复的代码/组件来了解构建自定义小部件的知识。在颤动中构建自定义小部件可促进代码可重复使用，可维护性，一致性，抽象，灵活性和社区协作。自定义小部件是Flutter Developer的工具包中的强大工具，可以创建美丽且功能性的用户界面，同时最大程度地提高效率和可维护性。
希望您喜欢阅读文章。如果您想了解更多有关颤音的信息，请在我的site上订阅我的文章。
最初于2023年6月7日在https://www.gogosoon.com发表。