SPIKE: Flutter Web Applications

[nelsonic]

One of the major selling points of Flutter is that it's built with Dart. That means it can be compiled to any target platform (including the web!) Starting earlier in 2019 there has been ("beta") support for Web in Flutter: https://flutter.dev/web

Official getting started guide: https://flutter.dev/docs/get-started/web

@Nash0x7e2 wrote this overview of "Ins and Outs of Flutter Web": https://medium.com/flutter-community/ins-and-outs-of-flutter-web-7a82721dc19a @zubairehman has written this great post on getting started building a Web App with Flutter: https://itnext.io/flutter-for-web-c75011a41956 @mikegazzaruso wrote Flutter For Web: a concrete example on flutter-community: https://medium.com/flutter-community/flutter-for-web-a-concrete-example-4ed293545008 Sample web app: https://github.com/kenreilly/flutter-web-example

Todo

• [ ] install Flutter on localhost
• [ ] Follow the official instructions to build a "hello world" web application
• [ ] Deploy it to a conventional web hosting service e.g. Fly.io to test the process.

https://youtu.be/tot-R_q5-0o?t=6

[nelsonic]

@iteles I get the feeling that this one will be particularly effective for you to learn Flutter Web: 😉 https://www.youtube.com/watch?v=33kyEzDMTZU https://www.filledstacks.com/post/create-and-deploy-a-flutter-web-app/

[nelsonic]

Following the installation instructions on https://flutter.dev/docs/get-started/install/macos

flutter precache

Java ... 🤦‍♂

[nelsonic]

Failed to download the Android dependencies
Downloading Android Maven dependencies...                           0.4s

[nelsonic]

flutter doctor

We see the following warning: "idevice_id" cannot be opened because the developer cannot be verified

Known issue: https://github.com/flutter/flutter/issues/42969 reading ... 👀

Edit: @mdalameen's solution https://github.com/flutter/flutter/issues/42969#issuecomment-568303471

rmdir ~/code/flutter/bin/cache/artifacts
flutter doctor

[SimonLab]

Almost there on my side (Ubuntu 19.10)

[SimonLab]

I couldn't connect my phone to my computer (I think it's an issue with my phone or ubuntu, not flutter directly), however I manage to create a virtual device:

[miguelmartins17]

@nelsonic I was Following this tutorial to install Flutter on Mac:https://flutter.dev/docs/get-started/install/macos But I made the exactly things they say here and "flutter --version" says flutter its not recognised even when installed.

[miguelmartins17]

@SimonLab Were you able to connect the phone to Android Studio or not yet? I had the same problem when I started using Android Studio. Here is a link that might help:https://developer.android.com/training/basics/firstapp/running-app#RealDevice

[nelsonic]

Lots more things to install apparently, so I will need to pay a visit to the local cafe with free Wifi ... ⏳

[✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.15.2 19C57, locale en-GB)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[!] Android Studio (not installed)
[!] VS Code (version 1.41.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

[SimonLab]

@miguelmartins17 thanks for the link. I think the issue is linked to my Ubuntu not mounting/detecting my phone automatically. still trying to find a solution for this.

[SimonLab]

ok I think I'm good to go now:

The issue wasn't with Ubuntu or my phone at the end but was due to the wrong type of usb cable I was using. Some usb cables are only used for charging devices, I had to find one that I can use to transfer data see https://electronics.stackexchange.com/questions/140225/how-can-i-tell-charge-only-usb-cables-from-usb-data-cables

[SimonLab]

Testing simple android app on my phone. It's true that I was impress by the hot reload, the project took a bit of time to compile (2 or 3 minutes) on my computer but once it was done I manage to quickly change the colour and the text easily.

I'm also using VScode which was quiet easy to setup (install the Flutter extension which will install also the Dart extension and specify the folder where Flutter is installed)

Now that I know I can create a basic android app on my computer, I'll have a look how to run this code as a web app.

[SimonLab]

For creating a web application we need to use the beta channel of flutter, https://flutter.dev/docs/get-started/web

flutter channel beta
flutter upgrade
flutter config --enable-web

Now that the the web option for flutter is enable we can check the list of devices with:

flutter devices

I still have my phone connected but we can now also see 2 more devices: chrome and a web server

We can also run flutter doctor on VScode to see which devices are connected:

I had to compile my current flutter project for the web with the command lineflutter create . (I this point I didn't try to run the project directly with VScode but I suspect that the IDE would have done this for me). When ready the application is lauched on a chrome instance:

I've noticed however that the state is not kept for the web app when modifications are applied to the code, I'm not sure if this due to the beta or if it's specific to the web app.

To recap once all the tools are installed it's pretty nice to be able to run the application on a real device, emulator and on chrome with only one code base. The hot reload for real device and chrome (expect the state which is not save on chrome) is working really well, for the emulator it was a bit mroe slow on my computer. Now we need to see if we can build more complex application with Flutter

[nelsonic]

Android studio is a beast!

Going to watch this tutorial over the weekend: https://youtu.be/dc3B_mMrZ-Q

[miguelmartins17]

In my opinion for simple and interactive Android applications Android Studio is one of the best.

[miguelmartins17]

Of course, we can also make more complex applications with Android but right now I'm very interested in Flutter too.

[nelsonic]

With the release of Flutter 2.0 Web Support is now "stable" (fully supported!)

[nelsonic]

https://betterprogramming.pub/flutter-is-about-to-win-over-the-web-be0a205af03d

[nelsonic]

We need to figure out how to deploy/host a Web App built with Flutter and see how we can optimise it. Is the "bundle" going to be too big to be performant on a more basic device like an older iPhone or Android phone?

@LuchoTurtle can you please look into this? 100% of the people trying our App for the first time will not download and install it. We need the PWA experience to be as good as the Native experience (within reason).

Note: not saying that longer-term people won't download and install the Native mobile app. Just that in the beginning, getting people to download an App before they can try it is a non-starter.

Please confirm you understand what is required here. 🙏 (leave a comment on this issue).

[LuchoTurtle]

@nelsonic do you want me to create a simple todo web app in Flutter and deploy it? (or perhaps I'll just stick with a simple hello world, as noted in the original issue). I can create a PR and a folder in this repo dedicated just to the web app. After implementing, we can take a look at Lighthouse insights and bundle sizes.

If I'm correct, just give me the heads up 👍

[nelsonic]

Yes, please. A simple Todo App is a good starting point for testing a Flutter PWA. 👍 But also, please take a look at: https://github.com/dwyl/flutter-phoenix-channels-demo/issues/1 If you can deploy that micro-app to Fly.io it would showcase Flutter connecting to Phoenix. 👌

[LuchoTurtle]

In that case, I'll just use the mobile todo app from https://github.com/dwyl/flutter-todo-list-tutorial/pull/28 (it's not yet merged but it's workable and has been the foundation for https://github.com/dwyl/supabase-flutter-demo, for example) and work on https://github.com/dwyl/flutter-phoenix-channels-demo/issues/1 first.

https://github.com/dwyl/flutter-todo-list-tutorial/pull/28 already has Phoenix connecting to a Phoenix API. But I wager you meant having a websocket connection instead of RESTful requests.

[nelsonic]

https://github.com/dwyl/flutter-todo-list-tutorial/pull/28 merged. please proceed. 🙏 WebSockets are the superpower of Elixir & Phoenix. Having a REST API is incidental (but obvs required for people to run their own analysis etc.) Thanks.

[nelsonic]

Flutter Web Apps are good enough that we can now use Flutter to build our Web App with PWA support. Closing. ✅