Organizing my articles for Flutter and Server Side Dart

Image for post
Image for post

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.

New articles

Flutter

First steps with Flutter series

Widgets


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

Image for post
Image for post
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

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 update the instructions when null safety enters stable.


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

Image for post
Image for post
original photo source

This article is a continuation in exploring Dart as an HTTP server backend, but without any frameworks or third-party packages. Knowing how to build a Dart server from scratch will not only make you a better developer in general, but will also keep you from being left in the lurch when your favorite framework falls off a cliff.

Go back and read Part 1: Building a Dart server from scratch if you haven’t already. …


Image for post
Image for post
How do I parse out the individual pieces of a URL?

The Uri class in Dart has good documentation, but sometimes seeing examples makes it a lot easier to understand. This article will show examples for all of the main parameters to make them more clear.

Creating a Uri

You can create a Uri by parsing string like this:

Uri uri = Uri.parse('http://www.example.com');

The following examples will all reference uri but I’ll omit the line above to save space. Every example will start with the URL string to be parsed.

Properties of Uri

scheme

The scheme is something like http, https, or file. There are a lot more.

http://www.example.comString scheme = uri.scheme;
print(scheme); // http

authority

The authority in a URL is normally just the main website without the scheme or path or anything. …


If you can understand the bytes, you can understand anything.

Image for post
Image for post

Preface

I started on this topic because I was researching how to communicate between Dart and a PostgreSQL database server. It turned out to be much more low-level than I had been expecting. I thought I’d write a short article explaining some of new things I was learning. Well, three full days of writing later, that short article has turned into one of the most in-depth explanations I’ve ever written on an already niche topic. Although the article is long, I don’t think you’ll find it boring, and there’s a good chance you learn one or two new things about Dart even if you’ve been using it for a while. I certainly did. As always, please let me know if you find any errors. That’s how I learn. And try the code examples out yourself. …


A full demo to get you started

Image for post
Image for post
The demo keyboard you’ll create

This article will show you how to create a custom keyboard widget used to enter text in a Flutter TextField within your own app. Use cases include text input for special characters or languages where a system keyboard may not exist or users may not have the correct keyboard installed. For example, I’ve used this method with the mongol package to create a basic keyboard to enter traditional Mongolian text:


A guide to building your own custom RenderObject

Image for post
Image for post
The custom render object widget you’ll create

The normal way to create widgets in Flutter is through composition, which means combining several basic widgets into a more complex one. That’s not what this article is about, but if your not familiar with the concept, you can read more about it in Creating Reusable Custom Widgets in Flutter.

When the existing Flutter widgets can’t be combined in a way to match what you need, you can use a CustomPaint widget to draw exactly what you want. …


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

Image for post
Image for post

I really like being able to use the same language to write server code as when I write Flutter apps. Two of the main frameworks to do that have been Aqueduct and Angel. Unfortunately, Angel is being deprecated and Aqueduct hasn’t published a stable version for some time (as of December 2020).

Since the A’s are out, it’s time for plan B.

While frameworks are nice, there’s always a bit of magic about them. The dart:io library, which is one of the core Dart libraries, already includes the low-level classes and functions needed to make an HTTP server. …


A quick reference for your second migration

Image for post
Image for post

If you’ve already followed the migration guides in one of these places:

Then you know what to do. This article is a quick summary for migrating your second package or project so that you don’t have to sift through all the details in the documentation again.

Switch to the beta channel

flutter channel beta
flutter upgrade

Check dependency status

dart pub outdated --mode=null-safety

Replace any dependencies in pubspec.yaml with the null safety version.

dart pub upgrade

Note: I had an old package that didn’t use pedantic. This made Dart complain about null safety issues too early. You can add it to pubspec.yaml


For people who like to dive into the details

Image for post
Image for post

Since Flutter only supports horizontal text layouts, I’ve had to do a lot of digging into the source code of its text rendering system as I create vertical text widgets for traditional Mongolian. In this article I’ll share what I’ve discovered about how text editing widgets work in Flutter.

Before diving into that, though, let’s first review how the Text widget works.

Text rendering

Usually all we see of the Text widget is something like this:

Text(
'Hello world',
style: TextStyle(fontSize: 30),
),

However, there are many layers below that.

Widgets layer

When you use a Text widget, what it actually creates is a RichText widget. …

About

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