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

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

关于Dart and Flutter

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

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

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

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

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

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

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

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

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

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

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

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

类JfrogCard扩展StatelessWidget {const JfrogCard({Key?关键，需要这个。标题,这一点。副标题= ""，这。mainCardText = "默认文本"，需要这个。supportingText，}): super(key: key);字符串标题;最后字符串副标题;最后的字符串支持文本;最终字符串mainCardText;@override Widget build(BuildContext context) {return Card(elevation: 4.0, child: Column(children: [ListTile(title: Text(heading)， subtitle: Text(subheading)， trailing: Icon(Icons.favorite_outline)，)， Container(height: 200.0, child: Center(child: Padding(Padding: EdgeInsets.all(8.0))， child: Center(child: Text(mainCardText, style: TextStyle(fontWeight: fontWeight .)))粗体，字体大小:20.0，颜色:Colors.white)，文本:文本。center，)，)，)，，装饰:const BoxDecoration(borderRadius: borderRadius .all(Radius.circular(20.0))，梯度:LinearGradient(colors: [Color(0xFF40be46)， Color(0xFF000000)]， begin: Alignment。bottomCenter, end: align . topcenter)， boxShadow: [boxShadow (color: Colors. topcenter)]。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平台上，点击“Quick Setup”来创建你的存储库:
步骤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 .))。粗体，字体大小:20.0，颜色:Colors.white)，文本:文本。center，)，)，)，，装饰:const BoxDecoration(borderRadius: borderRadius .all(Radius.circular(20.0))，梯度:LinearGradient(colors: [Color(0xFF40be46)， Color(0xFF000000)]， begin: Alignment。bottomCenter, end: align . topcenter)， boxShadow: [boxShadow (color: Colors. topcenter)]。grey, blurRadius: 12, offset: offset (0,6)，)，]，)， Container(padding: EdgeInsets.all(16.0)， align: align .)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 ');}，)]，)]，));｝

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

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