8步骤创建您的第一个颤振应用| JFrog - 2022年世界杯赛程时间表

今天的开发人员需要从许多平台构建软件，以便接触到他们的用户。同时保持质量，实现最佳的用户体验。当您需要满足软件开发日益增长的需求时，这可能是一项具有挑战性的任务。这就是Dart和Flutter进入画面的地方。

关于飞镖和扑动

在深入研究技术细节之前，让我们先了解一些背景知识。

Dart和Flutter继续受到开发人员的欢迎，因为它们很容易学习开源开发人员友好的语言。的颤振SDK让你可以轻松地从一个代码库中为Android、iOS和web发布应用程序。在支持所有这些平台的同时，它为开发人员提供了快速的开发体验。Dart是一种编程语言设计用于web和移动应用程序客户端开发。它是由谷歌创建和开发的，也可以用于构建服务器和桌面应用程序。

为了更好地理解Dart和Flutter的好处，这里有一个简单的演示应用程序你可以很容易地利用它Android工作室．让我们来看看它包括了什么。

第1部分:我的第一个Flutter应用程序

开始使用Dart语言很容易。下面的示例演示了独特的Dart语言语法这使得Dart成为开发人员的高需求语言之一。

下面的代码片段允许我们以primarySwatch的绿色显示应用程序标题。

使用Dart的好处之一是您可以轻松地进行更改，保存项目并立即看到更新。例如下面代码片段中的标题和颜色。

示例代码:创建简单的小部件在主干道下面。飞镖文件

小部件构建(BuildContext上下文){返回MaterialApp(标题:“JFrog卡”，主题:theme data (primarySwatch: Colors。绿色，)，home: const my主页(标题:'欢迎使用JFrog安全应用程序')，);}}

另一个好处是能够帮助那些语言新手和有经验的人。Dart社区的开发人员可以使用官方Dart和Flutter公众共享包包库，包括数据库库、路由库和函数库。

下面的示例显示了应用程序的标题、子标题、文本和徽标。它还包括用于安全更新的卡片设计。

示例代码:使用小部件创建JFrog安全漏洞卡。

类JfrogCard扩展StatelessWidget {const JfrogCard({Key?键，需要这个。标题,这一点。副标题= ""，这。mainCardText = "默认文本"，需要这个。supportingText，}): super(key: key);字符串标题;字符串子标题;支持文本;mainCardText;@覆盖小部件构建(BuildContext context){返回卡(抬高:4.0，子:列(子:[ListTile(标题:文本(标题)，副标题:文本(副标题)，尾部:图标(Icons.favorite_outline)，)，容器(高度:200.0，子:中心(子:填充(填充:EdgeInsets.all(8.0))，子:中心(子:文本(mainCardText，样式:TextStyle(fontWeight: fontWeight .))。粗体，fontSize: 20.0，颜色:Colors.white)， textAlign: textAlign。center，)，)，)，)，，，，，，， decoration: const BoxDecoration(borderRadius: borderRadius .all(Radius.circular(20.0))， gradient: LinearGradient(colors: [Color(0xFF40be46)， Color(0xFF000000)]， begin:对齐。bottomCenter, end: align . topcenter)， boxShadow: [boxShadow(颜色:颜色。grey, blurRadius: 12, offset: Offset(0, 6), ), ], )), Container( padding: EdgeInsets.all(16.0), alignment: Alignment.centerLeft, child: Text(supportingText), ), ButtonBar( children: [ TextButton( child: const Text('Remove'), onPressed: () { log('I Was pressed remove'); }, ), TextButton( child: const Text('LEARN MORE'), onPressed: () { log('I Was pressed to learn'); }, ) ], ) ], )); } }

现在，让我们看看如何与您的团队共享此卡片设计JFrog Artifactory作为二进制存储库管理器。

第2部分:JFrog Artifactory作为Pub存储库管理器

为了使这个卡片设计可供任何人使用，我们可以将它作为一个包上传到JFrog Artifactory服务器。要做到这一点，我们需要从创造开始JFrog平台上的新pub存储库．

还没有账户从这里开始免费>

步骤1:在JFrog平台上，点击“快速设置”来创建你的存储库:
步骤2:请按“Set Me Up”来配置Dart客户端：

默认情况下，Remote Pub存储库将指向官方版本Pub.dev的包存储库飞镖而且颤振．这个可靠的公共存储库拥有一个不断增长的生态系统24000包！在开源社区内共享。
了解有关本地、远程和虚拟Pub存储库>的更多信息

步骤3:创建一张“卡片”包(使用上面应用程序示例中的代码)，并将其上传到新的本地存储库，以便其他应用程序可以轻松地重用它。
克隆小部件，包括所有配置(请参阅第2部分目录的应用实例）

小部件构建(BuildContext context){返回卡(抬高:4.0，子:列(子:[ListTile(标题:文本(标题)，副标题:文本(副标题)，尾部:图标(Icons.favorite_outline)，)，容器(高度:200.0，子:中心(子:填充(填充:EdgeInsets.all(8.0))，子:中心(子:文本(mainCardText，样式:TextStyle(fontWeight: fontWeight .))。粗体，fontSize: 20.0，颜色:Colors.white)， textAlign: textAlign。center，)，)，)，)，，，，，，， decoration: const BoxDecoration(borderRadius: borderRadius .all(Radius.circular(20.0))， gradient: LinearGradient(colors: [Color(0xFF40be46)， Color(0xFF000000)]， begin:对齐。bottomCenter, end: align . topcenter)， boxShadow: [boxShadow(颜色:颜色。灰色，blurRadius: 12, offset: offset(0,6)，)，]，))，容器(padding: EdgeInsets.all(16.0)，对齐:对齐。centerLeft，子:文本(supportingText)，)， ButtonBar(子:[TextButton(子:const文本('删除')，onPressed: () {log('我被按下删除');}，)， TextButton(child: const Text('LEARN MORE')， onPressed: () {log('I Was pressed to LEARN ');}，)]，)]，)));｝

请注意中的Card包可以创建版本pubspec这是在我们创建一个新的Flutter项目时自动生成的。例如，要创建具有不同样式的不同卡片版本，请更改主配置文件中的样式并将其保存为pubspec．
pubspec yaml

步骤4:将Card包上传到我们上面创建的Pub-example-localI存储库。使用“Set Me Up”配置来完成此操作。
请注意:使用鉴权创建身份标识在admin用户下。
步骤5:使用deploy命令将软件包上传到您的Artifactory中的私有存储库．
$ dart pub发布
步骤6:使用我们上传的新包作为依赖项。编辑你的pubspec与以下:
```
JFrogCard: hosted: "/artifactory/api/pub/"版本:0.0.1
```
例如:
步骤7:导入JFrogCard到你的main.dart：
步骤8:从Artifactory中的Pub存储库中获取依赖项并运行项目。