Image for post
Image for post

Flutter has released web support that allows you to create dynamic websites. With Flutter web, MacOS, Linux, and Windows operating systems (even on mobile devices connected to a mouse, keyboard, or other peripherals), you now have access to platform-specific behaviors including focus support, keyboard input, custom mouse cursors, and hover input. But, how do you make use of these platform behaviors in Flutter?

This article explains how to use the FocusableActionDetector widget, which handles keyboard input, focus input, hover input, and custom mouse cursors.

How to use the Focusable Action Detector widget

The Focusable Action Detector widget allows you to handles several web-specific actions, including:

  1. Keyboard input
  2. Focus…

Dart Code Viewer Flutter package

The dart_code_viewer package for Flutter allows you to easily show and copy dart code in your Flutter application.

Getting Started

Image for post
Image for post

With the dart_code_viewer package, you can show Dart code in a Flutter application. The dart_code_viewer is well documented and has the same theming pattern that the Flutter framework has.

The code viewer can be used to display dart code. By default the DartCodeViewer gives you a theme based code view. This means that the code viewer has two different default theming , light and dark mode.

The code viewer requires a non-null data String as required input.

The DartCodeViewer requires one of its ancestors to be a Material widget. This is because the code viewer uses the MediaQuery widget. Which is typically introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree. …

How to write cleaner code using extension methods in Dart

Image for post
Image for post
Example of Dart code using an extension method

Dart has recently released support for extension methods, which means that you can now use this awesome feature. This article describes one example of how I use extension methods in my Flutter code.

I’ve always used enums in my Flutter code, but integrating enums and extension methods has made developing in Flutter easier and the code cleaner to read.

Let’s say you make an enumeration and your text is dependent on your enum. Previously, I would have used a switch statement within the Widget by using IIFE (medium post). An immediately invoked function expression lets you invoke an anonymous method, which is a useful Dart pattern. But using this pattern might lead to spaghetti code, as shown in the example below. …


Jose Alba

Recently graduated from university and now works on maintaining the Flutter Material Library.

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