Flutter

UI Components, Adaptive and Responsive Design

Michael Lazebny

Oct 23, 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.

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

Dependency Injection in Flutter

Dependency injection (DI) makes your code easier to manage, scale and test by reducing tight coupling between modules. In this article, we'll explore how to set up and use DI in a Flutter application without any libraries. Outline 1. What is Dependency Injection 2. How to Initialize App