DEV Community

Cover image for Package Flutter Linux App Into AppImage Part 2
Hosam Hasan
Hosam Hasan

Posted on

1 1

Package Flutter Linux App Into AppImage Part 2

Now, We are ready to build our first Flutter AppImage app πŸš€

Firstly , we will change our working directory to the project directory.

$ cd flutter_appimage
Enter fullscreen mode Exit fullscreen mode

Then follow these steps:

1- Create folder AppDir

$ mkdir AppDir
Enter fullscreen mode Exit fullscreen mode

2- Generate the YAML recipe file required to build the AppImage

$ appimage-builder --generate
Enter fullscreen mode Exit fullscreen mode

this command will prompt some questions. Here is the final output :

INFO:Generator:Searching AppDir
? ID [Eg: com.example.app]: com.example.flutter_appimage
? Application Name: Flutter AppImage
? Icon: flutter_appimage_icon
? Executable path relative to AppDir [usr/bin/app]: flutter_appimage
? Arguments [Default: $@]: $@
? Version [Eg: 1.0.0]: latest
? Update Information [Default: guess]: guess
? Architecture: x86_64
Enter fullscreen mode Exit fullscreen mode

Now, you will notice a new file AppImageBuilder.yml added to the root directory of our project.

Wait a second, What the hack this flutter_appimage_icon comes from πŸ™„πŸ€”

Stop rubbing your head. Here is why :

  • copy your favorite icon to the root directory and make sure its extension is SVG

  • rename you icon to flutter_appimage_icon.svg

Now, let's open AppImageBuilder.yml and edit some stuff:

  • add starting script that will delete old AppDir:
  script:
   - rm -rf AppDir | true
   - mkdir AppDir
Enter fullscreen mode Exit fullscreen mode
  • add after bundling scripts to add the Flutter App to the bandle
  AppDir:
    after_bundle:
    - cp build/linux/x64/release/bundle/flutter_appimage AppDir
    - cp -r build/linux/x64/release/bundle/lib/. AppDir/lib
    - cp -r build/linux/x64/release/bundle/data AppDir
    - cp flutter_appimage_icon.svg AppDir/usr/share/icons/
Enter fullscreen mode Exit fullscreen mode
  • Add gtk3 required for flutter app also define the repositories where dependencies comes from
    pacman:
      Architecture: x86_64
      repositories:
        core:
          - https://mirror.rackspace.com/archlinux/$repo/os/$arch
        extra:
          - https://mirror.rackspace.com/archlinux/$repo/os/$arch
      include:
        - gtk3
        - python # I don't know why we need but build fails without it  
        - perl # I don't know why we need but build fails without it
Enter fullscreen mode Exit fullscreen mode

Alright, Here is the moment we have been waiting for:

$ appimage-builder --skip-test 
Enter fullscreen mode Exit fullscreen mode

πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯πŸ₯.....................Voila πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³

New file added to the root directory Flutter AppImage-latest-x86_64.AppImage

Flutter Counter App packaged in AppImage.

But wait a second ...... not again 😫.

The bundled AppImage file is about 225 MB , your kidding me 😠.

I know the bundle size needs some optmization , I wil pospone this to part 3.

References :

GitHub :

Sentry blog image

The countdown to March 31 is on.

Make the switch from app center suck less with Sentry.

Read more

Top comments (1)

Collapse
 
atulchaudhary profile image
Atul Chaudhary β€’

The final appimage generated through "appimage-builder --skip-test" doesnt have any icon associated with it. tried with svg and png both. icon is present in the root dir of project and also correct name is present in yml file.

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools