SPIKE: Flutter Web Applications #9

nelsonic · 2020-01-03T09:35:47Z

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

The text was updated successfully, but these errors were encountered:

nelsonic · 2020-01-09T17:36:13Z

@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 · 2020-01-09T17:53:47Z

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

flutter precache

Java ... 🤦‍♂

nelsonic · 2020-01-09T17:55:57Z

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

nelsonic · 2020-01-09T18:02:11Z

flutter doctor

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

Known issue: flutter/flutter#42969 reading ... 👀

Edit: @mdalameen's solution flutter/flutter#42969 (comment)

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

SimonLab · 2020-01-09T20:44:04Z

Almost there on my side (Ubuntu 19.10)

SimonLab · 2020-01-09T21:43:52Z

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 · 2020-01-10T09:38:14Z

@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 · 2020-01-10T09:45:45Z

@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 · 2020-01-10T10:07:10Z

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 · 2020-01-10T10:45:58Z

@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 · 2020-01-10T11:11:13Z

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 · 2020-01-10T13:40:45Z

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 · 2020-01-10T15:05:44Z

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 · 2020-01-10T16:54:41Z

Android studio is a beast!

Going to watch this tutorial over the weekend:

https://youtu.be/dc3B_mMrZ-Q

miguelmartins17 · 2020-01-10T17:10:56Z

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

miguelmartins17 · 2020-01-10T17:13:36Z

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

nelsonic · 2021-03-22T15:02:22Z

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

nelsonic · 2021-03-22T15:03:11Z

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

nelsonic · 2023-02-02T15:10:19Z

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 · 2023-02-02T15:23:05Z

@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 · 2023-02-02T16:08:42Z

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

LuchoTurtle · 2023-02-02T16:12:33Z

In that case, I'll just use the mobile todo app from dwyl/flutter-todo-list-tutorial#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 dwyl/flutter-phoenix-channels-demo#1 first.

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

nelsonic · 2023-02-02T16:19:08Z

dwyl/flutter-todo-list-tutorial#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 · 2023-02-23T06:10:45Z

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

nelsonic added the enhancement New feature or request label Jan 3, 2020

miguelmartins17 mentioned this issue Jan 4, 2020

What do you know about "Chocolatey.org" #11

Closed

nelsonic mentioned this issue Jan 9, 2020

Flutter for Native Mobile Apps? dwyl/technology-stack#81

Open

10 tasks

nelsonic mentioned this issue Jan 11, 2020

Flutter No devices available #14

Open

nelsonic added help wanted Extra attention is needed T1d priority-1 starter technical spike research labels Feb 2, 2023

nelsonic mentioned this issue Feb 2, 2023

Why? What? Who? How? dwyl/flutter-phoenix-channels-demo#1

Closed

10 tasks

LuchoTurtle mentioned this issue Feb 8, 2023

[PR] Flutter + Phoenix Channels Demo Initial Implementation. dwyl/flutter-phoenix-channels-demo#2

Merged

nelsonic closed this as completed Feb 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SPIKE: Flutter Web Applications #9

SPIKE: Flutter Web Applications #9

nelsonic commented Jan 3, 2020 •

edited

Loading

nelsonic commented Jan 9, 2020 •

edited

Loading

nelsonic commented Jan 9, 2020 •

edited

Loading

nelsonic commented Jan 9, 2020

nelsonic commented Jan 9, 2020 •

edited

Loading

SimonLab commented Jan 9, 2020

SimonLab commented Jan 9, 2020

miguelmartins17 commented Jan 10, 2020

miguelmartins17 commented Jan 10, 2020

nelsonic commented Jan 10, 2020

SimonLab commented Jan 10, 2020

SimonLab commented Jan 10, 2020

SimonLab commented Jan 10, 2020 •

edited

Loading

SimonLab commented Jan 10, 2020

nelsonic commented Jan 10, 2020

miguelmartins17 commented Jan 10, 2020

miguelmartins17 commented Jan 10, 2020

nelsonic commented Mar 22, 2021

nelsonic commented Mar 22, 2021

nelsonic commented Feb 2, 2023

LuchoTurtle commented Feb 2, 2023 •

edited

Loading

nelsonic commented Feb 2, 2023

LuchoTurtle commented Feb 2, 2023

nelsonic commented Feb 2, 2023

nelsonic commented Feb 23, 2023

SPIKE: Flutter Web Applications #9

SPIKE: Flutter Web Applications #9

Comments

nelsonic commented Jan 3, 2020 • edited Loading

Todo

nelsonic commented Jan 9, 2020 • edited Loading

nelsonic commented Jan 9, 2020 • edited Loading

nelsonic commented Jan 9, 2020

nelsonic commented Jan 9, 2020 • edited Loading

SimonLab commented Jan 9, 2020

SimonLab commented Jan 9, 2020

miguelmartins17 commented Jan 10, 2020

miguelmartins17 commented Jan 10, 2020

nelsonic commented Jan 10, 2020

SimonLab commented Jan 10, 2020

SimonLab commented Jan 10, 2020

SimonLab commented Jan 10, 2020 • edited Loading

SimonLab commented Jan 10, 2020

nelsonic commented Jan 10, 2020

miguelmartins17 commented Jan 10, 2020

miguelmartins17 commented Jan 10, 2020

nelsonic commented Mar 22, 2021

nelsonic commented Mar 22, 2021

nelsonic commented Feb 2, 2023

LuchoTurtle commented Feb 2, 2023 • edited Loading

nelsonic commented Feb 2, 2023

LuchoTurtle commented Feb 2, 2023

nelsonic commented Feb 2, 2023

nelsonic commented Feb 23, 2023

nelsonic commented Jan 3, 2020 •

edited

Loading

nelsonic commented Jan 9, 2020 •

edited

Loading

nelsonic commented Jan 9, 2020 •

edited

Loading

nelsonic commented Jan 9, 2020 •

edited

Loading

SimonLab commented Jan 10, 2020 •

edited

Loading

LuchoTurtle commented Feb 2, 2023 •

edited

Loading