(I did a presentation last night and had this question asked. Couldn't find it on SO so I thought I'd ask and answer it myself to help others out).
When running my flutter project, it is demanding an emulator be available but I want it to run in a browser. I noticed that there's an android folder and an ios folder but no web folder. How do I get it to run on the web?
You were on the wrong channel when you created the project. Flutter has multiple channels. To fix it, you'll go to the 'master' channel and add the web components.
Run these commands in your project folder:
$ flutter channel master
$ flutter config --enable-web
$ flutter create .
Don't worry; it doesn't clobber or remove anything when you flutter create .. It just adds the web capability. Now when you run, it'll recognize a browser as a valid environment.
Related
I created a flutter web application,
and I finished building it with the command ..
flutter build web --release ,
and then transferred it to a local server ,
The site does not work unless it is connected to the Internet ,
I want the site to work without an internet connection ,
As I work in an organization and some users do not have internet permissions .
Please, I want a solution to this problem .
Thanks
The problem is, that flutter has some dependencies, that can not be resolved when you, as the client, are offline. Mostly consisting of canvaskit and certain google fonts.
There are multiple solutions for that. The easiest being to use the html web-renderer:
flutter build web --release --web-renderer html
this should work for most applications, however it has lower performance than canvaskit, especially with high widget density.
Therefore you can also use canvaskit locally as it is automatically built when you build your release. But you have to set it as base url, by adding the following lines in your index.html:
<script>
window.flutterConfiguration = {
canvasKitBaseUrl: "/canvaskit/"
};
</script>
This makes sure your flutter application uses the local source for canvaskit. However, another problem could be the usage of google fonts, e.g. Roboto, as those often need to be downloaded as well. But you can just add those to the pubspec.yaml explicitly to account for that, like explained here.
Some sources for more informations:
flutter web-renderers
The same issue but on github
Making Flutter offline capable
Download and set locally from asset policy for your web application
Add link to local Canvaskit as bellow :
flutter build web --web-renderer=canvaskit
--dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/
To make it work for a dev build, I incorporated Spanching's answer above in the following steps.
Run: flutter clean to clean up all build cache (this is important to have canvas kit re-downloaded in step 4 below).
Run: flutter pub get to download packages per pubspec.yaml
If you're using build runner: dart run build_runner build --delete-conflicting-outputs
At this stage you should have a clean /build folder (I also have an ios sub-folder as I'm also developing for iOS)
Run: flutter build web
At this stage you should have a clean /build/web added with a canvaskit folder underneath it. Full path: /build/web/canvaskit/
Then:
Open index.html under /web (note - do not open the one under /build/web)
Add the script mentioned in the answer above to the body of the html file. I just added it above the existing script that's already there.
Run your project in deubg mode (with Wifi turned off).
I make flutter web app and test in debug mode. That is working. Later, Run flutter build web --release this command and then copy files from build/web to the web folder and host on github pages. All is work.
later, I fix some functions and do that above steps again, but nothing changes in github pages. Always show old web, functions. But there is changes in web debug mode. I build with flutter 2.0. How to fix that problem or how should I do?
Do flutter clean. Build for web again and upload the latest build files. Probably your ide created a build from cache
I can solve now...
1.
Clean the build file or type the command flutter clean
2.
Build web release with flutter build web --web-renderer canvaskit --release
3.
Copy all of files and folder inside from web folder inside build folder build/web , to the repo and push again.
the dart path is correct, the environment variable also fine but I can not figure what went wrong, I can not create or run flutter projects. I don't know what is the is please help me figure out this.
There could be chances that you've installed a Flutter before and Flutter took parts of the old version to initialize. Here is a related GitHub post.
Usually a workaround here is to remove or delete flutter_tools.stamp.
rm FLUTTER_ROOT/bin/cache/flutter_tools.stamp
But for most, replacing the existing Flutter SDK with the new one from the Flutter website works like charm.
I should have bookmarked it, but the googles aren't being helpful.
There was a recent (past week or so) that the standard flutter command on the master branch can now eliminate the difference between Flutter and flutter_web repositories. This will be helpful for an upcoming demo.
Since the question is asking where the announcement link was, I bookmarked them. (Probably you don't need anymore though).
https://groups.google.com/forum/#!topic/flutter-announce/-LQPz3C3JAM
https://www.reddit.com/r/FlutterDev/comments/cl6cul/flutter_for_web_preview/
Edited:
I just tried the new approach and made some mistakes. So I would like to share more on this.
Steps at Flutter (Channel master, v1.9.1-pre.91):
First create a new project:
flutter create --web project
OR
$ flutter create project
$ cd project
$ flutter create --web .
Compile and Run the project with chrome (will launch chrome)
$ flutter run
That's all.
Another thing I found out: if you add the plugin which flutter web does not support, you can still pub get, compile successfully. The error will only happen when the unsupported code is triggered and then report some exceptions such as NoSuchMethodError: '<Unexpected Null Value>'.
Another Note: If you don't connect any mobile devices, flutter run by default will launch the chrome device. If you connect a mobile device, flutter run will pick the mobile device, compile and install it to your mobile device (at least it's the case in my env). So when you have both mobile and chrome devices, to launch the web case, simply execute flutter run -d chrome.
More links:
https://github.com/flutter/flutter/issues/34082
https://github.com/flutter/flutter/wiki/Building-a-web-application-with-Flutter
I know it maybe still early but I want to try and use full flutter existing cross-platform support in one project. Stability is not my main concern.
I have started a flutter project in android studio. Naturally I have (android/Ios) going smoothly. But I would love to add Web and desktop to the same project.
Please help me with and direction, or if there is solution any one has created however much experimental.
There is a migration guide for web here. I got it up and running on a very basic existing app.
Best way is to do it in a separate branch since it requires changing packages and I even deleted .packages and pubspec.lock files first. Then I ran pub get (not flutter packages get) to download the required packages and run some precompilers.