Flutter

UI Components, Adaptive and Responsive Design

Michael Lazebny

23 Oct 2024 — 11 min read

This is the continuation of a series of articles Crafting Perfect UI Kit, where we talk about implementing a UI kit for the Flutter application. So far we've talked about theme (colors, typography) and created a few components - text field and buttons.

In this part, we will create more components such as text, cards and other button types. In addition, we will talk about adaptive and responsive design, and how to implement them correctly.

Sticky headers in Flutter

If you’ve landed here, you likely already know what sticky headers are. But if not, here’s a quick GIF to show you what will build today: Simple and efficient sticky headersSimple and efficient sticky headers. GitHub Gist: instantly share code, notes, and snippets.Gist262588213843476 Sticky headers are great

Navigation in Flutter

This article provides insights into how Navigator and router-based packages work but sticks to the essentials. Along the way, I’ve also shared my personal thoughts and ideas on implementing navigation in Flutter, along with my vision for how it all comes together in practice. Table of Contents 1. Navigator

Authentication in Flutter with Supabase (OAuth included)

I’ve been working on a Flutter app for a while and recently decided to add authentication. Setting it up correctly is challenging, especially when it comes to managing backend infrastructure and administration. So, there are several common approaches to implementing authentication, including: 1. Building a custom authentication service 2.

Designing State Management and Business Logic in Flutter

State management and business logic are two critical parts of the application architecture. This article explains how to distinguish between them and how to implement BLoC correctly. Table of Contents 1. Core Concepts * Business Logic * State Management 2. Fundamental Design Patterns * Observer Pattern * State Pattern 3. The BLoC Pattern * Why