Setting up our application

We will be cloning a wallet application from Github.

Cloning the project

First, we need to make an Android Widget, and then import the project using the Import code from GitHub button, just like we did in the previous lesson.

Providing GitHub token

After pasting the project link, click the Apply button.

You may need to add a Github token. You can generate the Github token by following this documentation.

After pasting the token, click the Apply button.

Dockerfile

Our docker file should look something like this:

Press + to interact
# Using a base image for Android widget by educative
FROM gcr.io/educative-exec-env/android-v2
# Installing git
RUN apt-get update && apt-get install git -y
# Cloning the project
RUN git clone https://github.com/kalismeras61/flutter_wallet_ui.git
# If you want to use the latest Flutter version
RUN flutter channel stable && flutter upgrade --force

It is recommended to use stable channel for flutter.

Docker job

Our docker job will look like this:

Docker Job
Docker Job

Note: After cloning, we have deleted some files in the Android widget because of the size limit.

Dockerfile

Our docker file should look something like this:

# Using a base image for Android widget by educative
FROM gcr.io/educative-exec-env/android-v2
# Installing git
RUN apt-get update && apt-get install git -y
# Cloning the project
RUN git clone https://github.com/kalismeras61/flutter_wallet_ui.git
# If you want to use the latest Flutter version
RUN flutter channel stable && flutter upgrade --force

It is recommended to use stable channel for flutter.

Note: Instead of cloning the project, you can also copy the project into the container by writing the COPY [PROJECT_NAME] . command. If you want to run the COPY [PROJECT_NAME] . command, your project should be present in the same directory where your Dockerfile is present. Else, you can provide the absolute path of your project.

By default, we are using 1.5.4-hotfix.2 version.

Setting up our application

We are using a project named flutter_wallet_ui. We cloned it from Github. You can also copy it into your container by using the command in the note above.

Framework

We are working on Flutter, so we will choose “Flutter”.

Gradle version

It depends on our requirements, we are choosing Gradle 4.x.

Emulator

You can choose any emulator. We will choose Genymotion in this case.

Build Path

In our case, Our build path will be app-debug.apk because our Android Widget looks for the apk in the usercode directory.

Note: Any project that you will clone or copy when using gcr.io/educative-exec-env/android-v2 as the base image will appear in the /tmp directory. You can copy or clone the project in any other directory by adding running RUN cd [YOUR_PATH] or WORKDIR [YOUR_PATH] commands.

Package Name

Our package name will be com.example.flutter_wallet_ui_challenge.

Custom Script

The custom script that we will be using for our project is the following:

cp -r /usercode/* /tmp/flutter_wallet_ui && cd /tmp/flutter_wallet_ui && flutter build apk --debug --target-platform=android-arm && cp -r /tmp/flutter_wallet_ui/build/app/outputs/apk/debug/app-debug.apk /usercode && echo EDSTATUSCODE 1 && echo Build Completed

  • cp -r /usercode/ /tmp/flutter_wallet_ui : Copying the files updated by the user to our /tmp/flutter_wallet_ui project.

  • cd /tmp/flutter_wallet_ui && flutter build apk --debug --target-platform=android-arm: Changing our current directory to /tmp/flutter_wallet_ui and building the apk for the project using flutter build apk --debug --target-platform=android-arm command.

  • cp -r /tmp/flutter_wallet_ui/build/app/outputs/apk/debug/app-debug.apk /usercode: Copying our app-debug.apk file to usercode because we have provided the build path as usercode.

  • echo EDSTATUSCODE 1 && echo Build Completed : Running echo EDSTATUSCODE 1 && echo Build Completed. This command connects the virtual device and installs the apk on it and relaunches the virtual device (Genymotion).

Note: Many files are not shown in the Android widget due to its limitation of size.

Testing our application

Let us test our application now:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_wallet_ui_challenge">
    <!-- Flutter needs it to communicate with the running application
         to allow setting breakpoints, to provide hot reload, etc.
    -->
    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>
Wallet App