Organizing my articles for Flutter and Server Side Dart

The articles below are mostly on Medium but also span a few other sites. If Medium is blocking you because you don’t have an account, let me know and I’ll provide a friend link. Click the (🤝) emoji to get the friend link.

New articles

Featured

These are…


There are a million variables when talking about playing audio in a Flutter app, so this tutorial will seek to limit the scope to one basic task: playing short audio clips. Short audio clips don’t require a background service, setting a playlist, seeking to some position, buffering, or adjusting playback speed. That makes this an ideal topic for your first audio tutorial in Flutter.

There are a number of audio packages on Pub, but this tutorial will be using Just Audio. It supports Android, iOS, web, and macOS, and there is work being done on Windows and Linux.

Short audio…


The biggest challenge for me when coming to Flutter was learning state management. People were saying Provider and Bloc and ScopedModel and Redux and MobX and…I had no idea what they were talking about. As time passed the list of state management solutions continued to grow.

In my learning journey I wrote articles about Stacked (here) and Provider (here and here) and Riverpod (here and here). I went through the Bloc pattern and BlocLibrary tutorials and looked into Cubit and GetX and watched videos about Redux and MobX and Command. But with each one there was always something that I…


What’s the difference?

Photo by Sarah Kilian on Unsplash

Background

  • In Dart an Exception is for an expected bad state that may happen at runtime. Because these exceptions are expected, you should catch them and handle them appropriately.
  • An Error, on the other hand, is for developers who are using your code. You throw an Error to let them know that they are using your code wrong. As the developer using an API, you shouldn't catch errors. You should let them crash your app. Let the crash be a message to you that you need to go find out what you're doing wrong.
  • An assert is similar…


A thousand pictures is worth a word

Consider this a visual supplement the InputDecoration documentation. Sometimes it’s easier to just see and understand rather than reading a long description.

No decoration

TextField(),


A whole new meaning to mobile developer

What? They don’t have computers?! How am I supposed to teach mobile app development if the students don’t have computers?

When asked if I would teach Mobile App Development in Spring 2021 at Mongolia International University, I gladly agreed. This would be a great opportunity to systematically present Flutter, a modern cross-platform UI framework for making native apps, one that I greatly prefer over plain Android and iOS development.

As Covid-19 continued to drag on throughout 2020 and into 2021, like at many of the schools around the world, the classes at MIU…


If you don’t crawl around the Flutter source code much you’ve probably never heard of text affinity, represented by the TextAffinity enum. It’s an interesting concept, though, and in this article I’ll try to make it easy to understand through the use of images.

The word affinity means attraction. This is referring to which part of the text the cursor (or caret as it’s sometimes called) is attracted to. To explain that, it’s first necessary to talk about text position, represented by the TextPosition class.

Text position

TextPosition has an offset property which is used for cursor location or text selection.

Left-to-right text

Take…


Text extraction from an LRC lyrics file

Text manipulation is a common programming problem. However, I generally try to avoid regular expressions (regex) because they are completely unreadable:

RegExp _email = RegExp(r"^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$")…


Ok, not that kind of socket.

Sockets are a means of two-way communication over a network. This is similar to HTTP communication, but instead of making a single request and getting a single response, you leave the channel open for further communication. This has applications in chat apps, database communication, and other real-time messaging applications.

A socket server can listen for and receive connections from multiple socket clients. The server can then broadcast messages to all of the connected clients or take a message from one client and forward it on to another.


Part 3 in a series about Server Side Dart without a framework

Dart testing

If you haven’t read the first two parts of this series, you may want to start with them because they’ll provide a lot of background information that I won’t reexplain today:

  1. Building a Dart server from scratch
  2. Routing HTTP requests in a Dart server

If you’re comfortable with those topics, though, there’s no need to refer to them. This article will contain all the code you need to follow along.

Note: I’m using the pre-null safe version of Dart (2.10.4) to write this article, but I plan to…

Suragch

A Flutter and Dart developer. Follow me on Twitter @suragch1 to get updates of new articles.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store