Home / JavaScript / Flutter

A minimal electron application with flutter & dart

electron-quick-start-flutter A minimal Electron application with flutter & dart To Use # Clone this repository git clone https://github.com/hayderux/electron-quick-start-flutter # Go into the repository cd ele
Information
Category: JavaScript / Flutter
Watchers: 5
Star: 104
Fork: 21
Last update: Aug 2, 2022
Resource links
https://github.com/hayderux/electron-flutter

electron-quick-start-flutter

A minimal Electron application with flutter & dart

Screenshot

To Use

# Clone this repository
git clone https://github.com/hayderux/electron-quick-start-flutter
# Go into the repository
cd electron-quick-start-flutter
#install flutter dependencies
flutter pub get
# Install dependencies
npm install
# Run the app
npm run dev

Release

To build for production, first run npm run build.

The output directory, build contains a package.json pointing to the built application, and can be run as follows:

cd build
npm install
npm start

Package

The output directory's package manifest, build/package.json, includes electron-packager, and therefore can be packaged for distribution on Windows, MacOS, and Linux.

to build for the host platform run:

npm run build

To build for all platforms, run :

npm run package
3 Open More issues
Closed

Update and new scripts

this is an update for #7 where you need to go build/web subfolder to packaging. Now, all is on the top-level folder. Update template for flutter HTML and delete no useful log and lock files because this is created by npm and pub. I change the devDependencies to maintain script and to maintain easy electron and electron-packaging version

PD: English is not my mother tongue, please be patient and help me to improve my communication skills

opened Aug 20, 2020 by redfox-mx 3
Closed

Sadly, this fails at the last step of, npm run package

Sadly, this fails at the last step of, npm run package No doubt I've missunderstood...

$ npm run package npm ERR! missing script: package

npm ERR! A complete log of this run can be found in: npm ERR! /home/jradley/.npm/_logs/2020-08-10T21_57_48_599Z-debug.log

$ cat /home/jradley/.npm/logs/2020-08-10T21_57_48_599Z-debug.log 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli '/home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/bin/node', 1 verbose cli '/home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/bin/npm-cli.js', 1 verbose cli '--nodedir=/home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js', 1 verbose cli 'run', 1 verbose cli 'package' 1 verbose cli ] 2 info using [email protected] 3 info using [email protected] 4 verbose stack Error: missing script: package 4 verbose stack at run (/home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/lib/run-script.js:155:19) 4 verbose stack at /home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/lib/run-script.js:63:5 4 verbose stack at /home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/node_modules/read-package-json/read-json.js:116:5 4 verbose stack at /home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/node_modules/read-package-json/read-json.js:436:5 4 verbose stack at checkBinReferences (/home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/node_modules/read-package-json/read-json.js:391:45) 4 verbose stack at final (/home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/node_modules/read-package-json/read-json.js:434:3) 4 verbose stack at then (/home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/node_modules/read-package-json/read-json.js:161:5) 4 verbose stack at /home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/node_modules/read-package-json/read-json.js:382:12 4 verbose stack at /home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/node_modules/graceful-fs/graceful-fs.js:115:16 4 verbose stack at FSReqCallback.readFileAfterClose (internal/fs/read_file_context.js:61:3) 5 verbose cwd /home/jradley/Documents/programming/flutter-electron/electron-flutter/build 6 verbose Linux 5.4.0-42-generic 7 verbose argv "/home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/bin/node" "/home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js/npm/bin/npm-cli.js" "--nodedir=/home/jradley/.sdkman/candidates/java/20.1.0.r11-grl/languages/js" "run" "package" 8 verbose node v12.15.0 9 verbose npm v6.13.4 10 error missing script: package 11 verbose exit [ 1, true ]

opened Aug 10, 2020 by jradxl 2
Closed

build failed

webdev tool is not available for flutter compilation and it launches this error


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

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

***
  Command: C:\Program Files\Dart\dart-sdk\bin\pub.bat deps
#0      _runPubDeps (package:webdev/src/pubspec.dart:70:5)
#1      PubspecLock.read (package:webdev/src/pubspec.dart:84:11)
#2      readPubspecLock (package:webdev/src/command/shared.dart:63:39)
#3      BuildCommand.run (package:webdev/src/command/build_command.dart:51:29)
#4      CommandRunner.runCommand (package:args/command_runner.dart:197:27)
#5      _CommandRunner.runCommand (package:webdev/src/webdev_command_runner.dart:38:24)
#6      CommandRunner.run.<anonymous closure> (package:args/command_runner.dart:112:25)
#7      new Future.sync (dart:async/future.dart:224:31)
#8      CommandRunner.run (package:args/command_runner.dart:112:14)
#9      run (package:webdev/src/webdev_command_runner.dart:19:56)
#10     main (file:///C:/Users/new_m/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/webdev-2.5.3/bin/webdev.dart:17:22)
#11     _startIsolate.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:305:32)
#12     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:174:12)
Unhandled exception:
ProcessException: ***OUT***

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

***
  Command: C:\Program Files\Dart\dart-sdk\bin\pub.bat deps
#0      _runPubDeps (package:webdev/src/pubspec.dart:70:5)
#1      PubspecLock.read (package:webdev/src/pubspec.dart:84:11)
#2      readPubspecLock (package:webdev/src/command/shared.dart:63:39)
#3      BuildCommand.run (package:webdev/src/command/build_command.dart:51:29)
#4      CommandRunner.runCommand (package:args/command_runner.dart:197:27)
#5      _CommandRunner.runCommand (package:webdev/src/webdev_command_runner.dart:38:24)
#6      CommandRunner.run.<anonymous closure> (package:args/command_runner.dart:112:25)
#7      new Future.sync (dart:async/future.dart:224:31)
#9      run (package:webdev/src/webdev_command_runner.dart:19:56)
#10     main (file:///C:/Users/new_m/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/webdev-2.5.3/bin/webdev.dart:17:22)
#11     _startIsolate.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:305:32)
#12     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:174:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 255
npm ERR! [email protected] build: `webdev build`
npm ERR! Exit status 255
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\---\AppData\Roaming\npm-cache\_logs\2020-03-03T02_16_23_547Z-debug.log
opened Mar 2, 2020 by ilhuicatl 2
Closed

Unable to load preload script: .../electron-flutter/preload.js

Hey,

Thank you for this interesting template :smiley:

Unfortunately, I cannot get it to work: Neither npm run dev nor npm run build works on my machine.

After following the instructions I don't get the Flutter Hello, World! screen. When opening the developer console in the application, I see the following output:


electron/js2c/renderer_init.js:91 Unable to load preload script: /home/elias/electron-flutter/preload.js
electron/js2c/renderer_init.js:91 Error: Cannot find module '/home/elias/electron-flutter/preload.js'
    at Module._resolveFilename (internal/modules/cjs/loader.js:972)
    at Function.i._resolveFilename (electron/js2c/renderer_init.js:35)
    at Module._load (internal/modules/cjs/loader.js:848)
    at Function.f._load (electron/js2c/asar_bundle.js:5)
    at Object.<anonymous> (electron/js2c/renderer_init.js:91)
    at Object../lib/renderer/init.ts (electron/js2c/renderer_init.js:91)
    at __webpack_require__ (electron/js2c/renderer_init.js:3)
    at electron/js2c/renderer_init.js:3
    at ___electron_webpack_init__ (electron/js2c/renderer_init.js:3)
    at electron/js2c/renderer_init.js:172
electron/js2c/renderer_init.js:111 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
    Policy set or a policy with "unsafe-eval" enabled. This exposes users of
    this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.

I am running a Linux system, though I don't know if that's related to the problem :sweat_smile:

Best regards, Elias

opened May 6, 2021 by trin94 1
Closed

Bump electron from 8.2.4 to 8.5.1

Bumps electron from 8.2.4 to 8.5.1.

Release notes

Sourced from electron's releases.

electron v8.5.1

Release Notes for v8.5.1

Fixes

    • Fixes the following issues for frameless when maximized on Windows:
  • fix unreachable task bar when auto hidden with position top
  • fix 1px extending to secondary monitor
  • fix 1px overflowing into taskbar at certain resolutions
  • fix white line on top of window under 4k resolutions. #25219
  • Fixed powerMonitor not emitting suspend/resume events on some Windows machines. #25163
  • Fixed an issue where notifications with a reply button could potentially be destroyed too early when a user clicked on the notification body before replying. #25102
  • Fixed an issue where some Node.js methods would not work with URL instances constructed in the renderer process. #24861
  • Fixed frameless window's size being changed when restored from minimized state. #25057
  • Fixed inactive windows having active titlebar on Windows. #24875
  • Fixed network permission error when there are multiple WebContents sharing same session are created with web security disabled. #25181
  • Fixed node's TLS stack not allowing renegotiation. #25042
  • Fixed window size being changed after unmaximizing. #25148

Other Changes

  • Backported the fix to CVE-2020-6532: Use after free in SCTP. #24886
  • Security: Backported fix for CVE-2020-6541. #25025
  • Security: backported fix for 1095584. #25227
  • Security: backported fix for 1103827. #25244
  • Security: backported fix for 1104046. #25243
  • Security: backported fix for 1105202. #25262
  • Security: backported fix for 1105426. #25241
  • Security: backported fix for 1106682,1109467. #25239
  • Security: backported fix for 1107433. #25235
  • Security: backported fix for 1107815. #25232
  • Security: backported fix for 1115345. #25266

electron v8.5.0

Release Notes for v8.5.0

Fixes

  • Fixed an issue where suspend/resume were emitted twice on macOS. #24844
  • Fixed crash when navigating from a page with webview that has inherited zoom level. #24766

electron v8.4.1

Release Notes for v8.4.1

Fixes

  • Fix: DCHECK failure in value.IsHeapObject() in objectsdebug.cc. (Chromium security issue 1084820). #24565
  • Fix: PDFium Javascript Active Document memory corruption. (Chromium security issue 1091404). #24570
  • Fix: XSS on chrome://histograms/ with a compromised renderer. (Chromium security issue 1073409). #24626
  • Fix: heap-use-after-free in content::NavigationRequest::OnWillProcessResponseProcessed. (Chromium security issue 1090543). #24568

... (truncated)

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies 
opened Oct 6, 2020 by dependabot[bot] 1
Closed

Bump normalize-url from 4.5.0 to 4.5.1

Bumps normalize-url from 4.5.0 to 4.5.1.

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies 
opened Jun 11, 2021 by dependabot[bot] 0
Open

Are `web/main.js` and `web/main.dart` needed?

I think this files are not needed, they do nothing.

Or are they needed to build release?

opened Oct 13, 2021 by selankon 0
Open

I need to "force reload" to see the flutter app

Following readme isntructions, after running npm run dev, I have to force to reload the app to see the "hello world".

Is this a bug? Is Electron problem?

Thanks in advance

opened Oct 13, 2021 by selankon 1
Open

Provide a justification for using this over the desktop embedder

I know that the embedder isn't ready yet, but that can't be used as an argument, since Flutter Web isn't ready either.

But, in addition to having to ship both the massive electron runtime, which is already easily 50MB, then adding the flutter runtime on top of that, easily 5MB, and you're already at 55MB minimum for hello world.

There is also a MASSIVE performance hit. Both because of having to use V8 to run javascript-compiled Dart, but also because skia isn't used directly to render the UI, but instead, JS APIs have to be hit, making the overall experience strictly inferior to the embedder.

Since this is the Desktop, there aren't any restrictions on what can be used or not inside of the app, so it's 100% possible to embed a JS engine inside of your flutter app instead.

From an outsider's point of view, It just looks like this combines the worst of Web Technologies and Flutter, with few of their upsides, so it's important to highlight the reasons as to why one might want to use this (or one might want not to use this, if this is just an experiment).

opened Aug 11, 2019 by miyoyo 24

Contents

    nklayman vue-cli-plugin-electron-builder Electron Builder Electron Webpackvue-cli-plugin-electron-builder - A Vue Cli 3 plugin for Electron with no required configuration that uses Electron Builder and Electron Webpack.
    ibhavikmakwana Useful Flutter and Dart Tips.
    electron :electron: 🚀 The easiest way to get started with Electron
    flutter Dart & Flutter DevTools is a suite of performance tools for Dart and Flutter.
    nklayman vue-cli-plugin-electron-builder - Vue CLI 3 Plugin for Electron with no required configuration that uses Electron Builder.
    SimulatedGREG Electron Vue - An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
    flutter-rs flutter-rs — Build flutter desktop app in dart & rust.
    tahseenquraishi In this repo I have build an awesome Flutter food delivery app ui. This Flutter UI challenge is taken from the dribbble. The main beauty about this UI is their hero animation while moving towards the food detail page. This Flutter Food delivery app UI tutorial is beneficial for those who want to learn the advanced concept for building the flutter ui. Apart from these I have used the latest version of flutter i.e Flutter 2.0 to building this app.
    sindresorhus Useful utilities for Electron apps and modules
    yoshuawuyts Set of helper modules to build Electron applications
    akashlilhare Dart Sentiment is a dart module that uses the AFINN-165 wordlist and Emoji Sentiment Ranking to perform sentiment analysis on arbitrary blocks of input text.
    wiltonribeiro Flutter component concept created with Flutter using Dart programming language, inspired by Gooey Rab Bar.
    im-parsa A simple calculator application built in Electron.
    GatchHQ A light-weight Emoji 📦 for Dart & Flutter with all up-to-date emojis written in pure Dart 😄 . Made from 💯% ☕ with ❤️!
    reZach The best way to build Electron apps with security in mind.
    subfuzion Create slim Docker images for Dart using dart-scratch as the base
    SimulatedGREG An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
    electron-userland A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box
    vandadnp Dart Optimization Tips and Tricks
    mj-hd Gameboy Emulator by Dart&Flutter
    simpletut Open Source Electron React Redux Starter Kit
    Share this repo

    Related Repos


    Flutter
    2.5k
    Create skeleton screens that automatically adapt to your app!
    dvtng React Loading Skeleton Make beautiful, animated loading skeletons that automatically adapt to your app. Open on CodeSandbox Learn about the changes in
     
    Flutter
    4
    Do's and Don'ts for Flutter development
    ibhavikmakwana Best practices in Flutter development Do's and Don'ts for Flutter development, heavily inspired from the android-best-practices Summary Add a linting
     
    Flutter
    9
    How to build Flutter apps by every squad.
    VB10 Ozel Tesekkurler Haluk (dokumanin tamamen onun tarafindan hazirlandi) 🌟 Flutter ile Proje Geliştirme: PM, UI, Backend, Flutter PM-Project Manager Tas
     
    Flutter
    4
    A simple VS Code extension which helps you generate your image assets in 1x, 2x, and 3x an...
    devmuaz Flutter Image Asset Generator A simple Visual Studio Code extension which helps you generate your image assets in 1x, 2x, and 3x and simply added them
     
    Flutter
    51
    Library for creating highly customizable CLI-like progress bars in javascript
    NathanPB Simple highly customized CLI-like progress bar for Javascript If you get any questions or suggestions just open a discussion or an issue Installation
     
    Flutter
    3
    Saying hello to the Flutter framework
    rohanbari A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is your
     
    Flutter
    3
    simple login design if you edit you can do the same to sign up
    J3nx Login Design If you want a simple design that you can use to log in, you can do the same to register. Star If you like the project, you can show it by
     
    Flutter
    10
    Dalal Street Flutter Client for 2022
    delta Dalal Street Client in Flutter Prerequisites Flutter >2.12 Download Link Check Prerequisites Run if you have installed all the required flutter depend
     
    Flutter
    34
    A highly customizable streaming flow builder.
    bytedance Introduction A highly customizable streaming flow builder. The registration ability can flexibly customize your nodes, different types of node display
     
    Flutter
    24
    This repository consist of many login page example, whch can be used for any web or hybrid...
    LoginRadius Awesome Login pages A Project which includes curated list of different login page web pages. Name Desktop Screenshot Mobile Screenshot Contributed by
     
    Flutter
    34
    Turkish Go Developers
    yakuter Türkiye Go Dili Geliştirici Listesi Bu doküman şu tweet ile başlamış olup Türkiye'deki Go Programlama Dili geliştiricilerini tek bir çatı altında topl
     
    Flutter
    99
    Dart Optimization Tips and Tricks
    vandadnp Going Deep with Dart Going Deep with the Dart language. Issue 1 - Prefer const over final Issue 2 - const in Dart Issue 3 - for loop in Dart Issue 4 -
     
    Flutter
    12
    Normalize CJK characters in text
    daangn normalize-CJK Normalize CJK characters in text Usage import { // Function to normalize CJK text in the given string normalize, // Function to n
     
    Flutter
    15
    Neumorphism design digital clock
    jasminmif Neomorphism design digital clock Demo Check it live: https://codesandbox.io/s/neo-digital-clock-y47d6 Libraries used react react-transition-group Avai
     
    Flutter
    34
    A portfolio for developers
    smakosh Portfolio for developers Gatsby version Gatsby-portfolio-portfolio Features TypeScript Eslint/Prettier configured Scores 100% on a11y / Performance /