When working with Javascript and TypeScript, arbitrary use of single quotes and double quotes may not cause errors but will result in a lack of consistency and readability. Therefore, choosing and going with a certain quote…

The complete example below shows you how to create a toast, a kind of alert message that mimics the push notifications that have been popularized on mobile applications. A typical toast usually contains a brief message…

In HTML, the <figure> tag is used to mark up an image while the <figcaption> tag (nests inside <figure>) displays the caption that describes the associated image. The following examples show you how to style figure…

Tailwind CSS provides grid utilities that are handy for creating responsive layouts with rows and columns. This tutorial article walks you through a couple of examples of using Tailwind’s grid system in action. A Brief Overview…

At the time of writing, GetX (aka Get) is the most-liked Flutter package (9.7k+ likes). This multi-purpose library provides a bunch of features, including state management, navigation & routing. You can also upload files to a…

Flutter provides several built-in widgets that can help you create a bottom bar for your app (BottomAppBar, BottomNavigationBar, CupertinoBottomTab, and maybe NavigationRail). However, there might be cases where you want to make a special bottom bar…

This practical article walks you through a couple of different ways to create image buttons in Flutter (I use network images for the coming examples so that you can readily run the code without any extra…

A switch (also known as a toggle) is an interactive component that lets users select between a pair of opposing values (e.g. on/off, true/false, light/dark) and has different appearances to distinguish the choice. This article shows…

A sticky navbar (or an affix navbar) is a navbar that fixates to the top of the page when you scroll past it. This practical article walks you through a complete example of creating a navbar…

This article walks you through a couple of practical examples about adding borders to Cards in Flutter. Card Border Customization To config borders for a Card widget, focus on its shape property. We can set this…

If you’re running a Flutter with an iOS simulator or an Android emulator by using the following command: Then you’ll notice that whenever you print out a long string, list, map, or JSON data to the…

This article is about ListWheelScrollView in Flutter. We’ll discover the fundamentals of the widget and then study 2 different examples. The first example is straightforward and nondescript, while the second one is a result of customization…