Flutter on mm-dev

Set up Vim for Flutter

Thu, 08 Aug 2024 17:47:33 +0100

There are various ways of installing Vim plugins. I use vim-plug in my examples here but I’ll add links to instructions for each plugin so you can do it your own way.

Dart

As Flutter uses the Dart language, install Dart support for Vim. I add the following to my ~/.vimrc:

" Between the 'plug#begin()' and 'plug#end()' lines
Plug 'dart-lang/dart-vim-plugin'

Then I restart Vim and run :PlugInstall.

This adds syntax highlighting and auto-indentation of Dart code.

Language Servers

Language Servers/LSPs (LSP = Language Server Protocol but both terms are often used interchangeably) give your editor information about the structure of a language and enable it to do syntax highlighting and code completion, along with deeper functionality such as allowing you to jump to the definition of a function, do refactoring etc.

LSPs are used in Visual Studio for a lot of its advanced functionality but they can also be used in Vim. There’s more than one way of doing this but I use coc-nvim (despite the name it works in modern versions of Vim, not just Neovim).

Install the `coc.nvim` plugin in Vim

Using vim-plug I add the following to my ~/.vimrc:

" Between the 'plug#begin()' and 'plug#end()' lines
Plug 'neoclide/coc.nvim', {'branch': 'release'}

Again, I restart Vim and run :PlugInstall.

For other ways of installing just follow the instructions .

Install a Flutter LSP

Install the Flutter language server in CoC, coc-flutter. This provides lots of helpful functionality for working with Flutter in Vim as described in the link.

:CocInstall coc-flutter

This LSP needs to know where the Flutter SDK is installed. In Vim, run :CocList FlutterSDKs and make sure it finds at least 1 SDK. If not, add a line to CoC settings (:CocConfig):

"flutter.sdk.path": "$HOME/.local/flutter/bin"

You can find the correct path with which flutter in the terminal.
Originally, I had installed my Flutter SDK at /usr/bin. That caused invisible errors with coc-flutter as it couldn’t access the path properly to find the Flutter SDK. I was having trouble getting this step working. I then moved the Flutter SDK to $HOME/.local/flutter and everything started to work properly

`coc.nvim` settings

To change CoC settings the command :CocConfig can be used in Vim. On my system it opens up the file ~/.vim/coc-settings.json. You can open/edit this file directly but depending on your Vim configuration it may be in a different location.

Here are some of the settings I prefer:

{
  "diagnostic.checkCurrentLine": true,
  "diagnostic.enableMessage": "jump",
  "colors.enable": true,
  "suggest.noselect": true,
  "inlayHint": false
}

`"diagnostic.checkCurrentLine": true,`

By default, Coc will show you a diagnostic error or warning when your cursor is over the word causing the problem. Setting this to true means you only have to be on the same line as the error to see the dialog, not the exact word.

`"diagnostic.enableMessage": "jump",`

This diagnostic popups can be really helpful, but it’s all a bit frenetic for me, I’m a prefers-reduced-motion kind of person. Setting this to jump means they don’t pop up automatically, but can still be shown when I want to see them. I also add this line to ~/.vimrc:

nmap <silent> gh <Plug>(coc-float-hide)
nmap <silent> gl <Plug>(coc-diagnostic-info)

Which allows me to show/hide the diagnostics with gh/gl respectively.

`"colors.enable": true,`

This setting is for another CoC addition called coc-highlight. I installed this in Vim with:

:CocInstall coc-highlight

This adds various types of colour highlighting, but the one I was most interested in is how it will detect any colours (eg RGB or hex) in your code and change the colour of their text to give you a preview of them. This feature is enabled with the colors.enable line as above.

`"suggest.noselect": true,`

When you start typing a word, CoC will default to inserting its first suggested autocompletion word. This is a bit more ‘help’ than I like, so I add this setting to make the process more intentional.

`"inlayHint": false,`

By default CoC inserts inlay hints, for example if you haven’t added a type hint to indicate what kind of widget is being referred to somewhere, it will insert the <Widget> hint for you as a piece of magical ghost text.

These bizarre bits of text appear in the middle of lines of code, except they aren’t really there, you can’t select them or delete them and if you’re moving your cursor around it acts as if they don’t exist. I’m sure some people enjoy them, and for those people I’m glad that they exist. For me, they are disgusting, obnoxious devil-warts.

Thankfully, they can be vanquished by adding this line to the CoC settings.

Install Flutter

Thu, 08 Aug 2024 17:47:32 +0100

Follow instructions from https://docs.flutter.dev/get-started/install/linux/android

Download the flutter_*.tar.xz archive
Unpack the archive into $HOME/.local/bin (creates $HOME/.local/bin/flutter/bin)
At first I tried putting this at /usr/bin, but that caused invisible errors in coc-flutter as it couldn’t access the path properly to find the Flutter SDK
Add the new path as above to $PATH eg in ~/.profile

# ~/.profile
export PATH="$HOME/.local/bin/flutter/bin:$PATH"

For ARM64 architectures the Flutter SDK cannot be found at the above link, nor in the archives. In this case the SDK can be obtained by cloning the main flutter repo, then running a flutter command to trigger a download of dependencies
git clone -b main https://github.com/flutter/flutter.git
./flutter/bin/flutter --version

Agree to more licenses and get Flutter doctor to pass

First, agree to several laughably long licence agreements which Google knows full well that nobody reads.

flutter doctor --android-licenses

Then type Y and Enter for each prompt

Now run flutter doctor. It should pass every test except ‘Android Studio (not installed)’. If so, we’re ready to start building Flutter apps (with Android Studio not installed).

Sample project

You can make a really simple sample project to check that everything’s installed correctly and see how it works.

flutter create sample-project

This will create a sample-project directory with a Flutter app in it, a simple built-in demo of a button which counts up as you tap it.

To run the app:

cd sample_project
flutter run

Install the Android SDK

Thu, 08 Aug 2024 17:47:31 +0100

Getting the Android SDK set up manually can be tricky, I think the expectation is that most people will use Android Studio so not a lot of work has been put in to making manual installation user-friendly.

Pick a directory where you’ll keep the SDK

This is an important directory that will always store all the Android-SDK specific tools, platforms, build tools etc. Various bits and pieces need to know where these things are, so we’ll set some environment variables for them later.

I’m using $HOME/android_sdk/ in these examples.

mkdir $HOME/android_sdk

Install the SDK Manager

This is a set of command line tools used to install different versions of the SDK (for when you want to target different Android devices).

Based on Google’s instructions at https://developer.android.com/tools/sdkmanager.

From the downloads page (I had to scroll down a long way), download the cmdline-tools zip and unzip it to the directory you created above eg $HOME/android_sdk/
Inside the unzipped directory cmdline-tools make a ’latest’ directory and move all of the other contents of ‘cmdline-tools’ inside it (so you end up with cmdline-tools/latest/bin

You should end up with something like the following (I’m using tree to list the directory contents but don’t worry about that, just make sure your directories are in the right places):

$ tree -L 2 cmdline-tools/
cmdline-tools/
└── latest
    ├── NOTICE.txt
    ├── bin
    ├── lib
    └── source.properties

Add some environment variables to `~/.profile`

Make sure these make sense based on what we’ve done so far if you’ve used different directories to me.

# ~/.profile
export ANDROID_SDK_ROOT=$HOME/android_sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

Source the profile with source ~/.profile. Then run sdkmanager and see if it does something. If you get command not found double-check everything and try rebooting.

My sdkmanager binary name clash (this won’t affect you but click to expand if you’re interested)

In my case I already had a binary installed with the name sdkmanager, as that’s the name Garmin use for their ConnectIQ SDK Manager. Apparently neither Garmin nor Google could foresee that anyone other than themselves might call their SDK manager software ‘sdkmanager’.

So I had to do some hacky stuff with bash aliases in ~/.profile to let the two live alongside each other, and remind me of the situation:

alias sdkmanager='echo "Use either *sdkmanager-garmin* or *sdkmanager-android*"'
alias sdkmanager-android=$ANDROID_SDK_ROOT/cmdline-tools/latest/bin/sdkmanager
alias sdkmanager-garmin=$HOME/.local/bin/sdkmanager

Accept SDK licences

The SDK licences must be accepted for everything to work.

sdkmanager --licenses

Then type Y and press Enter for each prompt

Install the Android toolchain

To pass the ‘Android toolchain’ step of flutter doctor (in a bit) we need 3 things:

Platform tools (generic)
A valid platform
Build tools to match the platform

Various instructions online will tell you to do things like sdkmanager "platform-tools" "platforms;android-33" (ie pass multiple arguments to sdkmanager), but as observed in this StackOverflow answer if using the command line tools, the platform tools need to be installed via separate commands ie:

sdkmanager 'platform-tools'
sdkmanager 'platforms;android-33'
sdkmanager 'build-tools;33.0.2'

If the installation has worked correctly you should end up with something like:

$ tree -L 1 android_sdk/
android_sdk/
├── build-tools
├── cmdline-tools
├── licenses
├── platform-tools
└── platforms

Another weird, me-specific problem I encountered…

At first, my installations weren’t appearing in my android_sdk directory and Flutter tools were complaining about not being able to find the Android SDK.

Forcing the SDK path like this worked: sdkmanager --verbose "platform-tools" --sdk_root=$HOME/android_sdk/

But something smelt wrong, as the original sdkmanager install commands seemed to be completing without error. I investigated this by running the following:

sdkmanager 'platform-tools' --verbose

Which revealed that they were going into:

/data/data/com.termux/files/usr/share/android-sdk/

This is because I was on Android using Termux, in a proot container, and I had previously installed the SDK in the main (non proot) Termux environment. This was not needed any more so I deleted the other installation.

This is an exotic situation and you’re probably not as stupid as I am to get into this situation, but maybe this note will help in some other situation.

Dependencies and Environment

Thu, 08 Aug 2024 17:47:30 +0100

To get started I’m presuming you have a Linux installation of something like Debian/Ubuntu.

General Dependencies

Git

You probably already have this but just in case:

sudo apt install git

Ensure Java JDK is installed and recent enough

sudo apt install openjdk-17-jdk

Stuff Flutter Needs

The latest info about this should be here but at time of writing:

sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

And some other tools Flutter uses:

sudo apt install clang cmake ninja-build

If using Chromium browser instead of Chrome

The Android SDK likes to know where Chrome is on your system. I use Chromium and the SDK can’t find it.

So I export an environment variable to let Flutter know where to find Chromium eg in ~/.profile

export CHROME_EXECUTABLE=/usr/bin/chromium

Parts of the SDK

Thu, 08 Aug 2024 17:47:30 +0100

There are several components making up the SDK. I’ll list them here along with examples of how they can be installed later on when the SDK manager is set up and working.

This is just an overview to help your mental model of what’s what, we’re not installing anything just yet.

We download them as a zip and place them in a specific directory, as detailed later.

Command Line Tools

These commands can do several things like signing and optimising APKs, but the main one we are interested in is sdkmanager. This is the command we use to install the other tools.

Platform Tools

These are tools for interfacing with Android which you may already be familiar with, such as adb and fastboot.

sdkmanager 'platform-tools'

Platforms

A platform represents a specific version of Android. It includes multiple system images, which the device emulator uses to emulate various devices on that platform.

Information used to compile your app for this platform version, and source code to be used for debugging are also included.

Multiple platforms can be installed alongside each other on the same system.

sdkmanager 'platforms;android-33'

Build Tools

These are tools used for building Android apps. I’m not 100% clear on what these are and why they are different from Platform Tools, it seems that they were part of Platform Tools in the past but have been sectioned off into their own thing.

Anyway, we need them. Usually use the latest version, but sometimes if you’re targeting specific platforms eg older ones, errors may indicate that you need an older version.

sdkmanager 'build-tools;33.0.2'

Intro

Thu, 08 Aug 2024 17:47:29 +0100

Given the choice, I’d rather avoid huge complex apps like Android Studio. They use a lot of system resources and are very GUI/point-and-clicky. Those things definitely have their place but I prefer keyboard control where it makes sense, and for me programming in Flutter is one of those situations.

A lot of what Android Studio does behind the scenes is automatically editing text files and running shell commands such as flutter run, flutter build and so on. If you’re comfortable with the terminal these commands are fairly simple to run manually.

As an IDE Android Studio also helps with stuff like syntax highlighting, code completion, refactoring etc. If you’re into Vim it can be set up to give you these pleasantries. I’m sure there is stuff Android Studio can do that Vim can’t, but whatever it is I’m not missing it and I feel good when I use Vim.

I’ve set up a couple of systems with this Flutter dev environment recently and hit some stumbling blocks. They weren’t too hard to resolve but I wanted to write up the process for future reference and to help anybody else in a similar situation.

BendyStraw (Android App)

Tue, 10 Oct 2023 13:17:20 +0100

If you don’t already know, NewPipe is a privacy-friendly, ad-free Android app for accessing YouTube. It’s a great piece of software and I use it all the time.

NewPipe works without an account. You can subscribe to channels, save playlists and do other useful things, but everything is saved locally on your device (and I love that it works like this).

I use NewPipe on several Android devices. Over time I’ve ended up with different playlists and subscriptions on each device, and sometimes I can’t be sure which device I need to use to find a certain song or video. To help with this I made BendyStraw.

Multiple databases in colour-coded tabs
Copy streams from one playlist to another
Selecting streams to delete, copy or move
Create new playlists

BendyStraw imports NewPipeData-*.zip files and lets you:

Open multiple zips at the same time, so you can combine data from several devices
Delete Copy Move Rename your custom playlists
Delete Copy Move streams from one playlist to another
Delete Copy Move channel subscriptions between databases
Delete Copy Move remote (bookmarked) playlists
Re-order playlists, sorting the streams by Title, Channel or Length (just tap the column headings in the tables)
Streams (audio/video) can be opened directly from BendyStraw, as the URLs are clickable
- If you set video links (in your Android settings) to open in NewPipe you can make a split-screen view and jump around your playlists
Export playlist as raw text, for example to be used with yt-dlp
Dark/light themes

After editing simply export a new zip file, then import it back into NewPipe.

Installation

F-Droid

Search for ‘bendystraw’ (all one word) in the F-Droid app, or find it at https://f-droid.org/en/packages/rocks.mm_dev.BendyStraw/.

Direct download

The apks are also directly available on the Codeberg releases page.

How to Use

Expand all

1. Export your database from NewPipe

In NewPipe tap Settings Backup and restore Export database
This will create a file on your device with a name like NewPipeData-2023-09-01.zip

2. Import it into BendyStraw

In BendyStraw, tap the button with the add/plus icon, and select the file you just exported

3. Edit with BendyStraw

Custom playlists have icons at the top which you can click to:

Delete the playlist
Copy the playlist to another zip (you need more than one zip added to do this)
Export the playlist as a plain text file, which for example can be used with yt-dlp

Tap on a playlist name to edit it, and tap outside (or press return on the keyboard) to finish.

4. Export from BendyStraw

In BendyStraw tap the export button (the arrow icon on the bottom-right of the screen)
This will create a new file named like the original but with -bendy-straw at the end, so NewPipeData.zip is saved as NewPipeData-bendy-straw.zip

5. Import it back into NewPipe

In NewPipe tap Settings Backup and restore Import database and select the file you just saved
After importing the database, NewPipe will ask if you also want to import settings, if you’re not sure what this means just tap ‘cancel’, your current NewPipe settings will remain unchanged

JSON Playlist Import

BendyStraw can import playlists from a JSON file. This is a new and basic feature which has some requirements and limitations.

Show the JSON Import Button

The button is hidden by default

Go to the preferences screen (hamburger menu in top-right corner)
Tick the ‘Show JSON Import Button’ box
Open at least 1 database
The button only shows when there is a database open, as it imports the JSON into the currently-opened database

Limitations

We assume that all playlist entries are YouTube streams.
Although NewPipe is able to handle streams from other services too, for now this import feature is just for YouTube

The JSON import format has been designed to prefer simplicity over richness of data. This comes with some pros and cons:

Several stream attributes (eg ‘uploader URL’, ‘duration’, ‘upload date’, ‘view count’, ’thumbnail’) are omitted initially
After import into NewPipe, before the playlist has been played, the above details (attributes) will be missing (so eg the thumbnail will just be a grey blank)
The first time each stream is started, NewPipe will grab the missing details for the stream and fill in the database

Requirements

JSON playlists will be imported into whichever database is currently open in BendyStraw.

The general (pseudocode) schema is:

{
  "PLAYLIST_NAME": [ARRAY_OF_STREAMS],
  "PLAYLIST_NAME": [ARRAY_OF_STREAMS],
  etc...
}

`PLAYLIST_NAME`

Is expected to be unique (if it isn’t, identically-named lists will be combined into 1 playlist)
If a playlist with exactly the same name already exists in the target database, entries from the JSON will be appended to that existing database

`ARRAY_OF_STREAMS`

Each stream must be an object with named properties as follows:

I use comments in this explanation but remember comments are not valid JSON — do not include comments in your JSON

{
  // These are required
  "stream_type": "VIDEO_STREAM", // or 'AUDIO_STREAM'
  "title": "Seasonal Affective Disorder",
  "url": "https://www.youtube.com/watch?v=3RJ5GftYT2c",
  "uploader": "Hidden Valley Bushcraft", // Uploader/channel name,

  // These below are optional. NewPipe will update them when the stream is loaded, so they only have meaning on first import before the playlist has been played.
  // It's probably better to omit them but they are allowed if you want to use them.
  "uploader_url": "https://www.youtube.com/channel/UCB7BPYlL4f5j5R1Y7HUgeVg", // Uploader/channel URL 
  "duration": "120", // Length of stream in seconds 
  "view_count": "1273621", // Number of times the stream has been viewed on YouTube --- simple number ie no commas, abbreviations etc 
}

Complete Example JSON

Below is some complete sample JSON. If this was imported into a database in BendyStraw it would do one of the following:

Create 2 new playlists (“Tech Things” and “Good Songs”)
Or (if playlists with those names already existed) then the streams would be appended to those existing playlists

{
  "Tech Things": [
    {
        "stream_type": "VIDEO_STREAM",
        "title": "Free software, free society: Richard Stallman at TEDxGeneva 2014",
        "url": "https://www.youtube.com/watch?v=Ag1AKIl_2GM",
        "uploader": "TEDx Talks",
        "uploader_url": "https://www.youtube.com/channel/UCsT0YIqwnpJCM-mx7-gSA4Q"
    },
    {
      "stream_type": "VIDEO_STREAM",
      "title": "Shenzhen: The Silicon Valley of Hardware (Full Documentary) | Future Cities",
      "url": "https://www.youtube.com/watch?v=SGJ5cZnoodY",
      "uploader": "Wired UK",
      "uploader_url": "https://www.youtube.com/@wireduk"
    }
  ],
  "Good Songs": [
    {
        "stream_type": "VIDEO_STREAM",
        "title": "Aztec Camera - Somewhere In My Heart (Official Music Video)",
        "url": "https://www.youtube.com/watch?v=2w1Q8ZkXZ1Q",
        "uploader": "RHINO",
        "uploader_url": "https://www.youtube.com/channel/UCWEtnEiVwUy7mwFeshyAWLA"
    },
    {
        "stream_type": "VIDEO_STREAM",
        "title": "Imagine Dragons - Thunder",
        "url": "https://www.youtube.com/watch?v=fKopy74weus",
        "uploader": "ImagineDragonsVEVO",
        "uploader_url": "https://www.youtube.com/channel/UCpx_k19S2vUutWUUM9qmXEg"
    },
    {
        "stream_type": "VIDEO_STREAM",
        "title": "𝑰𝒕'𝒔 𝑨 𝑯𝒆𝒂𝒓𝒕𝒂𝒄𝒉𝒆 -Bonnie Tyler (Cover by Yhuan) #gutomversion #hitback #goodvibestambayan #yhuan",
        "url": "https://www.youtube.com/watch?v=AQCm7VWyg-U",
        "uploader": "Yhuan Official",
        "uploader_url": "https://www.youtube.com/channel/UCDxVjSFhfiPGispcK9o0qzw"
    }
  ]
}

FAQ

Expand all

What’s in the `zip` files?

NewPipe exports a zip file, containing 2 files:

newpipe.db: A database which has all the info BendyStraw uses, such as your playlists and channel subscriptions, plus other things like your watch history
newpipe.settings: Your NewPipe settings and preferences

For simplicity BendyStraw sometimes refers to the zip file as the database, because that’s the file NewPipe works with for imports/exports.

Is my data private?

Yes! This is important to me as a developer. BendyStraw only works with the tables in the database which it requires to let you do your editing. It doesn’t look into other things like your settings or watch history and it doesn’t send your data to any servers or share it with anybody. There’s no tracking and no adverts or anything like that.

What happens to my NewPipe settings?

BendyStraw doesn’t look inside them or change them.

If you edit zips from multiple devices, or old/archived zips, be aware that your new zip will have the settings from whichever original file you opened. So be careful not to overwrite settings with an old version.
When you import your new zip into NewPipe the simplest thing to do is just tap ‘cancel’ when it asks if you want to also import settings.

I’ve opened multiple databases but don’t see enough tabs

The tabs can scroll off the edge of the screen, swipe left/right on the tab bar to see any tabs which have overflowed.

You can also swipe left or right on any blank area to switch tabs.

How do I use an exported text playlist?

If you have yt-dlp installed, you can batch download all of the files from the playlist like so:

In BendyStraw locate the playlist and tap the ’export’ button
Check the dialog to see where the text file will be saved
In your terminal run yt-dlp --batch-file [path_to_text_file.txt]

For more info check out the yt-dlp github.

Can I export an M3U playlist?

I originally did build this functionality, only to find that links to eg YouTube streams no longer work in m3u playlists. This is true for the players I tested and to the best of my knowledge.

If I’m wrong about this, you have some other relevant info, or would like to see some other export format, please let me know.*

I’d be happy to revisit this if it’s useful.

hello@mm-dev.rocks

Why do I need to grant ‘all files access’ permission in Android 13?

BendyStraw needs to work with files from a different app (NewPipe). The way permissions have changed in Android 13 makes this complicated, as document files (ie non-media files such as .zip) can only be read from and written to the directory belonging to the app that created them. The only simple way to keep the app easy to use is to ask for these permissions.

BendyStraw has no interest in doing anything unexpected to your filesystem. The code is open source, so any developer can check to make sure that it only does what it says it does.

auDav Audiobook Player

Mon, 01 Jan 0001 00:00:00 +0000

auDav is an audiobook player app. It’s for use with libraries of audiobooks stored on NextCloud (or other WebDAV storage), and runs on Android, iOS/iPadOS, Windows, Linux and macOS.

Key features:

Visual listening progress each chapter of a book is represented as a block, painted in different colours to indicate played/unplayed segments
Full-featured custom bookmarks you can add notes to a bookmark and notes can be searched
No server install the app is installed on whichever device/devices you want to listen on, you enter details for your NextCloud server (login info and path to the folder where your books are stored) and the app does the rest
Clean footprint auDav only does what it needs to do, data such as listening progress is tied to your NextCloud user, to create different accounts you do that on NextCloud
Loads of themes multiple colours in light, dark and OLED black varieties

Entering a bookmark and note
Library page with theme chooser open
Playing book with visual chapter progress