{"id":1706,"date":"2020-09-04T12:18:19","date_gmt":"2020-09-04T10:18:19","guid":{"rendered":"https:\/\/blog.besharp.it\/?p=1706"},"modified":"2021-03-18T16:22:29","modified_gmt":"2021-03-18T15:22:29","slug":"build-your-own-file-hosting-application-with-flutter-amplify-and-aws","status":"publish","type":"post","link":"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/","title":{"rendered":"Build your own mobile file hosting application with Flutter,  Amplify, and AWS."},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Nowadays <\/span><b>Flutter<\/b><span style=\"font-weight: 400;\"> is becoming more and more recognized as a viable solution for making <\/span><b>mobile cross-platform<\/b><span style=\"font-weight: 400;\"> applications. Also, <\/span><b>AWS Amplify<\/b><span style=\"font-weight: 400;\"> is rapidly gaining the attention of the developer community as it makes it incredibly simple to setup applications <\/span><b>without worrying about backend infrastructure<\/b><span style=\"font-weight: 400;\">, as the library does that for you.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Recently these two frameworks<\/span><b> joined forces<\/b><span style=\"font-weight: 400;\"> and the first release of <\/span><b>Amplify for Flutter<\/b><span style=\"font-weight: 400;\"> has been put online for developers to test out, with support for <\/span><b>Amazon Cognito<\/b><span style=\"font-weight: 400;\">, <\/span><b>AWS S3,<\/b><span style=\"font-weight: 400;\"> and <\/span><b>Pinpoint<\/b><span style=\"font-weight: 400;\"> for logging.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Being eager to try it out, we created a Proof-of-Concept to show how well these libraries work together. Following we present how to develop an<\/span><b> AWS S3 powered<\/b><span style=\"font-weight: 400;\"> dropbox-like application with <\/span><b>Login<\/b><span style=\"font-weight: 400;\"> capabilities for <\/span><b>mobile devices<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As a bonus, we also propose a simple configuration for managing your CI\/CD pipeline using <\/span><b>Travis CI. <\/b><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The project can be created step by step following the guidelines provided or by directly downloading the entire solution from <a href=\"https:\/\/github.com\/besharpsrl\/flutter-amplify-demo\" target=\"_blank\" rel=\"noopener noreferrer\">our <\/a><\/span><b>Github repository.<\/b><\/p>\n\n\n\n<p>Let\u2019s get started!<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Setup your environment<\/h1>\n\n\n\n<p>In order to start developing applications in Flutter, some preliminary steps are required. You can follow the instructions provided below to set up your environment with all the required tools.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">AWS CLI with a valid account for using Amplify<\/h2>\n\n\n\n<p>Before doing anything else be sure to create an appropriate account on AWS. Amplify needs access to the following cloud resources:<\/p>\n\n\n\n<ul><li>AppSync&nbsp;<\/li><li>API Gateway&nbsp;<\/li><li>CloudFormation&nbsp;<\/li><li>CloudFront<\/li><li>Cognito<\/li><li>DynamoDB<\/li><li>IAM<\/li><li>Lambda<\/li><li>S3<\/li><li>Amplify.<\/li><\/ul>\n\n\n\n<p>Therefore here is a simple AWS Policy with the set of rules you need in order to run Amplify:<\/p>\n\n\n\n<pre>{\n    \"Version\": \"2012-10-17\",\n    \"Statement\": [\n        {\n            \"Sid\": \"VisualEditor0\",\n            \"Effect\": \"Allow\",\n            \"Action\": [\n                \"appsync:*\",\n                \"apigateway:POST\",\n                \"apigateway:DELETE\",\n                \"apigateway:PATCH\",\n                \"apigateway:PUT\",\n                \"cloudformation:CreateStack\",\n                \"cloudformation:CreateStackSet\",\n                \"cloudformation:DeleteStack\",\n                \"cloudformation:DeleteStackSet\",\n                \"cloudformation:DescribeStackEvents\",\n                \"cloudformation:DescribeStackResource\",\n                \"cloudformation:DescribeStackResources\",\n                \"cloudformation:DescribeStackSet\",\n                \"cloudformation:DescribeStackSetOperation\",\n                \"cloudformation:DescribeStacks\",\n                \"cloudformation:UpdateStack\",\n                \"cloudformation:UpdateStackSet\",\n                \"cloudfront:CreateCloudFrontOriginAccessIdentity\",\n                \"cloudfront:CreateDistribution\",\n                \"cloudfront:DeleteCloudFrontOriginAccessIdentity\",\n                \"cloudfront:DeleteDistribution\",\n                \"cloudfront:GetCloudFrontOriginAccessIdentity\",\n                \"cloudfront:GetCloudFrontOriginAccessIdentityConfig\",\n                \"cloudfront:GetDistribution\",\n                \"cloudfront:GetDistributionConfig\",\n                \"cloudfront:TagResource\",\n                \"cloudfront:UntagResource\",\n                \"cloudfront:UpdateCloudFrontOriginAccessIdentity\",\n                \"cloudfront:UpdateDistribution\",\n                \"cognito-identity:CreateIdentityPool\",\n                \"cognito-identity:DeleteIdentityPool\",\n                \"cognito-identity:DescribeIdentity\",\n                \"cognito-identity:DescribeIdentityPool\",\n                \"cognito-identity:SetIdentityPoolRoles\",\n                \"cognito-identity:UpdateIdentityPool\",\n                \"cognito-idp:CreateUserPool\",\n                \"cognito-idp:CreateUserPoolClient\",\n                \"cognito-idp:DeleteUserPool\",\n                \"cognito-idp:DeleteUserPoolClient\",\n                \"cognito-idp:DescribeUserPool\",\n                \"cognito-idp:UpdateUserPool\",\n                \"cognito-idp:UpdateUserPoolClient\",\n                \"dynamodb:CreateTable\",\n                \"dynamodb:DeleteItem\",\n                \"dynamodb:DeleteTable\",\n                \"dynamodb:DescribeTable\",\n                \"dynamodb:PutItem\",\n                \"dynamodb:UpdateItem\",\n                \"dynamodb:UpdateTable\",\n                \"iam:CreateRole\",\n                \"iam:DeleteRole\",\n                \"iam:DeleteRolePolicy\",\n                \"iam:GetRole\",\n                \"iam:GetUser\",\n                \"iam:PassRole\",\n                \"iam:PutRolePolicy\",\n                \"iam:UpdateRole\",\n                \"lambda:AddPermission\",\n                \"lambda:CreateFunction\",\n                \"lambda:DeleteFunction\",\n                \"lambda:GetFunction\",\n                \"lambda:GetFunctionConfiguration\",\n                \"lambda:InvokeAsync\",\n                \"lambda:InvokeFunction\",\n                \"lambda:RemovePermission\",\n                \"lambda:UpdateFunctionCode\",\n                \"lambda:UpdateFunctionConfiguration\",\n                \"s3:*\",\n                \"amplify:*\"\n            ],\n            \"Resource\": \"*\"\n        }\n    ]\n}\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Attach the policy to a user with <\/span><b>Programmatic Access<\/b><span style=\"font-weight: 400;\">, <\/span><b>take note of the access and secret key<\/b><span style=\"font-weight: 400;\">. <\/span><span style=\"font-weight: 400;\">If you are not confident creating an AWS Policy on your own, <a href=\"https:\/\/docs.aws.amazon.com\/apigateway\/latest\/developerguide\/api-gateway-create-and-attach-iam-policy.html\" target=\"_blank\" rel=\"noopener noreferrer\">check this link <\/a><\/span><span style=\"font-weight: 400;\">or choose one of the many guides available online<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p>A side note: it is advisable to remove the user as soon as Amplify has completed creating all the resources, to avoid leaving potential security breaches.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The next step is to configure AWS CLI on your computer. <a href=\"https:\/\/aws.amazon.com\/cli\/\" target=\"_blank\" rel=\"noopener noreferrer\">Download it<\/a> <\/span><span style=\"font-weight: 400;\">choosing the appropriate installer for your OS. Install it and then in your terminal of choice type: <\/span><strong>aws configure<\/strong>.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Use the <\/span><b>Access <\/b><span style=\"font-weight: 400;\">and <\/span><b>Secret keys<\/b><span style=\"font-weight: 400;\"> you\u2019ve taken note of when prompted and the rest leave it as default.<\/span><\/p>\n\n\n\n<p>With all this information filled up, you are now able to install Flutter and Amplify correctly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Install Flutter and configure your first project<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">We managed to install and launch Flutter without any difficulty by following <a href=\"https:\/\/flutter.dev\/docs\/get-started\/install\" target=\"_blank\" rel=\"noopener noreferrer\">this guide<\/a><\/span><span style=\"font-weight: 400;\">. We chose MacOS and followed the instructions,&nbsp; setting up everything for working with <a href=\"https:\/\/developer.android.com\/studio\" target=\"_blank\" rel=\"noopener noreferrer\">Android Studio<\/a><\/span><span style=\"font-weight: 400;\">, but you can use IntelliJ as well. After installing the framework, we connect a test phone and run <\/span><span style=\"font-weight: 400;\">flutter devices<\/span><span style=\"font-weight: 400;\"> in the terminal to verify that it\u2019s found correctly.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Create a new <\/span><b>Flutter project<\/b><span style=\"font-weight: 400;\"> from the Android Studio menu and select <\/span><b>Flutter Application<\/b><span style=\"font-weight: 400;\">. Compile the required options and let the IDE create the boilerplate for you.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Select your phone and <\/span><b>main.dart<\/b><span style=\"font-weight: 400;\"> file and press play like in figure:<\/span><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"30\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/flutter_application.png\" alt=\"flutter application press play\" class=\"wp-image-1686\"\/><\/figure><\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">After compiling you\u2019ll see the demo app working. Now let\u2019s continue by configuring <\/span><b>AWS Amplify<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuring Amplify for Flutter<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Amplify has now released a specific version of its library to work directly with Flutter, written in <\/span><a href=\"https:\/\/dart.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Dart<\/b><\/a><span style=\"font-weight: 400;\">, and modularized so you can download and use only the module you need.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">We followed the <a href=\"https:\/\/docs.amplify.aws\/start\/getting-started\/setup\/q\/integration\/flutter\" target=\"_blank\" rel=\"noopener noreferrer\">official Amplify guide for Flutter<\/a>:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">This guide helps configuring Amplify and complete all preliminary steps (installing the library, configuring the user, etc.) in order to do an <\/span><b><i>amplify push<\/i><\/b><span style=\"font-weight: 400;\"> in the terminal to obtain <\/span><span style=\"font-weight: 400;\">amplifyconfiguration.dart<\/span><b>. <\/b><span style=\"font-weight: 400;\">This file is fundamental as it contains <\/span><b>all the sensitive information and the configuration for your Amplify solution<\/b><span style=\"font-weight: 400;\"> and also all the data we need when adding Amplify plugins to the Flutter solution. Keep it always safe!<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A couple of notes about Amplify Auth<\/h3>\n\n\n\n<p>When installing amplify with the intention of using Cognito SignIn and SignUp procedures pay attention to these details to avoid having unwanted behaviors:<\/p>\n\n\n\n<ul><li><span style=\"font-weight: 400;\">Launch <\/span><b>amplify init <\/b><span style=\"font-weight: 400;\">and<\/span><b> amplify configure <\/b><span style=\"font-weight: 400;\">inside the <\/span><b>flutter project directory<\/b><span style=\"font-weight: 400;\">. If everything is ok, amplifyconfiguration.dart<\/span> <span style=\"font-weight: 400;\">will be created inside the <\/span><b>lib<\/b><span style=\"font-weight: 400;\"> directory.<\/span><\/li><li><span style=\"font-weight: 400;\">Be sure to configure both analytics and auth with amplify add analytics and amplify add auth. You\u2019ll need both to be sure to have everything configured correctly.<\/span><\/li><li><span style=\"font-weight: 400;\">Use <\/span><b>flutter clean<\/b><span style=\"font-weight: 400;\"> in the terminal and push to your device a clean .apk to be sure that all the updates are seen correctly.<\/span><\/li><\/ul>\n\n\n\n<p>To do a preliminary check we tried their demo on top of our existing project to be sure that everything was defined as it should. After that, we started developing our Proof-of-Concept!\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Let\u2019s build our dropbox-like mobile app!<\/h2>\n\n\n\n<p>First thing first: when we first tried Flutter and Dart, we found that it is very similar to how ReactNative works, in terms of structuring applications, that is pretty much no structure at all ? . <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bring order to Flutter<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">In order to keep the project as structured as possible, we wrote our project with <\/span><b>Angular<\/b><span style=\"font-weight: 400;\"> in mind: we opted to divide code by functionalities following directives of <\/span><a href=\"https:\/\/airbrake.io\/blog\/software-design\/domain-driven-design\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Domain Driven Design<\/b><\/a><span style=\"font-weight: 400;\">. Removing the UI part of the dart files from the main widgets and moving it in some specialized classes to keep code more <\/span><b>DRY<\/b><span style=\"font-weight: 400;\"> and <\/span><b>Clean. <\/b><span style=\"font-weight: 400;\">Let\u2019s see it with a simplified example:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"198\" height=\"192\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed-59.png\" alt=\"file .dart example\" class=\"wp-image-1688\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Like for Angular, we defined a package for a <\/span><b>Domain<\/b><span style=\"font-weight: 400;\">, in this case <\/span><b>Auth. <\/b><span style=\"font-weight: 400;\">Inside we have defined a package for <\/span><b>a layout file<\/b><span style=\"font-weight: 400;\"> and one for every \u201c<\/span><b>component<\/b><span style=\"font-weight: 400;\">\u201d (login and signup). For every component, we defined 2 files: one for the actual logic and another one suffixed with <\/span><b>.ui<\/b><span style=\"font-weight: 400;\"> to contain the graphical composition. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Let\u2019s check some code; inside <\/span><b>login.dart<\/b><span style=\"font-weight: 400;\"> we have:<\/span><\/p>\n\n\n\n<pre>\/\/ Call this when drawing component graphics\n@override\nWidget build(BuildContext context) {\n return loginUi(this);\n}\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">We can see that there is no graphic here, instead, we call the <\/span><b>loginUi class<\/b><span style=\"font-weight: 400;\"> passing our <\/span><b>State&lt;Login&gt;<\/b><span style=\"font-weight: 400;\"> class <\/span><b>LoginState<\/b><span style=\"font-weight: 400;\"> with <\/span><b>this<\/b><span style=\"font-weight: 400;\">. Now let\u2019s see <\/span><b>login.ui.dart<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<pre>UiBuilder<loginstate> loginUi = (state) =&gt; Container(\n child: Stack(\n     children: <widget>[\n\t...\n     ]\n )\n);\n<\/widget><\/loginstate><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">We declared our \u201cgraphical file\u201d as <\/span><b>UiBuilder&lt;LoginState&gt; loginUi = (state) =&gt; Container(child: \u2026 <\/b><span style=\"font-weight: 400;\">where <\/span><b>UiBuilder<\/b><span style=\"font-weight: 400;\"> is another helper we defined (and we\u2019ll see it in a moment) and that \u201ccast\u201d to LoginState passing the <\/span><b>state<\/b><span style=\"font-weight: 400;\"> variable to the method. With this approach, we can build the graphics separately from the logic file with also having access to <\/span><b>all the variables<\/b><span style=\"font-weight: 400;\"> we declare in <\/span><b>login.dart<\/b><span style=\"font-weight: 400;\"> inside the <\/span><b>LoginState<\/b><span style=\"font-weight: 400;\"> class!<\/span>\n\n<span style=\"font-weight: 400;\">We have also declared for this purpose a <\/span><b>core<\/b><span style=\"font-weight: 400;\"> package<\/span> <span style=\"font-weight: 400;\">which contains the UiBuilder implementation:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"151\" height=\"76\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed-60.png\" alt=\"package core containing UiBuilder implementation\" class=\"wp-image-1690\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Let\u2019s see inside <\/span><b>ui-builder.dart<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<pre>import 'package:flutter\/material.dart';\ntypedef UiBuilder<t> = Widget Function(T context);\n<\/t><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Nothing more than defining a <\/span><b>new type<\/b><span style=\"font-weight: 400;\"> (UiBuilder) which refers to a function that returns a <\/span><b>Widget<\/b><span style=\"font-weight: 400;\"> (for the graphics) with a context that depends explicitly on the generic <\/span><b>T<\/b><span style=\"font-weight: 400;\">, with this we have created a clean way to separate logic from graphics!<\/span>\n\n<span style=\"font-weight: 400;\">Just for completeness here is the layout file <\/span><b>login_layout.dart<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<pre>import 'package:flutter\/material.dart';\n\nclass LoginLayout extends StatefulWidget {\n\n final Widget child;\n\n LoginLayout({ this.child, });\n\n }\n\nclass LoginLayoutState extends State<loginlayout> {\n @override\n Widget build(BuildContext context) {\n   return Container(\n\u2026\n        appBar: null,\n       body: \n...\n                     this.widget.child\n...\n   );\n }\n}\n<\/loginlayout><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Here the 2 important elements are the <\/span><b>constructor<\/b> <span style=\"font-weight: 400;\">LoginLayout({ <\/span><b>this<\/b><span style=\"font-weight: 400;\">.<\/span><b>child<\/b><span style=\"font-weight: 400;\">, }); <\/span><span style=\"font-weight: 400;\">where we ask for a <\/span><span style=\"font-weight: 400;\">&nbsp;<\/span><b>final <\/b><span style=\"font-weight: 400;\">Widget <\/span><b>child<\/b><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">(The <\/span><b>Login <\/b><span style=\"font-weight: 400;\">class), then we inject this variable into the <\/span><b>body<\/b><span style=\"font-weight: 400;\"> of the layout with <\/span><b>this<\/b><span style=\"font-weight: 400;\">.<\/span><b>widget<\/b><span style=\"font-weight: 400;\">.<\/span><b>child <\/b><span style=\"font-weight: 400;\">to include its graphics. Finally, when we want to show this component with its layout we can use <\/span><span style=\"font-weight: 400;\">LoginLayout(child: Login())<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Project structure<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">We decided to make an application where a user can sign up in order to gain access to a personal space on S3 to upload and download files; therefore we have defined <\/span><b>2 domains<\/b><span style=\"font-weight: 400;\">: Authentication and S3 management. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The first one contains <\/span><b>login <\/b><span style=\"font-weight: 400;\">and <\/span><b>signup<\/b><span style=\"font-weight: 400;\"> components, while the second one is a component that manages <\/span><b>upload<\/b><span style=\"font-weight: 400;\">, <\/span><b>download<\/b><span style=\"font-weight: 400;\">, <\/span><b>delete,<\/b><span style=\"font-weight: 400;\"> and <\/span><b>list <\/b><span style=\"font-weight: 400;\">actions over our application\u2019s bucket.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Building the Login and Signup widgets and connecting them with Cognito<\/h3>\n\n\n\n<p>At first, we wanted to build the login and signup features to let users register and then log in to use the application. As a prerequisite, we followed the amplify guide about analytics first and then for authorization as mentioned before.<\/p>\n\n\n\n<p>Inside the project\u2019s directory we simply executed:<\/p>\n\n\n\n<pre>amplify add analytics<\/pre>\n\n\n\n<p>With the default parameters. After that, we configured login and signup capabilities with<\/p>\n\n\n\n<pre>amplify add auth<\/pre>\n\n\n\n<p>Due to the nature of the POC we left the default parameters like below:<\/p>\n\n\n\n<pre>? Do you want to use the default authentication and security configuration?\n    `Default configuration`\n? How do you want users to be able to sign in?\n    `Username`\n? Do you want to configure advanced settings?\n    `No, I am done.`\n<\/pre>\n\n\n\n<p>Then we pushed the configuration online using the user we prepared in the preliminary phase with:<\/p>\n\n\n\n<pre>amplify push<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">In this phase, it is advisable to run a <\/span><b>flutter clean<\/b><span style=\"font-weight: 400;\"> and a <\/span><b>redeploy <\/b><span style=\"font-weight: 400;\">of the application on the phone to be sure that the configuration is updated on the device.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Having the configuration pushed online means that we have an <\/span><b>S3 bucket with the amplify application<\/b><span style=\"font-weight: 400;\">, a <\/span><b>user pool, <\/b><span style=\"font-weight: 400;\">and an <\/span><b>identity pool<\/b><span style=\"font-weight: 400;\"> on AWS Cognito. Those can be left untouched as they are.<\/span><\/p>\n\n\n\n<p>Now for the code part, we\u2019ll show you the most interesting pieces, given that the entire project is available on our Github repository.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Login<\/strong><\/h4>\n\n\n\n<p>First of all we use this piece of code to identify the login form:\n<\/p>\n\n\n\n<pre>final formKey = GlobalKey<formstate>();\n<\/formstate><\/pre>\n\n\n\n<p>This is necessary so we can validate all the form controls with a single line of code:<\/p>\n\n\n\n<pre>\/\/ Validate the form with this line...\nif (formKey.currentState.validate()) {<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">To access form controls\u2019 data we define objects of type <\/span><b>TextEditingController<\/b><span style=\"font-weight: 400;\"> like these:<\/span><\/p>\n\n\n\n<pre>final usernameController = TextEditingController();\nfinal passwordController = TextEditingController();\n<\/pre>\n\n\n\n<p>To log the user in we use the standard Amplify\u2019s method as per documentation:<\/p>\n\n\n\n<pre>SignInResult res = await Amplify.Auth.signIn(\n    username: usernameController.text.trim(),\n    password: passwordController.text.trim(),\n);\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">And to navigate to the <\/span><b>signup<\/b><span style=\"font-weight: 400;\"> or the <\/span><b>s3<\/b> <b>page<\/b><span style=\"font-weight: 400;\"> we use:<\/span><\/p>\n\n\n\n<pre>Navigator.push(context, MaterialPageRoute(builder: (context) =&gt; LoginLayout(child: Signup())));\nNavigator.push(context, MaterialPageRoute(builder: (context) =&gt; S3ViewerLayout(child: S3Viewer())));\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">As we said before we pass the correct <\/span><b>layout<\/b><span style=\"font-weight: 400;\"> to the <\/span><b>MaterialPageRoute<\/b><span style=\"font-weight: 400;\"> specifying the <\/span><b>component<\/b><span style=\"font-weight: 400;\"> we want.<\/span>\n\n<span style=\"font-weight: 400;\">Also in order to <\/span><b>notify<\/b><span style=\"font-weight: 400;\"> the <\/span><b>graphic <\/b><span style=\"font-weight: 400;\">that the state of the application is changed we use Flutter\u2019s method <\/span><b>setState:<\/b><\/p>\n\n\n\n<pre>setState(() {\n    loggingIn = false;\n});\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">For the Ui part, let\u2019s take a look at<\/span><b> login.ui.dart<\/b><span style=\"font-weight: 400;\">; we assign the <\/span><b>formKey<\/b><span style=\"font-weight: 400;\"> to the Form object:<\/span><\/p>\n\n\n\n<pre>child: Form(\n    key: state.formKey,\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">We have also defined two shared components to help standardize the graphics around the application: <\/span><b>roundedTextFormField<\/b><span style=\"font-weight: 400;\"> and <\/span><b>roundedRectButton;<\/b><span style=\"font-weight: 400;\"> they are defined in a <\/span><b>shared <\/b><span style=\"font-weight: 400;\">namespace. Just for the sake of curiosity let\u2019s see one of these:<\/span><\/p>\n\n\n\n<pre>import 'package:flutter\/material.dart';\n\nWidget roundedTextFormField(TextEditingController controller, String hintText, Color mainColor, Color backColor, Function validation, obscured) {\n return Padding(\n     padding: EdgeInsets.only(bottom: 10, left: 50, right: 50),\n     child: TextFormField(\n         obscureText: obscured,\n         controller: controller,\n         validator: (value) =&gt; validation(value),\n         style: TextStyle(color: mainColor),\n         decoration: new InputDecoration(\n           border: new OutlineInputBorder(borderRadius: BorderRadius.circular(100.0),),\n           filled: true,\n           hintStyle: new TextStyle(color: mainColor.withOpacity(0.5)),\n           hintText: hintText,\n           fillColor: backColor\n         ),\n     )\n );\n}\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">In <\/span><b>Dart, <\/b><span style=\"font-weight: 400;\">we code similar to Javascript in the sense that we just need to <\/span><b>define a widget <\/b><span style=\"font-weight: 400;\">and import it in the file where we need to use it, just like we did for the <\/span><b>roundedTextFormField <\/b><span style=\"font-weight: 400;\">above. <\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Signup<\/strong><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">For the Signup process, we applied the default parameters of Amplify\u2019s configuration wizard and we ask for <\/span><b>email<\/b><span style=\"font-weight: 400;\">,<\/span><b> username<\/b><span style=\"font-weight: 400;\"> (that will be used to identify the personal space in the S3 bucket), and <\/span><b>a valid password<\/b><span style=\"font-weight: 400;\">. After the signup process, there is the <\/span><b>confirmation process<\/b><span style=\"font-weight: 400;\">. A mail will be sent to the user with a confirmation code to insert in order to complete the registration.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Let\u2019s see the code inside <\/span><b>signup.dart. <\/b><span style=\"font-weight: 400;\">There are two main methods: <\/span><b>signupNewUser<\/b><span style=\"font-weight: 400;\"> and <\/span><b>confirmNewUser<\/b><span style=\"font-weight: 400;\">; the approach is similar to the login method:<\/span><\/p>\n\n\n\n<pre>if (formKey.currentState.validate()) {<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">We define a <strong>formKey<\/strong> and we use it for the page\u2019s form, then we use Amplify to signup:<\/span><\/p>\n\n\n\n<pre>\/\/ Create a map attributes dictionary for holding extra information for the user\nMap<string dynamic=\"\"> userAttributes = {\n 'email': emailController.text.trim(),\n \/\/ additional attributes as needed: we set email because is a common way\n \/\/ to define a unique value to use for S3 folders\n};\n\n\/\/ Signup using Amplify with Cognito\nSignUpResult res = await Amplify.Auth.signUp(\n   username: usernameController.text.trim(),\n   password: passwordController.text.trim(),\n   options: CognitoSignUpOptions(\n       userAttributes: userAttributes\n   )\n);\n<\/string><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Then we change the state of the application with <\/span><b>setState<\/b><span style=\"font-weight: 400;\">, altering the visibility of different components in the <\/span><b>signup.ui.dart <\/b><span style=\"font-weight: 400;\">file using the <\/span><b>Visibility Widget<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<pre>Visibility(\n   visible: state.registering,\n\u2026\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">To keep the code clean we also use <\/span><b>setState<\/b><span style=\"font-weight: 400;\"> in <\/span><b>signup.dart<\/b><span style=\"font-weight: 400;\"> to define which widget we want to see: signup or confirm.<\/span><\/p>\n\n\n\n<pre>@override\nWidget build(BuildContext context) {\n return this.isSignUpComplete ? confirmUi(this) : signupUi(this);\n}\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Basically we are using the state variable <\/span><b>isSignUpComplete<\/b><span style=\"font-weight: 400;\"> to decide which widget we want to show (both in <\/span><b>signup.ui.dart<\/b><span style=\"font-weight: 400;\">).<\/span><\/p>\n\n\n\n<p>To complete the registration we use:<\/p>\n\n\n\n<pre>SignUpResult res = await Amplify.Auth.confirmSignUp(\n   username: usernameController.text.trim(),\n   confirmationCode: confirmController.text.trim()\n);\n<\/pre>\n\n\n\n<p>After that, we send the user back to the login page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Building the S3 Manager widget and connecting it with S3<\/h3>\n\n\n\n<p>The S3 manager widget has four main purposes:<\/p>\n\n\n\n<ul><li>Listing online files<\/li><li>Uploading a new file<\/li><li>Downloading an online file<\/li><li>Deleting an online file<\/li><\/ul>\n\n\n\n<p>Let\u2019s take a look at what we have done to achieve that. <\/p>\n\n\n\n<pre>\/\/ Storage Item list\nList<storageitem> items = [];\n\n\/\/ Check if the app is uploading something\nbool isUploading = false;\n\n\/\/ Check if a file is being removed\nbool isRemoving = false;\n\n\/\/ Check if a file is being downloaded\nbool isDownloading = false;\n\n\/\/ Check if the app is retrieving the list of files\nbool isListing = false;\n<\/storageitem><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">We have defined an array to store the listed items, and four boolean values to manage the changing of application state for every action: this way is very easy to use <\/span><b>setState<\/b><span style=\"font-weight: 400;\"> method to block user interaction on buttons during the execution of long running tasks.&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">At the init state of the component we run <\/span><b>listFiles()<\/b><span style=\"font-weight: 400;\">, which request our authenticated user:<\/span><\/p>\n\n\n\n<pre>AuthUser user = await Core.getUser();\n<\/pre>\n\n\n\n<p>And list all files with Amplify using default options:<\/p>\n\n\n\n<pre>ListResult res = await Amplify.Storage.list();\n<\/pre>\n\n\n\n<p>Before showing the files we filter them by user to prevent listing unwanted ones:<\/p>\n\n\n\n<pre>items = res.items.where((e) =&gt; e.key.split('\/').first.contains(user.username)).toList();\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">To upload a file we need to recover it from the phone and to do it the easy way we have used the <\/span><b>File Picker<\/b><span style=\"font-weight: 400;\"> library which also handles permissions:<\/span><\/p>\n\n\n\n<pre>import 'package:file_picker\/file_picker.dart';\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">File picker let us retrieve the file, and with the connected user we can create a unique key for the upload:<\/span><\/p>\n\n\n\n<pre>\/\/ We put this outside of try to avoid logging user cancel\nFile file = await FilePicker.getFile();\nAuthUser user = await Core.getUser();\n\ntry {\n if(file.existsSync()) {\n\n   setState(() {\n     isUploading = true;\n   });\n\n   final key = user.username + '\/' + file.path.split('\/').last;\n\n   \/\/ Upload the file\n   UploadFileResult result = await Amplify.Storage.uploadFile(\n     key: key,\n     local: file\n   );\n\n...\n<\/pre>\n\n\n\n<p>To remove a file we simply call the Amplify method passing the item key:<\/p>\n\n\n\n<pre>RemoveResult res = await Amplify.Storage.remove(\n   key: item.key,\n);\n<\/pre>\n\n\n\n<p>Finally to download a file we need to do two things: check user\u2019s permissions as new android versions require them at runtime:<\/p>\n\n\n\n<pre>import 'package:permission_handler\/permission_handler.dart';\n\nFuture<bool> checkPermission() async {\n final status = await Permission.storage.status;\n if (status != PermissionStatus.granted) {\n   final result = await Permission.storage.request();\n   if (result == PermissionStatus.granted) {\n     return true;\n   }\n } else {\n   return true;\n }\n return false;\n}\n<\/bool><\/pre>\n\n\n\n<p>And actually download the file:<\/p>\n\n\n\n<pre>var dir = await DownloadsPathProvider.downloadsDirectory;\nvar url = await Amplify.Storage.getUrl(key: item.key, options: GetUrlOptions(expires: 3600));\n\nawait checkPermission();\n\nfinal taskId = await FlutterDownloader.enqueue(\n   url: url.url,\n   fileName: item.key.split('\/').last,\n   savedDir: dir.path,\n   showNotification: true, \/\/ show download progress in status bar (for Android)\n   openFileFromNotification: true, \/\/ click on notification to open downloaded file (for Android)\n);\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">As a side note, we had difficulties downloading the actual file with Amplify\u2019s download method so we managed to do it with a combination of Amplify\u2019s <\/span><b>getUrl<\/b><span style=\"font-weight: 400;\"> and <\/span><b>FlutterDownloader.enqueue<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">For the design part just take a look at the <\/span><b>s3viewer.ui.dart<\/b><span style=\"font-weight: 400;\"> file, nothing fancy there.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Building the Core file which contains some utilities<\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">The core component just contains some <\/span><b>static <\/b><span style=\"font-weight: 400;\">methods that serve as utilities all around the application as well as some validation functions for the forms. Let\u2019s have a quick look at some examples:<\/span><\/p>\n\n\n\n<pre>\/\/ Static method to get the current logged user\nstatic Future<authuser> getUser() async {\n return Amplify.Auth.getCurrentUser();\n}\n<\/authuser><\/pre>\n\n\n\n<p>The previous one for returning the Amplify user, and a simple email validator below:\n<\/p>\n\n\n\n<pre>static emailValidator(value) {\n if (value.isEmpty) {\n   return 'Please fill the field';\n }\n if (!RegExp(r\"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&amp;'*+-\/=?^_`{|}~]+@[a-zA-Z0-9]+\\.[a-zA-Z]+\").hasMatch(value)) {\n   return 'Please insert a valid email';\n }\n return null;\n}\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">It receives a string value and returns an error message or <\/span><b>null<\/b><span style=\"font-weight: 400;\"> if the input is valid; this can be passed to a <\/span><b>TextFormField <\/b><span style=\"font-weight: 400;\">for the<\/span><b> validator <\/b><span style=\"font-weight: 400;\">property (please refer to the source code for completeness).<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Testing the application on a real device<\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">To develop the application directly on a real device, Flutter allows you to deploy and test your code on it with <\/span><b>hot reload<\/b><span style=\"font-weight: 400;\"> functionality. There are two ways to do this:<\/span>\n\n<span style=\"font-weight: 400;\">1) Press <\/span><b>play<\/b><span style=\"font-weight: 400;\"> on the top-right corner of Android Studio like in figure:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"30\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed-61.png\" alt=\"press play on Android Studio\" class=\"wp-image-1692\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">2) first type in your terminal <\/span><b>flutter devices<\/b><span style=\"font-weight: 400;\"> and take note of your <\/span><b>device id<\/b><span style=\"font-weight: 400;\">. Then you can call in the terminal <\/span><b>flutter run -d &lt;DEVICE_ID&gt; -t .\/lib\/main.dart<\/b><span style=\"font-weight: 400;\">, being in the project directory.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">When in testing mode a <\/span><b>debug flag will be automatically put on top of your appbar<\/b><span style=\"font-weight: 400;\">, and by pressing <\/span><b>r <\/b><span style=\"font-weight: 400;\">&nbsp;in the terminal you can force the hot reload functionality. <\/span><\/p>\n\n\n\n<p>To complete the build preliminaries you need to do these two steps:<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">1)&nbsp; in the <\/span><b>android<\/b><span style=\"font-weight: 400;\"> directory go to <\/span><b>app\/src\/build.gradle <\/b><span style=\"font-weight: 400;\">and verify that you have the following values for the SDK:<\/span><\/p>\n\n\n\n<pre>minSdkVersion 23\ntargetSdkVersion 29\ncompiledSdkVersion 29\n<\/pre>\n\n\n\n<p>This is to avoid building problems with the libraries we have in the demo.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">2) in the <\/span><b>android <\/b><span style=\"font-weight: 400;\">directory go to <\/span><b>app\/src\/main\/AndroidManifest.xml<\/b><span style=\"font-weight: 400;\"> and add these permissions:<\/span><\/p>\n\n\n\n<pre>&lt;uses-permission android:name=\"android.permission.INTERNET\" \/&gt;\n&lt;uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" \/&gt;\n&lt;uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" \/&gt;\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Directly inside the <\/span><b>manifest tag<\/b><span style=\"font-weight: 400;\"> and <\/span><b>android<\/b><b>:requestLegacyExternalStorage=<\/b><b>&#8220;true&#8221; <\/b><span style=\"font-weight: 400;\">as an attribute of the <\/span><b>application <\/b><span style=\"font-weight: 400;\">tag.<\/span><\/p>\n\n\n\n<p>Finally, let\u2019s see our app in action:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"569\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed.gif\" alt=\"running application\" class=\"wp-image-1695\"\/><figcaption>New user registration<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"569\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed-1.gif\" alt=\"running application during login\" class=\"wp-image-1697\"\/><figcaption>Login and images loading<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"569\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed-2.gif\" alt=\"running application while uploading files \" class=\"wp-image-1699\"\/><figcaption>files upload and download<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Using Travis CI to perform CI\/CD<\/h2>\n\n\n\n<p>Travis CI is a CI\/CD service that you can use to test, build and deploy your application, and it can be easily integrated with your GitHub repository, in our case a public one. For the sake of this article, we will focus on how to automate the Android APK generation from the code pushed on our public GitHub repository through Travis CI.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Once you\u2019ve signed up yourself to Travis CI &#8211; we signed up through our GitHub account &#8211; you need to activate your repository, in order to make <\/span><b>Git push events<\/b><span style=\"font-weight: 400;\"> to trigger the pipeline under specific conditions defined in Travis CI configuration file.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">From the Travis CI console, move to the <\/span><b>Settings<\/b><span style=\"font-weight: 400;\"> section that is listed in the menu that appears when you click on your avatar. Now, from the left sidebar select the <\/span><b>organization<\/b><span style=\"font-weight: 400;\"> that contains the repository you want to integrate with Travis CI. From the list of repositories associated with the given organization, click the toggle that corresponds to the repository that should be activated.<\/span><\/p>\n\n\n\n<p>Once you\u2019ve activated the repository you can focus on the Travis CI configuration file, the one that describes the CI\/CD process, in our case how to build the Android APK.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Create a file named <\/span><b>.travis.yml<\/b><span style=\"font-weight: 400;\"> in the root of the project\u2019s folder.<\/span><\/p>\n\n\n\n<p>In the first part of the .travis.yml file we will define the operating system on which the pipeline should run, the supported language and the JDK that is needed for build purposes.<\/p>\n\n\n\n<pre>language: android\nos: linux\ndist: xenial\njdk: oraclejdk8\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Specifying android as the supported language makes the CI\/CD environment implicitly include the Android SDK, needed to build the solution. <\/span><b>Xenial<\/b><span style=\"font-weight: 400;\"> is an Ubuntu Distro that corresponds to the 16.04 version. <\/span><b>oraclejdk8<\/b><span style=\"font-weight: 400;\"> should be configured as SDK in order to use the <\/span><b>sdkmanager<\/b><span style=\"font-weight: 400;\">, a command line tool used to install Android\u2019s platform and build tools. After this initial block we have to define all the Android\u2019s main modules that are needed throughout the build process.<\/span><\/p>\n\n\n\n<pre>android:\n components:\n   - tools\n   - platform-tools\n   - build-tools-28.0.3\n   - android-29\n<\/pre>\n\n\n\n<p>The third main block regards the installation of Android\u2019s platform and build tools, and the installation of Flutter inside the CI\/CD environment.\n<\/p>\n\n\n\n<pre>install:\n - yes | sdkmanager \"platform-tools\" \"platforms;android-29\" \"build-tools;28.0.3\"\n - git clone https:\/\/github.com\/flutter\/flutter.git -b flutter-1.22-candidate.9\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Note: the -b option allows you to specify the exact version of Flutter you\u2019re gonna clone in the CI\/CD environment. To have an overview of all flutter branches, <a href=\"https:\/\/github.com\/flutter\/flutter\/branches\/all\" target=\"_blank\" rel=\"noopener noreferrer\">visit this page<\/a><\/span><span style=\"font-weight: 400;\">. Flutter-1.22-candidate.9 branch refers to version 1.22.0-9.0.pre.<\/span><\/p>\n\n\n\n<p>Let\u2019s now focus on the script block of the .travis.yml configuration file. Here we define the command needed to build our Android APK.<\/p>\n\n\n\n<pre>script:\n - .\/flutter\/bin\/flutter build apk --debug\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">As you can notice, we are using the &#8211;<\/span><b>-debug<\/b><span style=\"font-weight: 400;\"> flag. As described <\/span><a href=\"https:\/\/flutter.dev\/docs\/testing\/build-modes#debug\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">, in debug mode, the app is set up for debugging on the physical device, emulator, or simulator.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Once the artifact &#8211; i.e. the Android APK &#8211; is available, it has to be released in the form of <\/span><b>GitHub release<\/b><span style=\"font-weight: 400;\">. To automate the release creation, you need to add the following configuration block.<\/span><\/p>\n\n\n\n<pre>deploy:\n provider: releases\n api_key: $API_KEY\n file: build\/app\/outputs\/apk\/debug\/app-debug.apk\n skip_cleanup: true\n name: $TRAVIS_TAG\n on:\n   tags: true\n<\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">This configuration makes Travis CI create a release only if a tag is present in the last commit. Using the <\/span><b>TRAVIS_TAG<\/b><span style=\"font-weight: 400;\"> environment variable, we are able to define the name that we want to assign to the release.<\/span><\/p>\n\n\n\n<p>To add a file to the release, you have to specify its path after the file key.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Last important thing to specify is the <\/span><b>api_key<\/b><span style=\"font-weight: 400;\">, i.e. your GitHub personal access token, needed for authentication.<\/span><\/p>\n\n\n\n<p>You should finally be able to browse your newly created release in your GitHub repository.<\/p>\n\n\n\n<p>This is the entire .travis.yml configuration file:<\/p>\n\n\n\n<pre>language: android\nos: linux\ndist: xenial\njdk: oraclejdk8\nandroid:\n components:\n   - tools\n   - platform-tools\n   - build-tools-28.0.3\n   - android-29\ninstall:\n - yes | sdkmanager \"platform-tools\" \"platforms;android-29\" \"build-tools;28.0.3\"\n - git clone https:\/\/github.com\/flutter\/flutter.git -b flutter-1.22-candidate.9\nscript:\n - .\/flutter\/bin\/flutter build apk --debug\ndeploy:\n provider: releases\n api_key: $API_KEY\n file: build\/app\/outputs\/apk\/debug\/app-debug.apk\n skip_cleanup: true\n name: $TRAVIS_TAG\n on:\n   tags: true\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<p>Here we present all the references we used to build this solution:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/flutter.dev\/docs\/get-started\/install\/macos\">https:\/\/flutter.dev\/docs\/get-started\/install\/macos<\/a><\/li><\/ul>\n\n\n\n<ul><li><a href=\"https:\/\/docs.amplify.aws\/start\/getting-started\/setup\/q\/integration\/flutter\">https:\/\/docs.amplify.aws\/start\/getting-started\/setup\/q\/integration\/flutter<\/a><\/li><li><a href=\"https:\/\/docs.amplify.aws\/lib\/auth\/getting-started\/q\/platform\/flutter#configure-auth-category\">https:\/\/docs.amplify.aws\/lib\/auth\/getting-started\/q\/platform\/flutter#configure-auth-category<\/a><\/li><li><a href=\"https:\/\/aws.amazon.com\/cli\/\">https:\/\/aws.amazon.com\/cli\/<\/a><\/li><li><a href=\"https:\/\/dart.dev\/docs\">https:\/\/dart.dev\/docs<\/a><\/li><li><a href=\"https:\/\/github.com\/git-touch\/file-icon\">https:\/\/github.com\/git-touch\/file-icon<\/a><\/li><li><a href=\"https:\/\/pub.dev\/packages\/file_picker\">https:\/\/pub.dev\/packages\/file_picker<\/a><\/li><li><a href=\"https:\/\/pub.dev\/packages\/fluttertoast\">https:\/\/pub.dev\/packages\/fluttertoast<\/a><\/li><li><a href=\"https:\/\/github.com\/fluttercommunity\/flutter_downloader\">https:\/\/github.com\/fluttercommunity\/flutter_downloader<\/a><\/li><li><a href=\"https:\/\/pub.dev\/packages\/permission_handler\">https:\/\/pub.dev\/packages\/permission_handler<\/a><\/li><\/ul>\n\n\n\n<p>And here is our repository for downloading and testing the demo application:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/github.com\/besharpsrl\/flutter-amplify-demo\">https:\/\/github.com\/besharpsrl\/flutter-amplify-demo<\/a><\/li><\/ul>\n\n\n\n<p><i><span style=\"font-weight: 400;\">Note: at the time of writing it seems that Amplify for Flutter can\u2019t compile for release mode, therefore the app can be tried only in debug mode.<\/span><\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusions<\/h2>\n\n\n\n<p>In this article we have seen how simple it is to create a mobile application with Flutter using AWS Amplify to cover all the complexity of managing AWS infrastructure for us and for keeping data synchronized between our app and the Cloud. At the moment of this article only 3 services have been ported to Flutter: Cognito, S3 and Pinpoint, but seeing how well this is working, we sincerely hope to see more and more updates to this library.<\/p>\n\n\n\n<p>As a final note, feel free to refer to our simple demo to expand and explore all the possibilities of this solution. If you have any questions or ideas we encourage you to reach and discuss with us!<\/p>\n\n\n\n<p>Until our next article, thank you for taking your time to read and see you again! ?<\/p>\n\n\n\n<p><strong>#Proud2beCloud<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nowadays Flutter is becoming more and more recognized as a viable solution for making mobile cross-platform applications. Also, AWS Amplify [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":1729,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[478],"tags":[252,405,284,278,264,365,403,400,300,407,268],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build your own mobile file hosting application with Flutter, Amplify, and AWS. - Proud2beCloud Blog<\/title>\n<meta name=\"description\" content=\"Amplify Flutter now available for developers! Here is how we built a mobile file hosting application powered by AWS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Let&#039;s build a mobile file hosting application with Flutter, Amplify, and AWS.\" \/>\n<meta property=\"og:description\" content=\"Amplify Flutter now available for developers! Here is how we built a mobile file hosting application powered by AWS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/\" \/>\n<meta property=\"og:site_name\" content=\"Proud2beCloud Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-04T10:18:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-18T15:22:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/facebook-link-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alessandro Gaggia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"A mobile file hosting application with Amplify Flutter.\" \/>\n<meta name=\"twitter:description\" content=\"Amplify Flutter now available for developers! Here is how we built a mobile file hosting application powered by AWS.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/twitter-shared-link.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alessandro Gaggia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/\",\"url\":\"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/\",\"name\":\"Build your own mobile file hosting application with Flutter, Amplify, and AWS. - Proud2beCloud Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.besharp.it\/#website\"},\"datePublished\":\"2020-09-04T10:18:19+00:00\",\"dateModified\":\"2021-03-18T15:22:29+00:00\",\"author\":{\"@id\":\"https:\/\/blog.besharp.it\/#\/schema\/person\/f27fc12d10867c6ea6e0158ce4dd8924\"},\"description\":\"Amplify Flutter now available for developers! Here is how we built a mobile file hosting application powered by AWS.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.besharp.it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build your own mobile file hosting application with Flutter, Amplify, and AWS.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.besharp.it\/#website\",\"url\":\"https:\/\/blog.besharp.it\/\",\"name\":\"Proud2beCloud Blog\",\"description\":\"il blog di beSharp\",\"alternateName\":\"Proud2beCloud Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.besharp.it\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.besharp.it\/#\/schema\/person\/f27fc12d10867c6ea6e0158ce4dd8924\",\"name\":\"Alessandro Gaggia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.besharp.it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f58dc28050f26409e22ab60346d06220?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f58dc28050f26409e22ab60346d06220?s=96&d=mm&r=g\",\"caption\":\"Alessandro Gaggia\"},\"description\":\"Head of software development di beSharp, Full-Stack developer, mi occupo di garantire lo stato dell\u2019arte di tutta la nostra codebase. Scrivo codice in quasi ogni linguaggio, ma prediligo Typescript. Respiro Informatica, Game design, Cinema, Fumetti e buona cucina. Disegno per passione!\",\"url\":\"https:\/\/blog.besharp.it\/author\/alessandro-gaggia\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build your own mobile file hosting application with Flutter, Amplify, and AWS. - Proud2beCloud Blog","description":"Amplify Flutter now available for developers! Here is how we built a mobile file hosting application powered by AWS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/","og_locale":"en_US","og_type":"article","og_title":"Let's build a mobile file hosting application with Flutter, Amplify, and AWS.","og_description":"Amplify Flutter now available for developers! Here is how we built a mobile file hosting application powered by AWS.","og_url":"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/","og_site_name":"Proud2beCloud Blog","article_published_time":"2020-09-04T10:18:19+00:00","article_modified_time":"2021-03-18T15:22:29+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/facebook-link-image.png","type":"image\/png"}],"author":"Alessandro Gaggia","twitter_card":"summary_large_image","twitter_title":"A mobile file hosting application with Amplify Flutter.","twitter_description":"Amplify Flutter now available for developers! Here is how we built a mobile file hosting application powered by AWS.","twitter_image":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/twitter-shared-link.png","twitter_misc":{"Written by":"Alessandro Gaggia","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/","url":"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/","name":"Build your own mobile file hosting application with Flutter, Amplify, and AWS. - Proud2beCloud Blog","isPartOf":{"@id":"https:\/\/blog.besharp.it\/#website"},"datePublished":"2020-09-04T10:18:19+00:00","dateModified":"2021-03-18T15:22:29+00:00","author":{"@id":"https:\/\/blog.besharp.it\/#\/schema\/person\/f27fc12d10867c6ea6e0158ce4dd8924"},"description":"Amplify Flutter now available for developers! Here is how we built a mobile file hosting application powered by AWS.","breadcrumb":{"@id":"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.besharp.it\/build-your-own-file-hosting-application-with-flutter-amplify-and-aws\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.besharp.it\/"},{"@type":"ListItem","position":2,"name":"Build your own mobile file hosting application with Flutter, Amplify, and AWS."}]},{"@type":"WebSite","@id":"https:\/\/blog.besharp.it\/#website","url":"https:\/\/blog.besharp.it\/","name":"Proud2beCloud Blog","description":"il blog di beSharp","alternateName":"Proud2beCloud Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.besharp.it\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.besharp.it\/#\/schema\/person\/f27fc12d10867c6ea6e0158ce4dd8924","name":"Alessandro Gaggia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.besharp.it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f58dc28050f26409e22ab60346d06220?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f58dc28050f26409e22ab60346d06220?s=96&d=mm&r=g","caption":"Alessandro Gaggia"},"description":"Head of software development di beSharp, Full-Stack developer, mi occupo di garantire lo stato dell\u2019arte di tutta la nostra codebase. Scrivo codice in quasi ogni linguaggio, ma prediligo Typescript. Respiro Informatica, Game design, Cinema, Fumetti e buona cucina. Disegno per passione!","url":"https:\/\/blog.besharp.it\/author\/alessandro-gaggia\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/posts\/1706"}],"collection":[{"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/comments?post=1706"}],"version-history":[{"count":0,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/posts\/1706\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/media\/1729"}],"wp:attachment":[{"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/media?parent=1706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/categories?post=1706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/tags?post=1706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}