Bloc: flutter_bloc for Flutter WEB

[fvisticot]

We try to use flutter_bloc with flutter WEB and it does not work:

Error message: flutter_bloc depends on flutter any from sdk which is forbidden, flutter_bloc is forbidden.

any idea ?

After more reading, I understand that i need to fork the flutter_bloc and make a replace "script" for plugin imports (replace import flutter to import flutter_web)

[felangel]

Hi @fvisticot 👋
Thanks for opening an issue!

Flutter for web is still in a technical preview stage and they have forked flutter temporarily in order to ensure everything works properly before merging back into master. I would not recommend spending time to get flutter_bloc working for flutter_web because it’s not in a stable state yet. Once flutter for web stabilizes and is recommended for production use I will ensure that the library is fully compatible 😄

Hope that helps 👍

[QoLTech]

I am using this in my flutter_web project.

All that needed to be done is changing the pubspec.yaml of flutter_bloc to use flutter_web instead of flutter and changing the imports to flutter_web instead of flutter.

How would I go about publishing what I've done, so that other people can test their projects that use flutter_bloc on web?

[felangel]

You shouldn’t need to change anything in the bloc library in order for it to work on web anymore https://github.com/flutter/flutter/pull/32360

[geminiyellow]

hi @felangel , flutter/flutter#32360 merged, do you have any plan make this library work in flutter_web ?

[felangel]

@geminiyellow yes this library should work on mobile, desktop, and web 👍

Is there any problem you’re running into currently?

[geminiyellow]

hi @felangel yes, here is what i do:

> mkdir bloc_sample && cd bloc_sample
> stagehand flutter-web-preview
> flutter packages get
> webdev serve --auto refresh

[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 12.6s
[INFO] Caching finalized dependency graph completed, took 159ms
[INFO] Succeeded after 12.8s with 548 outputs (3169 actions)
^C⏎        

# add flutter_bloc: any 

> flutter packages get
> webdev serve --auto refresh

Unhandled exception:
ProcessException: ***OUT***

***ERR***
The Flutter SDK is not available.

***
  Command: /Users/dev/Documents/Source/flutter/bin/cache/dart-sdk/bin/pub deps
#0      _runPubDeps (package:webdev/src/pubspec.dart:70:5)
<asynchronous suspension>
#1      PubspecLock.read (package:webdev/src/pubspec.dart:84:11)
<asynchronous suspension>
#2      readPubspecLock (package:webdev/src/command/shared.dart:62:39)
<asynchronous suspension>
#3      ServeCommand.run (package:webdev/src/command/serve_command.dart:101:29)
<asynchronous suspension>
#4      CommandRunner.runCommand (package:args/command_runner.dart:196:27)
<asynchronous suspension>
#5      _CommandRunner.runCommand (package:webdev/src/webdev_command_runner.dart:38:24)
<asynchronous suspension>
#6      CommandRunner.run.<anonymous closure> (package:args/command_runner.dart:111:29)
#7      new Future.sync (dart:async/future.dart:224:31)
#8      CommandRunner.run (package:args/command_runner.dart:111:11)
#9      run (package:webdev/src/webdev_command_runner.dart:19:56)
#10     main (file:///Users/dev/Documents/Source/flutter/.pub-cache/hosted/pub.dartlang.org/webdev-2.0.4/bin/webdev.dart:17:22)
<asynchronous suspension>
#11     _startIsolate.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:298:32)
#12     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:171:12)

[felangel]

@geminiyellow what version of flutter are you using? Can you please post the output of flutter doctor -v? Thanks!

[geminiyellow]

okey, here is it:

> flutter doctor —v
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[✓] Android Studio
[✓] IntelliJ IDEA Ultimate Edition (version 2019.1.2)
[✓] VS Code (version 1.33.1)
[✓] Connected device (2 available)

• No issues found!

[felangel]

Can you try flutter upgrade —force to use latest master? I don’t think the changes are in stable.

[geminiyellow]

i did it, nothing change here.

> flutter upgrade —force
Upgrading Flutter from /Users/dev/Documents/Source/flutter...
Updating b593f5167..7a4c33425
 11 files changed, 488 insertions(+), 83 deletions(-)

Upgrading engine...

Flutter 1.5.4-hotfix.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7a4c33425d (2 weeks ago) • 2019-04-29 11:05:24 -0700
Engine • revision 52c7a1e849
Tools • Dart 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)

Running "flutter packages upgrade" in native_sample...              4.5s

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[✓] Android Studio
[✓] IntelliJ IDEA Ultimate Edition (version 2019.1.2)
[✓] VS Code (version 1.33.1)
[✓] Connected device (2 available)

• No issues found!

[geminiyellow]

opps, sorry, you say master. sorry.

[geminiyellow]

@felangel , now i m in

> flutter doctor —v
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.5.9-pre.234, on Mac OS X 10.14.4 18E226, locale ja-JP)

and , still not working. same error.

BTW, i use it (flutter_bloc) in web, create by > stagehand flutter-web-preview

[felangel]

@geminiyellow i'm taking a look right now 👍

[felangel]

@geminiyellow you can update your pubspec.yaml to point to a temporary flutter_web compatibility branch for flutter_bloc

name: bloc_sample
description: An app built using Flutter for web

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any
  flutter_bloc:
    git:
      url: https://github.com/felangel/bloc
      path: packages/flutter_bloc
      ref: flutter_web

dev_dependencies:
  build_runner: any
  build_web_compilers: '>=1.0.0 <2.0.0'
  pedantic: ^1.0.0

dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

[geminiyellow]

hey ya, it working. thank you @felangel , will u release it later?

[axellebot]

TLDR :

At the moment if you want to use Flutter on the web you have to replace all flutter package use by flutter_web package in all source code and library you are using.

@felangel just pushed this change on a branch for a temporary use to make it easier for you to use this library with flutter_web.

Explain :

@geminiyellow this is just a hax to make bloc use flutter_web package instead of the flutter package.

You have to know that the flutter team that work on flutter for web have forked the official flutter package to use a stable version of the flutter SDK. So temporary they using this version by importing flutter_web package instead of flutter package.

When the flutter_web package will be release it will be merged with the flutter package and the flutter_web package will no longer exists :)

Ref : https://youtu.be/IyFZznAk69U?t=1557

[MichealReed]

@felangel I'm running into this error when trying to use the workaround you mentioned. Any tips?

Resolving dependencies...
Package doesn't exist (the pubspec for flutter_bloc 0.13.0 from git has version 0.17.0).
exit code 69

[axellebot]

@felangel I'm running into this error when trying to use the workaround you mentioned. Any tips?

Resolving dependencies...
Package doesn't exist (the pubspec for flutter_bloc 0.13.0 from git has version 0.17.0).
exit code 69

@MichealReed Can you give us the pubspec.yml file you are using please ?

[MichealReed]

@axellebot

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any
  http: ^0.12.0
  socket_io_client: ^0.9.1
  flutter_bloc: 
    git:
      url: https://github.com/felangel/bloc
      path: packages/flutter_bloc
      ref: flutter_web
  equatable: ^0.1.0

dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0
  pedantic: ^1.0.0

dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

```! Doctor found issues in 4 categories.
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version 10.0.17758.4], locale en-US)
• Flutter version 1.5.4-hotfix.2 at C:\srcflutter
• Framework revision 7a4c33425d (7 weeks ago), 2019-04-29 11:05:24 -0700
• Engine revision 52c7a1e849
• Dart version 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)

[X] Android toolchain - develop for Android devices
X 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.

[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/setup/#android-setup for detailed instructions).

[!] VS Code (version 1.34.0)
• VS Code at C:\Users\Miche\AppData\Local\Programs\Microsoft VS Code
X Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[!] Connected device
! No devices available
```

Since I'm only focused on web atm, I'm not worried about the android toolchain or studio. Using VS Code insiders, so flutter isn't detecting right.

[axellebot]

@MichealReed Can you add to the same post flutter doctor info ?

[axellebot]

It looks like the package command mixing the 0.17.0 version and the flutter_web branch version (0.13.0) from the cached flutter_bloc package ... 🤔

Can you check all cached version of flutter_bloc package ?

[MichealReed]

@axellebot I've tried flutter clean to no avail. Any other way to delete/check cache, a bit new to flutter.

[axellebot]

All dependencies for flutter projects are managed by the Dart tool pub, you should be able to see all hosted libraries in this directory :

• Windows : %APPDATA%\Pub\Cache\hosted\pub.dartlang.org
• Linux : ~/.pub-cache

For example :

[MichealReed]

I checked the folders in both /git/cache and /pub.dartlang.org and deleted the older versions, but I'm still getting the same error. Should I try with a fresh project, or will that not matter?

[felangel]

@MichealReed I just tried and was not able to reproduce your issue. Can you please just try clearing your entire pub-cache?

[MichealReed]

@felangel tried clearing entire pubcache, tried this, tried get and upgrade. Not sure what's happening here, could there be a problem with the repo?

After all of the above steps, this reappears:

[felangel]

@MichealReed can you confirm the problem still happens when you create a fresh flutter project?

[MichealReed]

@felangel hitting same on fresh project.

[felangel]

@MichealReed I’ll investigate shortly 👍

[felangel]

@MichealReed are you on gitter? It would be much easier to debug the issue over chat/a live coding session.

[felangel]

Since the flutter_web branch has been merged into the flutter master branch (https://github.com/flutter/flutter/issues/34082), the flutter_web branch for flutter_bloc is no longer necessary.