Develop Reference

How to generate full Podfile on Flutter M1

After I created the flutter project, but in the ios folder it was missing the Podfile, I created the Podfile manually using the pod init command, but it seems that this podfile is missing:
It look like as below:
I found some flutter projects on github and accessed the ios folder and found that their podfile was completely different from mine. So here can anyone tell me how to create files like theirs.
The image as below:

NPM Package Manager on Android?

So I need a module. Using the old trick of (https://registry.npmjs.org/) I can download a single module, but that module has a dependency module which can have more on them. Its tedious. I can't use Termux (I have android 6) Is there any way to install npm package manager on android? I already have NodeJS Front End for Android, but I can't do new things without new modules. Any console with npm would work... Or an script to download npm modules and dependency's on node would work too...

Download https://registry.npmjs.org/npm/-/npm-8.5.0.tgz
Untar npm-8.5.0.tgz to a local directory, e.g. /storage/emulated/0/
Move to npm-8.5.0 and create directory cache
Now open NodeJS Frontend
Press +, set title and browse to an empty directory the-package-dir except for a node_modules subdirectory.
Set environment variable:
npm_config_cache=/storage/emulated/0/npm-8.5.0/cache
Path to js file:
/storage/emulated/0/npm-8.5.0/package/bin/npm-cli.js
js file cli options:
install --omit=dev --omit=optional --omit=peer --no-bin-links --ignore-scripts --no-audit --no-fund the-package
save and run
Now the-package installed in directory the-package-dir

Is APK size affected by unused packages in ReactNative?

I want to know do unused packages cause APK size to grow?
Consider I install dozens of NPM packages for my project but I never import and use them. These files obviously increase my project folder size but do they affect APK size when building APK?
The question can be answered about .ipa too.

APK Analyzer will not look for any unused dependent NPM packages because all your javascript code is bundled by metro before being included in your Android project as an index.android.bundle asset:
Metro is a JavaScript bundler. It takes in an entry file and various options, and gives you back a single JavaScript file that includes all your code and its dependencies.
So any unused dependencies must be pruned before creating the apk. Read about Tree shaking, which does exactly that:
Tree shaking is a process in which the bundler includes only the code that is actually used.
Note that only modules that have a dependency from your code will be included in the bundle.

How do I add media codecs support to Crosswalk while using the Cordova plug-in?

I'm building a PhoneGap app which needs to play AAC audio. It works well using the native WebView, but I would like to use Crosswalk on a build targeting APIs 16-20 because some CSS features in my app do not work at all on Android 4.x.
When I make a copy of the project to add Crosswalk Lite, I can see that the app works except for the <audio> element pointing to a AAC file. This is because Crosswalk does not ship with proprietary codecs by default.
The linked page says:
To build Crosswalk with these codecs, a developer must run the build
with the “must accept a EULA” switch turned on:
$ xwalk/gyp_xwalk -Dmediacodecs_EULA=1
Then build Crosswalk. The ffmpegsumo.dll or libffmpegsumo.so in
the build output directory will contain the proprietary codecs.
Refer to Crosswalk Build Instruction for more details.
However, I am adding Crosswalk using the suggested plug-in, thus I get pre-built libraries without proprietary codecs:
phonegap plugin add cordova-plugin-crosswalk-webview --variable XWALK_MODE="lite" --save
How can I integrate proprietary codecs in the Cordova Crosswalk plug-in?

I managed to understand the (convoluted) process of building everything. This answer deals with the process of compiling a custom build of the full Crosswalk (not the lite version).
Actually, I decided to finally use the standard build and replace AAC audio with MP3s, but I thought this answer could be useful for future reference.
Environment
I compiled Crosswalk in a Ubuntu 16.04 Docker container to avoid "polluting" my system and to ensure I had the right Linux version. The standard image is pretty barebones so I installed some dependencies. I also set up a shared folder to access the compiled files:
docker run -it -v /home/andrea/shared:/shared ubuntu:16.04 /bin/bash
apt update
apt install -y python git nano lsb-release sudo wget curl software-properties-common
export EDITOR=nano # life it too short to learn vi
Finally, it is necessary to add the multiverse repositories:
apt-add-repository multiverse
Note: this procedure needs a lot of space. Make sure to have at least 25GB of free space before continuing.
Requirements
Install the depot_tools as outlined in the documentation:
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
export PATH=$PATH:/path/to/depot_tools
Initialize a working directory with:
mkdir crosswalk-checkout
cd crosswalk-checkout
export XWALK_OS_ANDROID=1
gclient config --name src/xwalk https://github.com/crosswalk-project/crosswalk.git
Then edit the config file with nano .gclient and add the following line:
target_os = ['android']
Save the file.
Fetching the source
Attempt a first sync with:
gclient sync
This command will fail but it's OK. The instructions say:
Do not worry if gyp_xwalk fails due to missing dependencies; installing them is covered in a later section, after which you can run gyp_xwalk manually again.
Adjust the install-build-deps.sh file and then run it:
sed -si "s/msttcorefonts/ttf-mscorefonts-installer/g" src/build/install-build-deps.sh
sudo ./src/build/install-build-deps-android.sh
Run gclient sync again and wait until it finishes correctly.
Building
By inspecting the files src/xwalk/build/common.gypi and src/tools/mb/mb_config.pyl, we can see that we need to add ffmpeg_branding="Chrome" in the build arguments.
To prevent an error later on, install the development package related to libnotify:
sudo apt install libnotify-dev
Move to the src directory and open the configuration:
cd src/
gn args out/Default
Ensure the content is as follows:
import("//xwalk/build/android.gni")
target_os = "android"
is_debug = false
ffmpeg_branding = "Chrome"
use_sysroot = false
The parameters use_sysroot = false prevents yet another error. When saving the file, you should see something like this:
Waiting for editor on "/home/utente/crosswalk-checkout/src/out/Default/args.gn"...
Generating files...
Done. Wrote 6060 targets from 1003 files in 2416ms
Issue cd .. and run gclient sync again.
Finally, to build the core library do:
cd src/
ninja -C out/Default xwalk_core_library
This will build the library for ARM, producing an AAR file located at:
src/out/Default/xwalk_core_library.aar
Copy this file in a safe place.
Building for x86
Get back to the args with:
gn args out/Default
Add the following line:
target_cpu = "x86"
Save the file, run gclient sync again and then repeat the ninja command. Make a copy of the new AAR file which now contains the x86 libraries.
Using the AAR files
The standard Cordova Crosswalk plug-in uses a single AAR file with libraries for both platforms. This message by Raphael Kubo da Costa suggests how to produce this single archive:
AAR files are just zip files; given the only difference between the ARM
and x86 AAR files are the different shared libraries, you can use
something like zipmerge or anything that merges zip files (or even
extract everything into some directory and then create one new zip file)
to build one final, multi-architecture AAR archive.
Finally, to use the custom built AAR file in the Cordova plug-in, see How to change the Crosswalk version used by the Cordova Crosswalk Webview plugin.

Cordova 3.5 embedded webview with plugins

I have an existing native Android app to which I'm adding a cordova webview.
This is in the new gradle project format with Intellij.
I've successfully gotten the cordova activity loaded, and opens as expected.
I added the webview by following the cordova docs.
Now I'd like to use some of the plugins available but can't find a way to add them to the project.
Since this isn't a cordova generated project, plugman doesn't work. I've tried copying the JS and Java files for the plugins I'm interested in to my source dir but that results in various errors.
e.g. require is undefined, when this happened, I added requirejs to the webview's index.html
and it moved on to
Uncaught Error: Module name "cordova/exec" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded cordova.js:8
Failed to load resource file:///android_asset/www/scripts/cordova_plugins.js
deviceready has not fired after 5 seconds. cordova.js:1191
Channel not fired: onDOMContentLoaded
How do I get a plugin working with this?
EDIT:
I am manually moving stuff around.
This has to be put into an existing project which uses gradle for building.
Using cordova create generates a project in the old ANT format.
I followed the docs on embedding a WebView in an existing project (see the link above), but it doesn't mention any of the JavaScript files. So I just copied cordova.js from the android platform directory.
Like wise, I download the plugins I wanted, copied their JavaScript files, added the feature to build.xml and copied their Java files to my src directory.
I didn't know about cordova_plugins.js or that cordova prepare generates them.

You have to use Plugman to manage your plugins in the custom built Cordova WebView.
Please remove all your existing plugins and read them using plugman.
plugman install --platform android --project <proj> --plugin org.apache.cordova.battery-status --www <proj>/assets/www/scripts
where the <proj> is the folder where you main project is created,
Alternatively you could use --www parameter which allows you to specify where root of web application is stored. Example:
plugman install --platform android --project <proj> --plugin org.apache.cordova.battery-status --www <proj>/assets/www/scripts
Plugman reference
EDIT
If you have highly customized project, you could create empty Cordova project where you add
plugins, and copy cordova_plugins.js from this project to assets\www\scripts, Cordova should pickup these files. If you have your plugins JS files not in the assets\www\scripts\plugins\ folder, but instead of that in assets\www\plugins you have to modify content of cordova_plugins.js like that
module.exports = [
.....
{
"file": "../plugins/org.apache.cordova.inappbrowser/www/InAppBrowser.js",
"id": "org.apache.cordova.inappbrowser.InAppBrowser",
"clobbers": [
"window.open"
]
},
...
]

Here is some input on how I came though,
I am in a similar position like the OP, embedding a Cordova Web View in my Native Android Application.
After executing
plugman install --platform android --project <proj> --plugin org.apache.cordova.battery-status --www <proj>/assets/www/scripts
What happens is you get a new 'Cordova' folder in your original 'main' Folder, (Where your AndroidManifest.xml is). Besides that, there is the 'src' folder with the code you actually need generated.
What I did, was copying the org folder from src to the 'java' folder. And everything worked.