Closed nelsonic closed 1 year ago
@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/
Following the installation instructions on https://flutter.dev/docs/get-started/install/macos
flutter precache
Java ... π€¦ββ
Failed to download the Android dependencies
Downloading Android Maven dependencies... 0.4s
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
Almost there on my side (Ubuntu 19.10)
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:
@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.
@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
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.
@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.
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
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.
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
Android studio is a beast!
Going to watch this tutorial over the weekend:
https://youtu.be/dc3B_mMrZ-Q
In my opinion for simple and interactive Android applications Android Studio is one of the best.
Of course, we can also make more complex applications with Android but right now I'm very interested in Flutter too.
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 anApp
before they cantry
it is a non-starter.
Please confirm you understand what is required here. π (leave a comment on this issue).
@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 π
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
. π
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.
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.
Flutter Web
Apps are good enough that we can now use Flutter
to build our Web App with PWA support. Closing. β
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![flutter-web](https://user-images.githubusercontent.com/194400/71715277-d23c3a80-2e08-11ea-8688-47f14cb0494f.png)
Official getting started guide: https://flutter.dev/docs/get-started/web
Todo
localhost
Fly.io
to test the process.