Stories by code.with.ferdi on Medium

The App Works… But the Code Is Problematic: Flutter BMI Bug Hunting

code.with.ferdi — Mon, 18 May 2026 12:15:49 GMT

A simple Flutter BMI calculator may look fully functional, but behind the UI there are hidden logic bugs, testing issues, UX flaws, and bad coding.

Introduction

When learning Flutter, many beginners focus on one thing: “Does the app run successfully?” If the application compiles without errors and the UI looks correct, it often feels finished. However, in real software development, a working app does not always mean the code is good, scalable, or even correct.

In this article, I performed a simple bug hunting session on a beginner Flutter BMI Calculator project. At first glance, the app looked completely fine, but after reviewing the code more carefully, I found several hidden issues related to logic, validation, UI/UX, testing, and maintainability. This article explores those problems, their impacts, and how they can be improved.

Incorrect BMI Classification Logic

One of the most important bugs existed inside the BMI classification logic.

if (bmi < 18.5) return 'Kurus';
if (bmi < 25.0) return 'Normal';
if (bmi < 30.0) return 'Normal';
return "Obesitas";

The issue is here:

if (bmi < 30.0) return 'Normal';

The BMI classification logic is incorrect because values between 25–29.9 are still categorized as “Normal” instead of “Overweight.” As a result, users may receive misleading health information even though the application appears to work correctly. This can be fixed by changing the returned category for BMI values below 30 to “Overweight.”

if (bmi < 30.0) return 'Overweight';

Potential Keyboard Overflow

The form layout uses a long Column without scroll support.

Column(
  children: [

When the keyboard appears on smaller screens, Flutter may throw:

Bottom overflowed by XX pixels

Wrap the content with:

SingleChildScrollView

This allows the UI to scroll safely.

GestureDetector Used as a Button

The submit button is built using:

GestureDetector + Container

instead of Flutter’s built-in Material buttons.

This removes several important features: ripple effects, accessibility support, disabled states, proper semantics

Better Alternative

ElevatedButton

No Responsive Design

The layout relies heavily on fixed spacing:

SizedBox(height: 30)

The UI may look inconsistent across different screen sizes.

Better Approach Use: MediaQuery, LayoutBuilder, responsive utilities

UI Makeover: From Basic Layout to Modern Minimalist Design

Besides fixing bugs and logic issues, I also redesigned the UI to make the application feel cleaner and more modern. The original version used basic Flutter widgets with minimal styling, while the improved version focuses on:

cleaner spacing
soft background colors
rounded corners
modern card layouts
better typography
Material Design components

For example, the old version used a simple GestureDetector + Container as a button:

GestureDetector(
  child: Container(

This was replaced with a modern ElevatedButton:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    borderRadius: BorderRadius.circular(18),
  ),
)

I also redesigned the result page by adding:

dynamic BMI status colors
card-based layout
health icons
better visual hierarchy
more responsive spacing

The updated UI not only looks more professional, but also improves user experience and readability. This demonstrates that bug hunting is not only about fixing crashes or logic errors, but also about improving usability and overall application quality.

Conclusion

Building a working application is only the first step in software development. Even though this Flutter BMI app runs successfully, it still contains hidden issues related to logic, validation, UI/UX, and maintainability. This project shows that bug hunting is an important learning process because good software is not only about whether the app works, but also about how safe, scalable, and reliable the code is.

Online Resource

Resources:
https://drive.google.com/file/d/1SJrlPqwXC1c0eVo0L00GyKexMXNjKnZL/view?usp=sharing

🙌 Thanks for reading! If you found this helpful, give it a clap and follow for more beginner-friendly guides on Flutter Mobile Programming!

Flutter State Management Made Simple with a Quiz App Case Study

code.with.ferdi — Mon, 06 Apr 2026 23:10:27 GMT

Building a Simple Dice App with Stateful Widgets in Flutter

code.with.ferdi — Sat, 14 Mar 2026 09:37:17 GMT

A beginner-friendly guide to understanding dynamic UI updates using Stateful Widgets.

Introduction

When developing mobile applications, many interfaces need to change dynamically based on user interactions. Flutter provides Stateful Widgets to handle UI elements that need to update during runtime.

In this tutorial, we will build a simple Dice application. Each time the user taps the dice, the app will generate a random number and update the dice image accordingly.

Understanding Stateful Widgets

In Flutter, widgets are divided into two main categories:

Stateless Widget

A StatelessWidget is used when the UI does not change during runtime.

Example:

Static text
Icons
Layout structures

Stateful Widget

A StatefulWidget is used when the UI needs to update dynamically.

Examples:

Counters
Form inputs
Interactive components
Games

In our dice application, the dice image must change every time the user taps it. Therefore, we need to use a Stateful Widget.

Designing the Dice Layout

Before writing the code, let’s understand the layout structure of the UI.

The widget hierarchy looks like this:

MaterialApp
 └── Scaffold
      ├── AppBar
      └── Center
           └── Row
                ├── Dice Image
                └── Dice Image

Explanation:

MaterialApp provides the main structure of the Flutter application.
Scaffold creates the basic screen layout.
AppBar displays the application title.
Row arranges the dice horizontally.
Expanded ensures each dice takes equal space.

Creating the Dice State

To store the current dice values, we define two integer variables.

int leftDiceNumber = 1;
int rightDiceNumber = 1;

These variables represent the dice images that will be displayed on the screen.

Generating Random Dice Numbers

To simulate rolling the dice, we generate random numbers using Dart’s Random() class.

void changeDiceFace(){
  setState(() {
    leftDiceNumber = Random().nextInt(6) + 1;
    rightDiceNumber = Random().nextInt(6) + 1;
  });
}

Explanation:

Random().nextInt(6) generates numbers between 0–5
We add +1 so the result becomes 1–6
setState() tells Flutter to rebuild the UI with the new values

Whenever setState() is called, Flutter updates the interface automatically.

Displaying the Dice Images

Each dice is displayed using Image.asset.

Image.asset("images/dice$leftDiceNumber.png")

This allows Flutter to dynamically load images such as:

dice1.png
dice2.png
dice3.png
dice4.png
dice5.png
dice6.png

The number changes depending on the value stored in leftDiceNumber and rightDiceNumber.

Making the Dice Interactive

To allow user interaction, we wrap the dice image inside a TextButton.

TextButton(
  onPressed: () {
    changeDiceFace();
  },
  child: Image.asset("images/dice$leftDiceNumber.png"),
)

When the user taps the dice:

The button triggers changeDiceFace()
The dice numbers change
setState() updates the UI
New dice images appear on the screen

Result

When the application runs:

Two dice images appear on the screen
Tapping any dice will randomize both dice values
The UI updates instantly using setState()

This demonstrates how Stateful Widgets allow Flutter apps to create dynamic and interactive interfaces.

Conclusion

In this tutorial, we built a simple dice application to understand how Stateful Widgets work in Flutter.

We learned how to:

Create interactive UI using StatefulWidget
Update the interface using setState()
Generate random numbers using Dart’s Random class
Display dynamic images with Image.asset

Although simple, this project introduces one of the most important concepts in Flutter development: managing UI state.

Online Resource

Resources:
https://github.com/codewithferdi-rgb/practical_mobile.git

🙌 Thanks for reading! If you found this helpful, give it a clap and follow for more beginner-friendly guides on Flutter Mobile Programming!

Designing a Modern Profile Page with Flutter Widgets

code.with.ferdi — Mon, 09 Mar 2026 15:36:02 GMT

A practical guide to building clean and responsive profile interfaces in Flutter.

Introduction

User profile pages are one of the most common interfaces in modern mobile applications. They usually display important information such as a user’s name, role, profile picture, and contact details.

In this tutorial, we will learn the basics of Flutter UI development by building a simple profile page. Through this example, we will explore how Flutter layouts work using widgets like Column, Row, and Container, as well as how to display a profile image using CircleAvatar.

Project Setup

Before we start building the UI, we need to create a new Flutter project.

flutter create session4
cd session4

This command generates a new Flutter project with the default folder structure.

After the project is created, run the application using:

flutter run

Flutter will build and launch the default starter application on your emulator or connected device.

Installing Google Fonts

Typography is an important element in modern UI design. Using the right font can significantly improve readability and visual hierarchy.

Flutter provides an easy way to integrate Google Fonts through the google_fonts package.

flutter pub add google_fonts

After adding the dependency, run the following command:

flutter pub get

This will download the package and make it available in your project.

Designing the Profile Page Layout

Before writing the code, it’s helpful to understand the structure of the profile page layout.

The UI hierarchy will look like this:

Scaffold
 └── SafeArea
      └── Column
           ├── Profile Header
           ├── Divider
           └── Contact Information

The Scaffold widget provides the basic structure for the screen, while SafeArea ensures the UI does not overlap with system elements such as the status bar.

Building the Profile Header

The first section of the profile page contains the profile picture, user name, and job title.

Flutter provides the CircleAvatar widget, which is perfect for displaying profile images.

Here is the implementation:

CircleAvatar(
  radius: 50,
  backgroundImage: AssetImage("assets/images/profile.png"),
),
Text(
  "Emma Stone",
  style: GoogleFonts.inter(
    fontSize: 24,
    fontWeight: FontWeight.w500,
    color: Color(0xFF181818),
  ),
),
Text(
  "Flutter Developer",
  style: GoogleFonts.inter(
    fontSize: 16,
    fontWeight: FontWeight.w400,
    color: Color(0xFF181818),
  ),
),

Explanation:

CircleAvatar displays the profile picture in a circular frame.
Text widgets show the user's name and profession.
GoogleFonts.inter() applies a modern typography style.

To add spacing between elements, we use SizedBox.

Adding a Divider for Visual Separation

To create a visual break between the header and the contact information, we can add a Divider.

SizedBox(
  height: 20,
  width: 150,
  child: Divider(color: Color(0xFFF8F8F8)),
),

Creating Contact Information Cards

Next, we add sections to display the user’s phone number and email address.

Each item is wrapped inside a Container with padding and a subtle background color.

Phone Number Section

Container(
  padding: EdgeInsets.all(12),
  decoration: BoxDecoration(
    color: Color(0xFFF8F8F8),
    borderRadius: BorderRadius.circular(8),
  ),
  margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  child: Row(
    children: [
      Icon(Icons.phone, color: Color(0xFF181818)),
      SizedBox(width: 8),
      Text(
        "+1 234 567 890",
        style: GoogleFonts.inter(
          fontSize: 16,
          fontWeight: FontWeight.w400,
          color: Color(0xFF181818),
        ),
      ),
    ],
  ),
)

Email Section

Container(
  padding: EdgeInsets.all(12),
  margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  decoration: BoxDecoration(
    color: Color(0xFFF8F8F8),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Row(
    children: [
      Icon(Icons.email, color: Color(0xFF181818)),
      SizedBox(width: 8),
      Text(
        "emma.stone@example.com",
        style: GoogleFonts.inter(
          fontSize: 16,
          fontWeight: FontWeight.w400,
          color: Color(0xFF181818),
        ),
      ),
    ],
  ),
)

Explanation:

Container provides styling such as padding and background color.
Row arranges the icon and text horizontally.
Icon visually represents the type of contact information.
SizedBox adds spacing between the icon and text.

Complete Flutter Code

Below is the complete implementation of the profile page UI:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50,
                backgroundImage: AssetImage("assets/images/profile.png"),
              ),
              Text(
                "Emma Stone",
                style: GoogleFonts.inter(
                  fontSize: 24,
                  fontWeight: FontWeight.w500,
                  color: Color(0xFF181818),
                ),
              ),
              Text(
                "Flutter Developer",
                style: GoogleFonts.inter(
                  fontSize: 16,
                  fontWeight: FontWeight.w400,
                  color: Color(0xFF181818),
                ),
              ),
              SizedBox(
                height: 20,
                width: 150,
                child: Divider(color: Color(0xFFF8F8F8)),
              ),
              Container(
                padding: EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: Color(0xFFF8F8F8),
                  borderRadius: BorderRadius.circular(8),
                ),
                margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                child: Row(
                  children: [
                    Icon(Icons.phone, color: Color(0xFF181818)),
                    SizedBox(width: 8),
                    Text(
                      "+1 234 567 890",
                      style: GoogleFonts.inter(
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                        color: Color(0xFF181818),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.all(12),
                margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                decoration: BoxDecoration(
                  color: Color(0xFFF8F8F8),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Row(
                  children: [
                    Icon(Icons.email, color: Color(0xFF181818)),
                    SizedBox(width: 8),
                    Text(
                      "emma.stone@example.com",
                      style: GoogleFonts.inter(
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                        color: Color(0xFF181818),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Result:

Conclusion

In this article, we built a simple and modern profile page UI using Flutter widgets. We explored how Flutter’s widget-based architecture allows developers to easily construct user interfaces using reusable components.

We also learned how to integrate Google Fonts to enhance typography and improve the visual appearance of the interface.

Online Resource

Resources: https://github.com/codewithferdi-rgb/practical_mobile.git

🙌 Thanks for reading! If you found this helpful, give it a clap and follow for more beginner-friendly guides on Flutter Mobile Programming!

Manually Slicing the Mindforge Dashboard Using HTML & TailwindCSS

code.with.ferdi — Wed, 04 Mar 2026 15:38:44 GMT

How I translated a complex SaaS dashboard design into clean, scalable frontend code.

Introduction

Design to code is one of the most important skills for frontend engineers. In this article, I will explain how I manually convert the Mindforge web dashboard design (created in Figma) into HTML and TailwindCSS code.

About the Project

Mindforge is a task and project management web application designed to help users:

Manage daily tasks
Organize projects
Track performance
Visualize productivity trends

The main focus of this article is the Dashboard and Task Board layout slicing process.

Understanding the Design Before Writing Code

Before touching the HTML code, I analyzed the layout structure in Figma to understand how each part of the interface worked. Through this process, I identified that the Mindforge dashboard was divided into several main sections:

Fixed sidebar (left)
Top header section
Greeting section
Summary card
Statistics cards
Task board (Kanban style)

Tailwind Config Configuration

To simplify the process of converting Figma designs into code, you can configure tailwind.config.js to include design tokens from Figma such as colors, font sizes, and spacing. By defining custom theme values, this is useful for ensuring visual consistency across layouts.

theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },

      fontWeight: {
        regular: '400',
        medium: '500',
        semibold: '600',
        bold: '700',
      },

      colors: {
        grey: {
          50:  '#F8F8F8',
          100: '#b8b8b8',
          200: '#959595',
          300: '#656565',
          400: '#474747',
          500: '#191919',
          600: '#171717',
          700: '#121212',
          800: '#0e0e0e',
          900: '#0b0b0b',
        }
      }

    },
  },

Building the Main Layout Structure

The layout consists of two main sections: sidebar and main content

I used Flexbox because the overall layout is horizontal, with a fixed-width sidebar on the left and a main content area that needs to fill the remaining space by applying flex and flex-1.

Slicing the Sidebar

The sidebar functions as the main navigation anchor of the dashboard.

The sidebar includes:

Logo
Navigation links
Section labels
Settings at the bottom

To achieve this layout, I applied several key Tailwind utilities: flex flex-col, justify-between, min-h-screen. These utilities ensure the sidebar stacks its elements vertically, distributes space properly between the top and bottom sections.


        
            
                Mindforge
            


            
                
                    
                        Overview
                    


                    
                        
                        Dashboard
                    

                                            class="flex items-center px-3 py-2 rounded-lg hover:bg-grey-50 text-grey-500 transition mb-1">
                        
                        My Tasks
                    
                


                
                    
                        Workspace
                    


                                            class="flex items-center px-3 py-2 rounded-lg hover:bg-grey-50 text-grey-500 transition mb-1">
                        
                        Projects
                    

                                            class="flex items-center px-3 py-2 rounded-lg hover:bg-grey-50 text-grey-500 transition mb-1">
                        
                        Events
                    

                                            class="flex items-center px-3 py-2 rounded-lg hover:bg-grey-50 text-grey-500 transition">
                        
                        Calendar
                    
                


                
                    
                        Insight
                    


                                            class="flex items-center px-3 py-2 rounded-lg hover:bg-grey-50 text-grey-500 transition">
                        
                        Analytics
                    
                


            

        



        
            
                
                Settings

Creating the Header

After finishing with the sidebar, we then slice the header, which contains a search box and a create task button. At this stage, we use the tailwind css flex box utility with the space-between and items-center properties.


            
                
                                            d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
                        stroke="#828282" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                            stroke-linejoin="round" />
                

                                    class="outline-none bg-transparent w-full font-regular text-[#828282] placeholder:text-[#828282]">

Adding the Greeting Section

Right below the header, the dashboard includes a greeting section that personalizes the user experience.

Structurally, this section is relatively simple but important for the visual hierarchy. It consists of:

A title (font text-5xl, semi-bold style)
A short descriptive paragraph
Notification icon


            
                
                    Good morning, Emma Stone
                

                
                    You have 5 tasks due today and 2 upcoming events. Let's make progress.
                

            


                            class=" rounded-full p-3 mt-3 border border-[#E0E0E0] flex items-center justify-center text-gray-400 hover:bg-gray-50 transition shrink-0">
                
                                            d="M6.44784 7.96942C6.76219 5.14032 9.15349 3 12 3C14.8465 3 17.2378 5.14032 17.5522 7.96942L17.804 10.2356C17.8072 10.2645 17.8088 10.279 17.8104 10.2933C17.9394 11.4169 18.3051 12.5005 18.8836 13.4725C18.8909 13.4849 18.8984 13.4973 18.9133 13.5222L19.4914 14.4856C20.0159 15.3599 20.2782 15.797 20.2216 16.1559C20.1839 16.3946 20.061 16.6117 19.8757 16.7668C19.5971 17 19.0873 17 18.0678 17H5.93223C4.91268 17 4.40291 17 4.12434 16.7668C3.93897 16.6117 3.81609 16.3946 3.77841 16.1559C3.72179 15.797 3.98407 15.3599 4.50862 14.4856L5.08665 13.5222C5.10161 13.4973 5.10909 13.4849 5.11644 13.4725C5.69488 12.5005 6.06064 11.4169 6.18959 10.2933C6.19123 10.279 6.19283 10.2645 6.19604 10.2356L6.44784 7.96942Z"
                        stroke="black" />
                                            d="M8 17C8 17.5253 8.10346 18.0454 8.30448 18.5307C8.5055 19.016 8.80014 19.457 9.17157 19.8284C9.54301 20.1999 9.98396 20.4945 10.4693 20.6955C10.9546 20.8965 11.4747 21 12 21C12.5253 21 13.0454 20.8965 13.5307 20.6955C14.016 20.4945 14.457 20.1999 14.8284 19.8284C15.1999 19.457 15.4945 19.016 15.6955 18.5307C15.8965 18.0454 16 17.5253 16 17"
                        stroke="black" stroke-linecap="round" />

Creating the Dashboard Summary Cards

The statistics cards (Projects, Tasks, Events, Completion Rate) were built using flex box


        
            
                Active Projects

                12 Projects

                +2 this month

            


            
                Open Tasks

                48 Tasks

                +6 due today

            


            
                Upcoming Events

                5 Events

                Next: Team Sync – 14:00

            


            
                Completion Rate

                87%

                ↑ 12% from last week

Adding the Today’s Tasks Section

The Today’s Tasks section is designed to highlight priority work that needs immediate attention. Unlike the Kanban board, which focuses on workflow stages, this section emphasizes urgency and daily focus.

Structurally, it is built as a vertical list of task cards inside a container card. Each task item typically includes a title, short description, time or deadline, and status indicator.

This section uses a simple column layout with:

flex flex-col
gap-4
bg-white
rounded-xl
p-6


        
            
                Today's Tasks
            


            
                
                
                    
                        
                        
                            
                                Finalize onboarding flow UI
                            

                            
                                Website Revamp
                            

                        

                    


                    
                        
                            High Priority
                        

                        
                            • Due 10:00 AM
                        

                        
                            Completed
                        
                    

                

                
                
                    
                        

                        
                            
                                Draft weekly performance report
                            

                            
                                Operations
                            

                        

                    


                    
                        
                            Low Priority
                        
                        
                            • Due 05:00 PM
                        
                        
                            Completed
                        
                    


                



                
                
                    
                        
                        
                            
                                Prepare pitch deck for investor meeting
                            

                            
                                Fundraising Q1
                            

                        

                    


                    
                        
                            High Priority
                        
                        
                            • Due 01:30 PM
                        

                        
                            Completed

Adding the Upcoming Events Section

The Upcoming Events section complements task management by displaying scheduled activities such as meetings, and deadlines.


            
                Upcoming Events
            


            
                
                


                
                
                    
                        
                    

                    
                        
                            Today, 14:00 – 15:00
                        

                        
                            Team Sync Meeting
                        
                    


                


                
                
                    
                        
                    

                    
                        
                            26 Feb, 10:00 AM
                        

                        
                            Investor Pitch Review
                        
                    

                


                
                
                    
                        
                    


                    
                        
                            27 Feb • 01:30 PM
                        

                        
                            Product Roadmap Planning

Implementing the Chart Section

The chart section provides visual insight into productivity trends and task completion rates.



        

            
                Task Completion Trend


                

                    
                        
                            22
                        

                        
                            22
                        

                        
                            19
                        

                        
                            25
                        

                        
                            28
                        

                    


                    
                                                    d="M493 19L429.643 79.2087C429.135 79.6908 428.42 79.8841 427.739 79.7228L400.544 73.2744C400.044 73.1559 399.519 73.2276 399.069 73.4754L261.212 149.407C260.692 149.693 260.075 149.743 259.517 149.543L227.747 138.181C227.186 137.98 226.565 138.031 226.044 138.321L126.21 193.889C125.969 194.023 125.704 194.108 125.43 194.138L26.3545 205L2 205"
                            stroke="black" stroke-width="5" stroke-linecap="round" />

                        
                        
                    

                    
                        23 Nov
                        24 Feb
                        25 Feb
                        26 Feb
                        27 Feb
                    

                

            


            
                Task Distribution by Project

Task Board (Kanban Layout)

The task board section was structured using Flexbox to create a horizontal layout consisting of three columns: To Do, In Progress, and Completed, allowing tasks to be organized clearly based on their workflow status.



        
            Mindforge
            My Tasks
        


        
            
                                    class="flex items-center border border-[#E0E0E0] rounded-lg px-3 py-2 gap-2 focus-within:ring-1 focus-within:ring-grey-500">
                    
                                                    d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
                            stroke="#828282" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                    stroke-linecap="round" stroke-linejoin="round" />
                    
                                            class="outline-none bg-transparent w-full font-regular text-[#828282] placeholder:text-[#828282]">
                

            

                            class="flex  flex-row gap-3 items-center px-3 py-2 border border-[#E0E0E0] text-[#828282] rounded-lg cursor-pointer">
                
                                            stroke-linecap="round" stroke-linejoin="round" />
                
                Filter

            
        

        

                            class="task-column w-full border font-medium flex gap-3 flex-col text-grey-500 border-[#E0E0E0] bg-[#FDFDFD] rounded-lg px-4 py-3 ">
                
                    
                        
                            
                        

                         To Do (8)

                    


                    
                        
                                                            d="M12 2.67188C12.2859 2.67188 12.5605 2.78512 12.7627 2.9873C12.9649 3.18949 13.0781 3.46406 13.0781 3.75V10.9219H20.25C20.5359 10.9219 20.8105 11.0351 21.0127 11.2373C21.2149 11.4395 21.3281 11.7141 21.3281 12C21.3281 12.2859 21.2149 12.5605 21.0127 12.7627C20.8105 12.9649 20.5359 13.0781 20.25 13.0781H13.0781V20.25C13.0781 20.5359 12.9649 20.8105 12.7627 21.0127C12.5605 21.2149 12.2859 21.3281 12 21.3281C11.7141 21.3281 11.4395 21.2149 11.2373 21.0127C11.0351 20.8105 10.9219 20.5359 10.9219 20.25V13.0781H3.75C3.46406 13.0781 3.18949 12.9649 2.9873 12.7627C2.78512 12.5605 2.67188 12.2859 2.67188 12C2.67188 11.7141 2.78512 11.4395 2.9873 11.2373C3.18949 11.0351 3.46406 10.9219 3.75 10.9219H10.9219V3.75C10.9219 3.46406 11.0351 3.18949 11.2373 2.9873C11.4395 2.78512 11.7141 2.67188 12 2.67188Z"
                                fill="#656565" stroke="#959595" stroke-width="0.09375" />
                        

                    

                


                

                                            class="task-card cursor-move w-full flex flex-col gap-3 p-3 border border-[#E0E0E0] rounded-lg">
                        
                            Important
                        

                        UI/UX Design in the age of AI

                        Review dan evaluasi anggaran bulanan

                    


                                            class="task-card cursor-move w-full flex flex-col gap-3 p-3 border border-[#E0E0E0] rounded-lg">
                        OK
                        

                        Research User Persona

                        Menganalisis target audiens untuk proyek baru
                        

                    


                                            class="task-card cursor-move w-full flex flex-col gap-3 p-3 border border-[#E0E0E0] rounded-lg">
                        Not
                            that
                            important

                        Update Documentation

                        Merapikan file dokumentasi sprint minggu lalu
                        

                    
                

            

                            class="task-column w-full border font-medium flex gap-3 flex-col text-grey-500 border-[#E0E0E0] bg-[#FDFDFD] rounded-lg px-4 py-3 ">
                
                    
                        
                            
                        

                         In Proggres (8)

                    


                    
                        
                                                            d="M12 2.67188C12.2859 2.67188 12.5605 2.78512 12.7627 2.9873C12.9649 3.18949 13.0781 3.46406 13.0781 3.75V10.9219H20.25C20.5359 10.9219 20.8105 11.0351 21.0127 11.2373C21.2149 11.4395 21.3281 11.7141 21.3281 12C21.3281 12.2859 21.2149 12.5605 21.0127 12.7627C20.8105 12.9649 20.5359 13.0781 20.25 13.0781H13.0781V20.25C13.0781 20.5359 12.9649 20.8105 12.7627 21.0127C12.5605 21.2149 12.2859 21.3281 12 21.3281C11.7141 21.3281 11.4395 21.2149 11.2373 21.0127C11.0351 20.8105 10.9219 20.5359 10.9219 20.25V13.0781H3.75C3.46406 13.0781 3.18949 12.9649 2.9873 12.7627C2.78512 12.5605 2.67188 12.2859 2.67188 12C2.67188 11.7141 2.78512 11.4395 2.9873 11.2373C3.18949 11.0351 3.46406 10.9219 3.75 10.9219H10.9219V3.75C10.9219 3.46406 11.0351 3.18949 11.2373 2.9873C11.4395 2.78512 11.7141 2.67188 12 2.67188Z"
                                fill="#656565" stroke="#959595" stroke-width="0.09375" />
                        

                    

                


                

                                            class="task-card cursor-move w-full flex flex-col gap-3 p-3 border border-[#E0E0E0] rounded-lg">
                        
                            Important
                        

                        Final Prototype Review

                        Presentasi hasil akhir desain ke stakeholder
                        

                    


                                            class="task-card cursor-move w-full flex flex-col gap-3 p-3 border border-[#E0E0E0] rounded-lg">
                        OK
                        

                        Asset Exporting

                        Menyiapkan aset gambar untuk tim developer

                    

                
            

                            class="task-column w-full border font-medium flex gap-3 flex-col text-grey-500 border-[#E0E0E0] bg-[#FDFDFD] rounded-lg px-4 py-3">
                
                    
                        
                            
                        

                         Completed (8)

                    


                    
                        
                                                            d="M12 2.67188C12.2859 2.67188 12.5605 2.78512 12.7627 2.9873C12.9649 3.18949 13.0781 3.46406 13.0781 3.75V10.9219H20.25C20.5359 10.9219 20.8105 11.0351 21.0127 11.2373C21.2149 11.4395 21.3281 11.7141 21.3281 12C21.3281 12.2859 21.2149 12.5605 21.0127 12.7627C20.8105 12.9649 20.5359 13.0781 20.25 13.0781H13.0781V20.25C13.0781 20.5359 12.9649 20.8105 12.7627 21.0127C12.5605 21.2149 12.2859 21.3281 12 21.3281C11.7141 21.3281 11.4395 21.2149 11.2373 21.0127C11.0351 20.8105 10.9219 20.5359 10.9219 20.25V13.0781H3.75C3.46406 13.0781 3.18949 12.9649 2.9873 12.7627C2.78512 12.5605 2.67188 12.2859 2.67188 12C2.67188 11.7141 2.78512 11.4395 2.9873 11.2373C3.18949 11.0351 3.46406 10.9219 3.75 10.9219H10.9219V3.75C10.9219 3.46406 11.0351 3.18949 11.2373 2.9873C11.4395 2.78512 11.7141 2.67188 12 2.67188Z"
                                fill="#656565" stroke="#959595" stroke-width="0.09375" />
                        

                    

                


                

                                            class="task-card cursor-move w-full flex flex-col gap-3 p-3 border border-[#E0E0E0] rounded-lg">
                        OK
                        

                        Benchmarking Competitors

                        Melihat fitur-fitur unggulan dari kompetitor
                            sejenis

                    


                                            class="task-card cursor-move w-full flex flex-col gap-3 p-3 border border-[#E0E0E0] rounded-lg">
                        
                            Important
                        

                        Fixing Design Debt

                        Memperbaiki inkonsistensi komponen pada sistem
                            desain

                    

                                            class="task-card cursor-move w-full flex flex-col gap-3 p-3 border border-[#E0E0E0] rounded-lg">
                        Not
                            that
                            important

                        Weekly Sync Meeting

                        Rapat rutin mingguan untuk sinkronisasi tugas

Adding Interactivity with JavaScript

After finishing the manual slicing of the dashboard using HTML and TailwindCSS, the next step is adding interactivity to make the interface feel more like a real application.

In this project, JavaScript is used for several key features:

Opening and closing the task panel (modal sidebar)
Highlighting the active navigation link
Changing navbar style on scroll
Enabling drag-and-drop task management using SortableJS

Task Panel

One of the interactive elements in the dashboard is a slide-in task panel. This panel appears from the right side when the user clicks the Add Task button and can be closed using the close button, clicking outside the panel, or pressing the Escape key.

This behavior is implemented by toggling Tailwind utility classes like hidden and translate-x-full.

const overlay = document.getElementById("taskPanelOverlay");
const panel = document.getElementById("taskPanel");
const openBtn = document.getElementById("openmodalTask");
const closeBtn = document.getElementById("closeTaskPanel");

function openPanel() {
    overlay.classList.remove("hidden");
    setTimeout(() => {
        panel.classList.remove("translate-x-full");
    }, 10);
}

function closePanel() {
    panel.classList.add("translate-x-full");
    setTimeout(() => {
        overlay.classList.add("hidden");
    }, 300);
}

openBtn?.addEventListener("click", openPanel);
closeBtn?.addEventListener("click", closePanel);

overlay.addEventListener("click", (e) => {
    if (!panel.contains(e.target)) {
        closePanel();
    }
});

document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
        closePanel();
    }
});

Active Navigation Highlight

To improve navigation clarity, the sidebar automatically highlights the current page. This is done by comparing the current URL path with the href attribute of each navigation link.

document.addEventListener("DOMContentLoaded", function () {
    const currentPath = window.location.pathname.split("/").pop();

    const navLinks = document.querySelectorAll("#sidebar-nav a");

    navLinks.forEach(link => {
        const linkPath = link.getAttribute("href");

        if (currentPath === linkPath) {
            link.classList.add("bg-grey-50");
            link.classList.remove("text-grey-500");
            link.classList.add("text-[#191919]");
        } else {
            link.classList.remove("bg-grey-50");
            link.classList.add("text-grey-500");
        }
    });
});

Dynamic Navbar on Scroll

To enhance the visual hierarchy of the page, the navbar changes appearance when the user scrolls down. A background color and subtle shadow are added to make the navigation bar more visible.

const navbar = document.getElementById("navbar");

window.addEventListener("scroll", () => {
    if (window.scrollY > 10) {
        navbar.classList.add('bg-white', 'shadow-sm')
    } else {
        navbar.classList.remove('bg-white', 'shadow-sm')
    }
});

Drag-and-Drop Kanban Board (SortableJS)

To simulate real task management functionality, the dashboard uses SortableJS to enable drag-and-drop interactions between task columns.

document.addEventListener("DOMContentLoaded", function () {

    const columns = document.querySelectorAll('.task-list');

    columns.forEach(list => {
        new Sortable(list, {
            group: 'kanban',
            animation: 200,
            ghostClass: 'opacity-40',
            forceFallback: true,
            dragClass: 'rotate-1 scale-105',
        });
    });

});

SortableJS is loaded via CDN:

Final Result

After translating the design structure into HTML and TailwindCSS, the Mindforge dashboard is now fully structured with a fixed sidebar, responsive main content area, reusable card components, and a clean Kanban task board layout.

Below is the final rendered result:

Conclusion

Manually slicing the Mindforge dashboard from Figma into HTML and TailwindCSS strengthened my understanding of layout structure, spacing systems, and component-based thinking.

Online Resource: https://github.com/HFOURM/mindforge.git

Our Team: Hammam Al Rosyid Mudhoffar Septianadaw Evellyn Liena Nadhifatus Zalfa A

🙌 Thanks for reading! If you found this helpful, give it a clap and follow for more beginner-friendly guides on Web Programming!

Flutter Layout Deep Dive: How to Control Spacing, Size, and Alignment Properly

code.with.ferdi — Fri, 27 Feb 2026 13:55:46 GMT

A practical guide to building structured and responsive UI using Flutter layout widgets.

Introduction

When building user interfaces (UI) in Flutter, layout is everything. You can have neat business logic and beautiful colors, but if spacing, alignment, and structure are not handled properly, your UI will feel broken.

In this article, we’ll break down Flutter’s layout system and master essential widgets such as Padding, Container, SizedBox, Row, Column, and alignment properties.

How Flutter Layout System Works

Before discussing specific widgets, we must understand the core principles of the Flutter layout system:

Flutter follows a very important rule: Constraints go down. Sizes go up. Parent sets position.

Here’s what that means:

The parent widget provides constraints to the child (maximum width, height).
The child chooses its size within those constraints.
The parent determines the child’s position.

Unlike CSS, the child cannot freely determine its size outside the constraints provided by the parent. That’s why understanding constraints is so important to avoid layout errors such as overflow.

Spacing in Flutter: Padding vs Margin

Spacing is one of the most fundamental aspects of UI design.

Padding creates space inside a widget, between the widget’s content and its boundary.

Example:

Container(
                padding: EdgeInsets.all(10),
                color: Colors.blueGrey,
                height: 200,
                child: Text("My Container1"),
              ),

Common EdgeInsets options:

EdgeInsets.all(10) → same padding on all sides
EdgeInsets.symmetric(horizontal: 20, vertical: 10)
EdgeInsets.only(left: 8, top: 12)

Flutter does not have a standalone Margin widget like CSS. Instead, margin is applied using the Container widget:

Container(
  margin: EdgeInsets.all(16),
  child: Text("Hello"),
)

Controlling Size: Width, Height, and Constraints

You can define size directly:

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
)

However, the size must respect the parent’s constraints.

SizeBox is a lightweight widget used purely for defining size or spacing.

SizedBox(
  width: 15,
  height: 200,
)

Layout Structure: Column and Row

To properly understand Row and Column, you need to understand the concept of axes in Flutter layout.

Every Row and Column operates on two directions: the main axis and the cross axis. The main axis represents the primary direction in which children are arranged, while the cross axis represents the perpendicular direction.

In a Column, widgets are arranged vertically. This means the main axis runs from top to bottom, and the cross axis runs horizontally from left to right.

body: Column(  
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                padding: EdgeInsets.all(10),
                color: Colors.blueGrey,
                height: 200,
                child: Text("My Container1"),
              ),

              Container(
                padding: EdgeInsets.all(10),
                color: Colors.amber,
                height: 200,
                child: Text("My Container2"),
              ),

              Container(
                padding: EdgeInsets.all(10),
                color: Colors.pinkAccent,
                height: 200,
                child: Text("My Container3"),
              ),
            ],
          ),

In a Row, the behavior is reversed. Widgets are arranged horizontally, so the main axis runs from left to right, while the cross axis runs vertically from top to bottom.

body: Row(  
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                padding: EdgeInsets.all(10),
                color: Colors.blueGrey,
                height: 200,
                child: Text("My Container1"),
              ),

              Container(
                padding: EdgeInsets.all(10),
                color: Colors.amber,
                height: 200,
                child: Text("My Container2"),
              ),

              Container(
                padding: EdgeInsets.all(10),
                color: Colors.pinkAccent,
                height: 340,
                child: Text("My Container3"),
              ),
            ],
          ),

Understanding this distinction is extremely important because properties like mainAxisAlignment and crossAxisAlignment depend entirely on these axis directions. If you misunderstand the axis orientation, your alignment settings will not behave as expected.

Alignment in Flutter

Alignment inside Row and Column is controlled primarily through two properties: mainAxisAlignment and crossAxisAlignment.

The mainAxisAlignment property controls how children are distributed along the main axis. Depending on the value you choose, widgets can be positioned at the start, centered, placed at the end, or distributed with different spacing strategies such as space between them, space around them, or evenly across the available space.

For example:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text("Left"),
    Text("Right"),
  ],
)

On the other hand, crossAxisAlignment controls how children are positioned along the cross axis, which is perpendicular to the main axis. This determines whether widgets align to the start, center, end, or stretch to fill the available space in that direction.

For example:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text("Aligned Left"),
    Text("Also Left"),
  ],
)

Conclusion

The Flutter layout system may seem complicated at first, but once you understand how constraints, spacing, and axis directions work, everything becomes easier.

Online Resource

Resources: https://github.com/codewithferdi-rgb/profile.git

🙌 Thanks for reading! If you found this helpful, give it a clap and follow for more beginner-friendly guides on Flutter Mobile Programming!

Scaffold and Asset Management in Flutter: Best Practices and Implementation

code.with.ferdi — Mon, 23 Feb 2026 03:37:58 GMT

Explore how Flutter’s Scaffold widget organizes layouts and how to configure assets properly in pubspec.yaml.

Introduction

When developing applications with Flutter, understanding layout structure and resource management is crucial. A well-structured user interface (UI) improves maintainability, readability, and scalability.

This article discusses how Scaffold organizes the application layout, how to work with basic UI components such as AppBar and FloatingActionButton, and how to manage assets in Flutter.

Understanding Scaffold in Flutter

In Flutter, Scaffold serves as the structural foundation for a screen. It implements the basic layout structure defined by Material Design principles.

Minimal example:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scaffold Example'),
        ),
        body: Center(
          child: Text('Hello Flutter!'),
        ),
      ),
    );
  }
}

In this structure:

MaterialApp initializes the application with Material Design styling.
Scaffold provides the screen layout structure.
AppBar creates the top navigation bar.
body defines the primary content area.

Visual Structure of Scaffold

The following diagram illustrates how Scaffold fits into the overall widget hierarchy of a Flutter application:

From top to bottom, Flutter builds the UI as a nested widget tree:

MyApp initializes the application.
MaterialApp provides Material Design configuration.
MyHomePage defines the screen.
Scaffold structures the layout.
AppBar, Center, and FloatingActionButton occupy predefined layout slots.

Understanding Scaffold’s Role

The Scaffold widget acts as a layout orchestrator. It does not directly render content; instead, it organizes predefined sections such as:

AppBar → Top navigation area
Body (Center in this example) → Main content section
FloatingActionButton → Primary action button

Each section can contain additional widgets. For example:

AppBar contains a Text widget.
Center contains multiple Text widgets.
FloatingActionButton contains an Icon.

Working with AppBar and Basic Components

The AppBar widget supports various configuration options such as title alignment and action buttons.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
          centerTitle: true,
          actions: [
            IconButton(icon: const Icon(Icons.search), onPressed: () {}),
          ],
        ),
        body: const Center(child: Text('Welcome to Flutter')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

Explanation:

centerTitle aligns the title centrally.
actions adds interactive icons to the right side.
IconButton allows user interaction.
FloatingActionButton emphasizes the primary screen action.

Displaying an Image from the Internet

Flutter provides the Image.network() constructor to load images directly from a URL.

body: Center(
          child: Image(
            image: NetworkImage('https://www.miquido.com/wp-content/uploads/2024/08/Flutter-vs-Dart-%E2%80%93-whats-the-difference.jpg')),
        ),

When to Use Network Images

Fetching images dynamically from APIs
Displaying user-generated content
Reducing initial app bundle size

However, network images depend on internet connectivity and may introduce latency.

Managing Local Assets in Flutter

For static resources such as logos, icons, or onboarding illustrations, local assets are recommended.

Step 1: Create an Assets Folder

Project structure example:

project_root/
 └── assets/
       └── images/
             └── logo.png

Step 2: Register Assets in pubspec.yaml

Inside pubspec.yaml:

flutter:
  assets:
    - assets/images/logo.png

After saving the file, run:

flutter pub get

Step 3: Use AssetImage

body: Center(
          child: Image(
            image: AssetImage('assets/images/icon.png'),
          )
        ),

Best Practices for Asset Management

To maintain a scalable Flutter project:

Organize assets into structured folders (images, icons, fonts).
Use consistent naming conventions (e.g., snake_case).
Avoid placing all assets in the root directory.
Register directories instead of individual files when possible.
Restart the application after modifying pubspec.yaml.
Use const constructors whenever possible for performance optimization.

Conclusion

Understanding Scaffold is fundamental to mastering Flutter UI development. It provides a structured layout system that simplifies the implementation of common interface elements such as AppBar, Drawer, and FloatingActionButton.

Online Resource

Resources: https://github.com/codewithferdi-rgb/mindforge.git

🙌 Thanks for reading! If you found this helpful, give it a clap and follow for more beginner-friendly guides on Flutter Mobile Programming!

Visualizing Application Logic: A Flowchart Approach to Project and Task Management

code.with.ferdi — Sun, 15 Feb 2026 13:14:12 GMT

A step-by-step explanation of user flow, system processes, and data handling in a task management application

Introduction

Before building any application, it is important to understand how users interact with the system. One of the most effective ways to do this is to visualize the workflow through flowcharts.

This article describes a project management workflow designed using flowchart modeling. The system focuses on project organization, task tracking, and event scheduling in a productivity-oriented platform.

Main Flow Overview

The workflow begins when the user accesses the application. From this entry point, the system starts with authentication, dashboard access, project creation, task management, and event scheduling.

Authentication Flow

The authentication process ensures that only authorized users can access the platform. Users begin by entering their email address and password, which are then verified by the system.

If authentication fails, users will be asked to re-enter their credentials. If authentication is successful, the system will generate a session token that allows users to access protected features.

Dashboard Flow

After successfully logging in, users will be directed to the dashboard. The system loads and displays user data, including projects, tasks, and related activities.

The dashboard serves as the main control center of the application.

Add Project Flow

Project creation is the basis of the management system. Users enter the project title and category, which are then stored in the database.

Projects help organize tasks in a structured manner, making it easier for users to plan.

Add Task Flow

Tasks represent actionable items within each project. During task creation, users provide details such as task title, project association, priority level, and status.

Each task is linked to a specific project, allowing users to track progress systematically. This structure supports workflow monitoring and helps users maintain productivity.

Add Event Flow

The event feature allows users to schedule important activities related to their projects. Users enter event details such as title, date, and status before the system saves the information.

Event management supports deadline tracking and reminder functions.

Conclusion

This project management workflow shows how flowcharts can transform an idea into structured application logic.

Online Resources: Miro

🙌 Thanks for reading! If you found this helpful, give it a clap and follow for more beginner-friendly guides on Web Programming!

Install Flutter and Set Up Development Environment on Ubuntu

code.with.ferdi — Tue, 10 Feb 2026 04:53:05 GMT

A Step-by-Step Tutorial for Beginners to Build Flutter Apps on Linux

Introduction

Flutter has become one of the most popular frameworks for cross-platform application development. With a single code base, developers can build applications for Android, iOS, web, desktop, and other platforms.

In this guide, we will learn how to install Flutter and set up a complete development environment on Ubuntu.

Prerequisites

Before starting the installation process, make sure your system meets the following requirements.

System Requirements

Ubuntu 24.04 LTS (or compatible Linux distribution)
Minimum 8 GB RAM recommended
At least 10 GB of free storage space
Stable internet connection for downloading dependencies

Required Tools

Make sure you have the following tools installed:

Visual Studio Code
Basic familiarity with terminal commands
Git for downloading Flutter SDK

You can install Git using:

sudo apt install git

Install and set up Flutter

Now that you’ve installed Git and VS Code, follow these steps to use VS Code to install and set up Flutter.

Add the Flutter extension to VS Code

To add the Dart and Flutter extensions to VS Code

Install Flutter SDK with VS Code

To check your Flutter setup in VS Code, open the Command Palette (Control + Shift + P), type Flutter, and run Flutter: Flutter Doctor.

VS Code will prompt you to locate the Flutter SDK. If it is not installed, select Download SDK and choose the folder where you want to install it.

Configure Environment Variables

To use Flutter commands globally, add Flutter to your system PATH.

Open your shell configuration file:

nano ~/.bashrc

Add the following line:

export PATH="$PATH:/home/your-username/flutter/bin"

Save the file and reload the configuration:

source ~/.bashrc

Verify the Flutter installation:

flutter --version

Installing Android Development Tools

Flutter requires Android development tools to build and run Android applications.

Installing Android SDK and Command-Line Tools

You can install the Android SDK through Android Studio. Follow the installation steps until completion.

After the SDK installation process is complete, the next step is to install the Android SDK Command-line Tools.

After installation, define the Android SDK location:

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Accept Android licenses

flutter doctor --android-licenses

Installing Linux Build Dependencies

Flutter desktop development requires additional Linux dependencies. Install them using:

sudo apt install clang cmake ninja-build pkg-config libgtk-3-dev

These dependencies serve different roles:

clang — Compiler required for building Flutter desktop applications
cmake — Build configuration tool
ninja-build — High-performance build system
pkg-config — Helps locate installed libraries
libgtk-3-dev — Required for Linux graphical user interface support

Installing these ensures Flutter can build Linux desktop applications successfully.

Verifying Installation Using Flutter Doctor

Flutter provides a diagnostic tool to verify environment setup.

Run:

flutter doctor

Flutter Doctor checks for:

Flutter SDK installation
Android toolchain availability
Emulator configuration
Linux development dependencies

If all components are correctly installed, Flutter Doctor should show no issues. If warnings appear, follow the suggested fixes displayed in the terminal.

Running Your First Flutter Project

Once the environment is ready, create your first Flutter project:

flutter create my_first_app

Run the application:

flutter run

If the real device launches and displays the default Flutter application, your development environment is successfully configured.

Conclusion

In this guide, we have learned how to install the Flutter SDK, set environment variables, install Android development tools, set up an emulator, and verify your development environment.

With the setup complete, you are now ready to start building cross-platform applications using Flutter.

Online Resources : https://github.com/iniiferdi/coba.git

🙌 Thanks for reading! If you found this helpful, give it a clap and follow for more beginner-friendly guides on Mobile Programming!

Building a Digital Library Management System Using Object-Oriented Programming in Java

code.with.ferdi — Sat, 20 Dec 2025 14:17:57 GMT

A Practical Case Study on Abstraction, Interfaces, and Data Persistence

Introduction

Rapid advances in digital technology have transformed how libraries manage and distribute information. Traditional manual systems are being replaced by digital solutions that require structured, reliable, and scalable software capable of managing book collections, members, borrowing transactions, and data consistency.

Object-Oriented Programming (OOP) is well suited for building such systems because it models real-world entities into reusable and maintainable components. This article presents a case study of a console-based Digital Library Management System developed in Java, highlighting the practical use of OOP principles such as abstraction, interfaces, composition, aggregation, exception handling, collections, and data persistence through serialization.

Problem Statement & Requirements

This case study focuses on a digital library system designed to manage book collections, members, and borrowing transactions in a reliable and persistent manner. The application supports core library operations such as searching, borrowing, returning, and managing inventory, while applying Object-Oriented Programming principles and file-based persistence through serialization.

Object-Oriented Design Overview

Before implementing the system, it is important to design the object model that represents the core elements of the library. Conceptually, the system is built around three main entities: Book, Member, and LibraryManager.

The Book class represents a library collection item with attributes such as ID, title, author, stock, and borrowing information. The Member class represents a library user who can borrow books. The LibraryManager acts as the central controller that manages the collection of books and coordinates system operations.

Figure 1: Diagram UML Class

Abstraction and Abstract Classes

Abstraction is a fundamental concept in OOP that allows developers to focus on what an object does rather than how it does it. In this system, abstraction is implemented through the LibraryItem abstract class.

Code Snippet 1: Abstract Class

public abstract class LibraryItem implements Serializable {
    private String id;
    private String title;

    public abstract void displayInfo();
}

LibraryItem represents a generic library collection entity and defines common attributes such as ID and title. It also declares an abstract method displayInfo(), which must be implemented by all subclasses. This design enforces a consistent behavior across different types of library items while allowing flexibility in how the information is displayed.

Code Snippet 2: Implementation in Book

public class Book extends LibraryItem {
    @Override
    public void displayInfo() {
        // implementation
    }
}

By using an abstract class, the system becomes more extensible. If new types of library items (such as magazines or journals) are added in the future, they can inherit from LibraryItem without changing existing code.

Interfaces and Polymorphism

To model borrowing behavior, the system uses an interface called IBorrowable. This interface defines methods for borrowing and returning items, without specifying how those actions are implemented.

Code Snippet 3: Interface Definition

public interface IBorrowable {
    void borrowItem(Member member) throws LibraryException;
    void returnItem();
}

Interfaces improve flexibility because they allow different classes to share the same behavior contract while having different implementations. In this case, the Book class implements IBorrowable, enabling books to be borrowed and returned.

Code Snippet 4: Interface Implementation

public class Book implements IBorrowable {
    // borrowItem and returnItem implementation
}

Composition and Aggregation in Practice

The system applies both composition and aggregation to model relationships between objects. Aggregation is used in the relationship between LibraryManager and Book, where the library manages a list of books. The books can exist independently of the manager, making this a weak relationship.

Composition is applied in the borrowing mechanism within the Book class. Each book contains information about its borrower and loan date. This relationship is strong because the borrowing data is tightly coupled with the book itself. If the book is removed from the system, the borrowing information is also removed.

Exception Handling Strategy

A robust system must be able to handle errors gracefully. In this application, custom exceptions are implemented through the LibraryException class. This allows the system to provide meaningful error messages when issues occur, such as attempting to borrow an out-of-stock book or accessing a non-existent ID.

Code Snippet 5: Custom Exception

public class LibraryException extends Exception {
    public LibraryException(String message) {
        super(message);
    }
}

Output Screenshot

Collections, Streams, and Generics

To manage the book collection efficiently, the system uses Java’s List collection. Generics ensure type safety and prevent runtime casting errors.

Searching and filtering operations are implemented using the Stream API, allowing concise and readable data processing. This approach not only reduces boilerplate code but also improves maintainability. By combining collections, streams, and generics, the system adheres to modern Java development practices.

Code Snippet 6: Stream API Search

books.stream()
     .filter(b -> b.getTitle().toLowerCase().contains(query))
     .collect(Collectors.toList());

File I/O and Object Serialization

Persistence is achieved through Java object serialization. The entire state of the LibraryManager is saved to a binary file when the application exits and loaded again when the program starts.

Code Snippet 7: Serialization

ObjectOutputStream oos =
    new ObjectOutputStream(new FileOutputStream("library_db.bin"));

Serialization simplifies data storage because objects can be written and read directly without manually converting them into text formats. This ensures that all book records, borrowing data, and system states remain consistent across sessions.

Code Snippet 8: Deserialization

ObjectInputStream ois =
    new ObjectInputStream(new FileInputStream("library_db.bin"));

Console-Based User Interface Design

Although the application is console-based, attention is given to user experience. The system uses a menu-driven interface that guides users through available actions. ANSI color codes are applied to highlight important messages such as errors, success notifications, and headers.

Figure 2: Main Menu Output

Figure 3: Inventory Table Output

Figure 4: Statistics Report Output

This design demonstrates that even command-line applications can provide a clear and engaging user experience when designed thoughtfully.

System Evaluation

The primary strength of this system lies in its clear object-oriented structure and adherence to core OOP principles. The code is modular, readable, and easy to extend. The use of serialization ensures reliable data persistence, while exception handling maintains stability.

However, the system also has limitations. Being console-based, it lacks a graphical interface. Additionally, borrowing transactions are simplified and could be further enhanced by introducing a dedicated Loan class or integrating a database for large-scale usage.

Conclusion

This project demonstrates how Object-Oriented Programming can be effectively applied to solve real-world problems such as digital library management. Through abstraction, interfaces, composition, and proper exception handling, the system achieves both functionality and maintainability.

The case study highlights the importance of OOP principles in building scalable and reliable software. Even with a simple console-based implementation, thoughtful design choices can result in a robust and extensible application.

Source Code

Online Resources: Askara

🙌 Thanks for reading! If you found this helpful, give it a clap and follow for more beginner-friendly guides on Java and Object-Oriented Programming!