DEV Community: Usman

From Frontend to Full-Stack: Building a Real Estate Marketplace and Learning Backend Development

Usman — Sat, 14 Feb 2026 20:56:12 +0000

What is the best career advice I can give to any frontend developer right now? Learn backend development. So I took my own advice and jumped straight into servers, databases, and APIs. Coming from a React background, I already had JavaScript in my toolkit, which made picking up Express.js quite smooth. But knowing the syntax is one thing, understanding how to architect a real application is another entirely.

The Project: Soul Estate

I built a production-ready real estate marketplace with complete authentication, profile management, and CRUD operations for listings. Here’s what users can do:

Sign up with email/password or use Google OAuth for easy access
Profile Management: Update user details and upload custom avatars
Listing Management: Create, update, delete, and browse property listings
Image Uploads: Multi-image upload with Appwrite Storage (URLs stored in MongoDB)
Real-time Validation: Inline form validation with comprehensive error handling

Tech Stack:

Frontend: React + Vite, Redux Toolkit for state management, Tailwind CSS for styling
Backend: Node.js + Express.js with Mongoose ODM
Authentication: JWT cookies + Firebase Google OAuth
Storage: Appwrite for image hosting
Database: MongoDB Atlas

The project follows a monorepo structure with separate api/ and client/ directories, making it easy to manage both frontend and backend in a single repository.

Database Design and API Foundation

The first week was all about laying the foundation. I started by designing my MongoDB schemas, focusing on the Listing model, which was the core of the application:

{
  name: String,
  description: String,
  address: String,
  type: 'rent' | 'sale',
  offer: Boolean,
  regularPrice: Number,
  discountedPrice: Number,
  bedrooms: Number,
  bathrooms: Number,
  parking: Boolean,
  furnished: Boolean,
  imageUrls: [String],  // Appwrite URLs
  userRef: ObjectId     // Reference to owner
}

Then I proceeded to implement a comprehensive REST API with clear, RESTful endpoints:

Auth Routes:
POST /api/auth/signup - Email/password registration
POST /api/auth/signin - User login
POST /api/auth/google - Google OAuth flow
GET /api/auth/signout - Session termination

User Routes:
POST /api/user/update/:id - Update profile and avatar
DELETE /api/user/delete/:id - Account deletion
GET /api/user/listings/:id - Fetch user’s listings

Listing Routes:
POST /api/listing/create - Create new listing
POST /api/listing/update/:id - Update existing listing
DELETE /api/listing/delete/:id - Remove listing
GET /api/listing/:id - Fetch single listing details

The Image Upload Challenge

One of the most interesting technical challenges was implementing image uploads. Instead of using Firebase Storage, I opted for Appwrite because payment was required for Firebase usage, which clearly wasn’t going to scale. This turned out to be a valuable learning experience.

image upload interface in the listing creation form

Here’s how the flow works:

User Selects Multiple Images (React Frontend): The frontend uses a standard React state pattern to capture multiple files from a file input. The multiple attribute is essential here to allow users to select more than one property image at once

// Representative frontend component logic
const [files, setFiles] = useState([]);

const handleFileSelection = (e) => {
  // Capturing multiple files into state
  setFiles(e.target.files);
};

return (
  <input 
    type="file" 
    id="images" 
    accept="image/*" 
    multiple 
    onChange={handleFileSelection} 
    className="p-3 border border-gray-300 rounded w-full"
  />
);

2.& 3. Upload to Appwrite and Retrieve Public URLs: The application uses the Appwrite Storage service to host images. The frontend iterates over the selected files, uploads them to the configured bucket using VITE_APPWRITE_BUCKET_ID, and generates public URLs for each file

// Representative logic for uploading and URL generation
import { Storage, ID } from 'appwrite';

const storage = new Storage(client);

const uploadToAppwrite = async () => {
  const uploadPromises = Array.from(files).map((file) => {
    return storage.createFile(
      import.meta.env.VITE_APPWRITE_BUCKET_ID,
      ID.unique(),
      file
    );
  });

  const fileResponses = await Promise.all(uploadPromises);

  // Generating public URLs for the imageUrls array
  return fileResponses.map(file => 
    storage.getFileView(import.meta.env.VITE_APPWRITE_BUCKET_ID, file.$id).href
  );
};

Store URLs in MongoDB's imageUrls Array: Once the URLs are retrieved, they are included in the listing data and sent to the backend via the POST /api/listing/create route. The backend then saves these strings into the imageUrls array field defined in the Listing Mongoose model

// Backend Controller: api/controllers/listing.controller.js
export const createListing = async (req, res, next) => {
  try {
    // req.body contains the imageUrls array of Appwrite URLs
    const listing = await Listing.create({
      ...req.body,
      userRef:req.user.id, // Authenticated owner ID
    });
    return res.status(201).json(listing);
  } catch (error) {
    next(error); // Global error handling
  }
};

Frontend Fetches and Displays Images. Finally, the application retrieves the listing data. The frontend renders the images by mapping over the imageUrls array, permitting efficient display of high-quality property visuals hosted on Appwrite.

// client/src/pages/Listing.jsx

{listing.imageUrls && listing.imageUrls.map((url, index) => (
  <div 
    key={index} 
    className="h-[500px]" 
    style={{ background: `url(${url}) center no-repeat`, backgroundSize: 'cover' }}
  >
    {/* Displaying property images in a slider or gallery */}
  </div>
)}e

Property images displayed in an interactive gallery, sourced from Appwrite URLs

Using MongoDB for metadata and Appwrite for binary storage made querying the database fast and kept the backend light.

Authentication: JWT + OAuth

I implemented a dual authentication system to balance security together with user convenience. Users can choose between traditional email/password registration or streamlined Google sign-in, making sure the application accommodates different privacy preferences and use cases.

Here’s how it works:

Traditional Email/Password:

Passwords hashed with bcrypt
JWT tokens are stored in httpOnly cookies for security
Server-side validation with Mongoose schemas

2 Google OAuth (via Firebase):

One-click sign-in with Google accounts
Perfect integration with Firebase Authentication
Automatic user creation on first login

The JWT cookie strategy prevents XSS attacks since JavaScript can’t access httpOnly cookies, while Firebase handles the OAuth complexity on the client side.

Security Implementation

Security wasn't an afterthought as I applied my cybersecurity knowledge to implement multiple layers of protection from day one. Modern web applications encounter constant threats, so I focused on three critical attack vectors: Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), and unauthorised cross-origin requests.

CSRF Protection for State-Changing Requests

Since the application uses cookie-based JWT authentication, browsers automatically include these cookies in every request—even malicious cross-site ones. To prevent CSRF attacks, I implemented token-based verification on all state-changing operations (creating, updating, or deleting listings and profiles).

Here's the security middleware stack:

import cookieParser from 'cookie-parser';
import csrf from 'csurf';
import cors from 'cors';

const app = express();

app.use(express.json());
app.use(cookieParser()); // Required for reading JWT and CSRF cookies

// CORS configuration - strict origin control
app.use(cors({
  origin: 'http://localhost:5173', // Vite dev server (update for production)
  credentials: true // Allow cookies to be sent cross-origin
}));

// CSRF protection for all API routes
const csrfProtection = csrf({ cookie: true });
app.use('/api', csrfProtection, (req, res, next) => {
  // CSRF token available to frontend via cookie
  res.cookie('XSRF-TOKEN', req.csrfToken());
  next();
});

How CSRF Protection Works:

The server generates a unique CSRF token for each session.
Token is sent to the client via a cookie (XSRF-TOKEN)
The frontend includes this token in the request headers for state-changing operations.
The server validates that the token matches before processing the request.
Malicious sites can't access the token due to the same-origin policy.

Configuration: Controlled Cross-Origin Access

CORS (Cross-Origin Resource Sharing) controls which domains can access the API. The configuration above restricts API access to the legitimate frontend origin only, preventing unauthorised websites from making requests to the backend—even if they somehow obtain a valid JWT

Production Considerations:

In production, the origin is set to the deployed frontend domain (not localhost)
credentials: true ensures cookies are sent with cross-origin requests
Additional headers can be restricted using allowedHeaders and exposedHeaders

State Management with Redux Toolkit

I used Redux Toolkit to manage global state, particularly for:

User authentication status
Current user profile data
Listing creation/editing state

The code snippet represents a standard userSlice.js implementation for this project, handling user authentication, profile updates, and state persistence.

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  currentUser: null, // Stores user data including avatar and ID for userRef
  error: null,
  loading: false,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    // Auth: Email/Password and Google OAuth login flow
    signInStart: (state) => {
      state.loading = true;
    },
    signInSuccess: (state, action) => {
      state.currentUser = action.payload;
      state.loading = false;
      state.error = null;
    },
    signInFailure: (state, action) => {
      state.error = action.payload;
      state.loading = false;
    },
    // Profile Management: Handling avatar and detail updates
    updateUserSuccess: (state, action) => {
      state.currentUser = action.payload;
      state.loading = false;
      state.error = null;
    },
    // Sign out logic to clear global state
    signOutUserSuccess: (state) => {
      state.currentUser = null;
      state.loading = false;
      state.error = null;
    },
  },
});

export const { 
  signInStart, signInSuccess, signInFailure, 
  updateUserSuccess, signOutUserSuccess 
} = userSlice.actions;

export default userSlice.reducer;

A key takeaway from building this project and a basic fact about backend development is that it's not only about writing code that works; it's about writing code that's secure and scalable. The jump from frontend to full-stack requires a change in mindset. You're no longer just concerned with UI state and user actions (though these still matter); you're now responsible for data validity, authentication and security, API design, and server architecture.

Every decision has implications: choosing between SQL and NoSQL, deciding where to store images, implementing proper error handling, and securing sensitive routes. What surprised me most was how much these backend concerns influenced my frontend decisions. Understanding how data flows from the database to the API, then to Redux, and finally to React components gave me a holistic view of the application architecture that I couldn't grasp as a frontend-only developer. If you're on the fence about learning backend development, my advice is straightforward: start building

Resources

livelink: https://soul-estate.up.railway.app/

github repo: https://github.com/maxixo/mern-estate

LinkedIn: https://www.linkedin.com/in/usman-oshodi-28326b307/

[Boost]

Usman — Thu, 29 Jan 2026 07:29:30 +0000

Building a Data Visualization and Note-Taking Web App

Usman ・ Jan 28

#analysis #encryption #fullstack #webdev

Building a Data Visualization and Note-Taking Web App

Usman — Wed, 28 Jan 2026 11:21:26 +0000

The Problem

Have you ever found yourself switching between multiple tabs while analysing data and taking notes at the same time? If yes, then this tool is for you, eliminating the friction of fragmented workflows.

My Thought Process

I built an all-in-one web application that combines data visualization and secure note-taking. This tool is designed to streamline the process of analysing datasets and recording insights, all within a single, easy-to-use interface.

Here is a rundown and my inspiration for building this tool.

During my HNG internship, we were given a list of projects to choose from, and this one immediately stood out to me. I was immediately drawn to the concept of visualizing data in charts and bringing numbers to life. With a background in chemistry and extensive experience working with data in qualitative analysis, I saw an opportunity to build something that resonated with my expertise and could benefit anyone working with data.

In the course of building this, I noticed that while viewing the data, users would want to take notes on findings and insights. This prompted me to add the draft section of the web app. I took this a step further by adding a feature to encrypt your drafts and datasets with military-grade AES-256, securely protecting the data with a password, salt, IV, and buffers before storing it in the MongoDB database. Users can decrypt their notes or datasets on demand using their password, leveraging privacy for their data.

Key Features

Data Visualization

Once logged in, datasets can be viewed by uploading a CSV or Excel file. You can then select the type of chart you intend to use. Chart options include bar, line, and pie charts. Here is how a typical chart will look once a dataset is uploaded.

Screenshot of product sales chart.

[This image shows how filtering specific data (e.g., mouse products) provides focused insights within the visualization.]

Taking a close look at the first picture, we see the entire array of products sold displayed by their sales volume. You can filter for specific data and compare it with another option in the dataset. This helps to narrow down specific niches. The second picture shows exactly how this works. The sales of mouse products were specifically filtered out from the rest of the products and displayed on the chart.

When dealing with large datasets, it is common to want to take notes and make sure key details are recorded. I created a drafts section in the web app that lets users create, edit, delete, and securely store drafts. Implementing encryption was insightful for me. I learned about array buffering, which is key to how the server receives the encrypted data before storing it on MongoDB. Here is how an encrypted file looks in the backend.

Screenshot of encrypted draft file as stored in the MongoDB backend. This highlights end-to-end encryption and secure data storage.

Export Options

To retrieve and download the encrypted file from the backend, the user needs the password used during encryption. If the password is forgotten, the document is lost forever. Always use a password you can remember. You can also export your viewed charts in PNG, PDF, or JSON format. The pictures above were exported from the app.

Screenshot showing exported charts in PNG, PDF, and JSON formats, demonstrating flexible export options for analysis or sharing.

Secure Note-Taking

The note-taking portion of the app features drafts, encrypted drafts, and trash. Encrypted drafts can be easily accessed with the password created when a user encrypts a draft. Note: The password must not be forgotten unless the draft is lost forever and cannot be unlocked

[Screenshot of the note-taking interface, displaying drafts, encrypted drafts, and the trash section for managing notes securely.]

Additional Features

Other notable features include a light/dark theme toggle, an FAQ, and a user profile page for a seamless experience. The landing page is enhanced with Framer Motion animations. Authentication is streamlined with Google sign-in and robust validation for strong password protection.

Security & Best Practices

I prioritized security throughout the development process. Key practices include:

Sanitizing inputs to prevent injection attacks
Hashing passwords securely
Authenticating cookies with appropriate expiration
Rate-limiting API calls
Applying proper CORS and CSP configurations

Tech Stack

Frontend: React, Framer Motion
Backend: Node.js, Express
Database: MongoDB
Security: AES-256 encryption, bcrypt
Deployment: Railway

Here is a live link to the project. You can test it out, play around with it, or star the repo.

Resources

sample data to test: download file
live link: https://dataworld-production.up.railway.app/
github repo: https://github.com/maxixo/dataworld-
LinkedIn: https://www.linkedin.com/in/usman-oshodi-28326b307/

Give me a follow on GitHub as well; I enjoy connecting with other developers in this space.

How to fetch images with Unsplash API using Javascript

Usman — Sat, 09 Sep 2023 14:20:11 +0000

Introduction

It's common in programming to find ourselves in situations where we have to upload images to hosting services to use in our projects, which can take up valuable time and slow down the coding process. In this tutorial, I'm going to guide you on how to easily request images from an API to be directly used in your projects, using the Unsplash API as a primary example.

Prerequisite

A basic understanding of HTML, CSS and Javascript is needed for this example below.
An Editor/IDE is also recommended, If you don’t have a setup IDE you can use an online editor such as Codepen or JSFiddle.

Setting up the API

To begin, we need to create a developer account with the API provider. In this case, we are using the Unsplash API. Now, head over to the documentation link. You should see the page below. Head over to 'Create a developer account' and click 'Join' follow the provided instructions, and accept the terms for API use.

Note: You should create an account with Unsplash first.

After setting up your demo app, You should have your API key like this below

It’s also important to know that you can only make 50 requests per hour for Demo apps and apps in production have access to 5,000 requests per hour. If you need to make more requests you can upgrade your limits or contact the support team. For our tutorial, we’re only fetching images for our simple gallery.

Let's get into the coding aspect.

Coding & Explanation

First, we start with our HTLM part of the code which should look like this

 <section id="gallery">
    <div><img  class="image" alt=""></div>
    <div><img  class="image" alt=""></div>
    <div><img  class="image" alt=""></div>
    <div><img  class="image" alt=""></div>
    <div><img  class="image" alt=""></div>
    <div><img  class="image" alt=""></div>
    <div><img  class="image" alt=""></div>
    <div><img  class="image" alt=""></div>
    <div><img  class="image" alt=""></div>
    <div><img  class="image" alt=""></div>
 </section>

In this code block, we have a section that contains 10 div elements, each of which holds an image element. These image elements are currently empty, but we will be adding the source files for the images later in the code.

Styling our Gallery

Now we need to style our images to make them look more appropriate. Paste the following code in the CSS part in your codepen

/* Portfolio */
#gallery {
  width:1200px;
  margin-left:30px;
  margin: auto;
  padding-bottom: 30px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  box-shadow:  0 1px 5px rgba(104, 104, 104, 0.8);
}
#gallery img {
  height:150px;
  width: 100%;
  box-shadow:  0 1px 5px rgba(104, 104, 104, 0.8);
}

In this CSS block, we style our gallery with a width of 1200 pixels and a 30-pixel left margin for horizontal centering. We use a responsive grid layout that adapts to a minimum column width of 200 pixels with a 20-pixel gap between the image-containing divs. Lastly, we apply a box shadow to both the image and div elements for visibility.

Fetching the images

Our code wouldn't be complete without the Javascript aspect to interact with our API and fetch the images. Our JS code block should look like this :

 // Unsplash Images API request

const apiKey = 'Your API Key';
const images = document.querySelectorAll('.image');

fetch(`https://api.unsplash.com/photos/random?query=restaurant&count=10&client_id=${apiKey}`)
  .then(response => response.json())
  .then(data => {
    data.forEach((photo, index) => {
      images[index].src = photo.urls.regular;
    });
  });

Here should be the Output of all the codes put together

You can take it a step further by wrapping our request into a function 'getImages', Now we can set this function to request images at different intervals, for example :

 //getImages Function
function getImages() {
   fetch(`https://api.unsplash.com/photos/random?query=food&count=10&client_id=${apiKey}`)
     .then(response => response.json())
     .then(data => {
       data.forEach((photo, index) => {
         images[index].src = photo.urls.regular;
      });
    });
 }

// Set interval
getImages();
setInterval(getImages, 10000);

Here we are requesting new images at a 10-second interval (10,000 milliseconds).

Conclusion

We have covered the basic aspects of fetching images, This can apply to other APIs aside from Unslpash, It's the same method involved, All you need is an API key to request the server. Now you can begin to implement this in your upcoming projects or apps.

If you enjoyed the article, give me a follow here and on my GitHub

Happy Coding!

How To Implement GridView Class in Flutter

Usman — Sat, 02 Sep 2023 01:41:42 +0000

Introduction

In Flutter development we often encounter different forms of designs which require specific elements to help facilitate a better user experience. One of these elements can come in the form of Grids and we need a 'GridView' class to implement that. There are other various widgets in Flutter but we will be talking about the 'GridView' class and its various constructors today.

Prerequisite

To get the most out of this guide, You should have a basic understanding of Flutter and have it installed on your device. If you’re unfamiliar with this I recommend visiting the original Flutter documentation to set up your device. You can also use an online Flutter editor (Flutlab).

Understanding the GridView class

As the name implies the GridView class is usually used when we want to implement a grid-like design. For example, if we want to design the user interface of a chessboard, we have the white and black squares across the whole board, another good example is photos in the gallery. These square boxes are grid-like designs. I will go in-depth on the various methods that are associated with this class and its constructors. The GridView class has the main GridView builder, GridView.count, GridView .custom and GridView.extent. You have to note that there are certain limitations and benefits to each of the constructors, I will be discussing them in the sections below. Let's get into it.

How to use the GridView Class

To utilize the most out of the GridView class, You need to have an idea of the items you intend to display on the screen. You must also be familiar with the terminologies used in this section of the article. Common terms and properties associated with the GridView class are :

1 - itemCount: It determines the total number of items within the grid.

2 - gridDelegate: It plays a pivotal role in defining the layout and appearance of the grid. This takes in two parameters which are :

I. SliverGridDelegateWithFixedCrossAxisCount: This creates grid layouts with a fixed number of tiles in the cross-axis.

II. SliverGridDelegateWithMaxCrossAxisExtent: This creates grid layouts with tiles that each have a maximum cross-axis extent.

3 - crossAxisCount: This property defines the number of columns (or rows, depending on the scrolling direction) in the grid layout.

4 - mainAxisSpacing: This property defines the spacing between items along the main axis (vertical spacing if the grid scrolls vertically, and horizontal spacing if the grid scrolls horizontally).

5 - maxCrossAxisExtent: This property defines the spacing between items along the cross-axis (horizontal spacing if the grid scrolls vertically, and vertical spacing if the grid scrolls horizontally).

Now it's time to jump into the coding aspect by analyzing each of the constructors under the GridView class below.

How to use GridView.count

GridView.count constructor is a convenient way to create grid layouts with a fixed number of tiles across the cross-axis. It allows you to specify the number of columns in the grid, and Flutter automatically adjusts the layout based on the available space. It is the most basic way to invoke the GridView class and it uses the crossAxisCount parameter.

class GridViewCount extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GridView.count(
        crossAxisCount: 2,
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 50,
            width: 50,
            color: Colors.blue,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 50,
            width: 50,
            color: Colors.yellow,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 50,
            width: 50,
            color: Colors.yellow,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 50,
            width: 50,
            color: Colors.blue,
          ),
        )
      ],
    ));
  }
}

Once you run this code in your editor this is going to be the output :

To explain better, we are displaying a grid with four containers (2 blue, 2 yellow), We specified our grid to have two columns by using the crossAxisCount property and added some padding.

Benefits of GridView.count

It allows you to have precise control over the number of columns which in turn allows you to have complete control over the whole layout and it adapts automatically based on the available space, ensuring a responsive design.

Limitations of GridView.count

It is suitable for scenarios where you need a fixed number of columns and it's not advisable to use when you want a more dynamic layout over the design.

How to use GridView.builder

The GridView.builder constructor is a powerful tool that enables you to create dynamic grid layouts in Flutter. It's different from the basic GridView constructor, which requires you to provide a fixed number of items. It's best to use when working with large datasets or data generated on the go.

Components of GridView.builder

itemBuilder Function: This function is responsible for creating separate grid items, It takes two arguments (context, index) and should return a widget representing the content of the item at a given index
itemCount Property: This is a necessary property that specifies the total number of items in the Grid.
scrollDirection : This property is used to set the direction of scrolling the grid items, It can be set to vertical or horizontal.

Here's how to use it :

class GridViewBuilder extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
          gridDelegate:
           SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemCount: 32,
          scrollDirection: Axis.vertical,
          itemBuilder: (context, index) {
            return Padding(
              padding: EdgeInsets.all(8.0),
              child: Container(
                height: 20,
                width: 20,
                color: Color(0xff6c5f5f),
                child: Text('My item', textAlign: TextAlign.center),
              ),
            ); 
          }),
        );
      }
    }

Output :

In the code above, You will notice some properties that were added after the GridView.builder constructor was introduced. Properties added were the “ItemCount”, “itemBuilder”, "scrollDirection". Now in our example, we’re using the constructor to create a GridView that has a gridDelegate with a fixed cross-axis count (2 columns), while setting the itemcount to 32 to produce a total of 32 containers as children with some padding and finally we set the scrollDirection to vertical. These new properties introduced are the main components of using the GridView.builder constructor.

Benefits of using GridView.builder

GridView.builder generates items when they are needed and you can work with data sources of varying length without needing to modify the layout code. It provides smooth scrolling even with a significant number of items.

How to use GridView.extent

The GridView.extent constructor is suitable for producing grid layouts where each size of each grid item is determined by the maximum extent it can occupy along the cross axis. It's mostly useful when you want a specific size for each item regardless of the screen size. You always have to specify the maximum cross-axis extent.


class GridViewExtent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GridView.extent(
        maxCrossAxisExtent: 150,
        children: List.generate(12, (index) {
         return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            color: Colors.purple,
            child: Center(
              child: Text('Item ${index + 1}'),
            ),
          ),
        );
      }),
    ));
  }
}

Output :

In the example above, We are displaying a grid with a maxCrossAxisExtent of 150, and the grid is to display a list of 12 generated items across the whole layout with some padding on each item.

Benefits of GridView.extent

It ensures each grid has consistent sizes regardless of screen size, layout is automatically managed which makes the interface more responsive.

Limitations of GridView.extent

It is suitable for scenarios where you want a consistent item size, but it may not be the best choice if you need more dynamic control over item generation or layout.

How to use GridView.custom

The GridView.custom constructor is the most flexible one out of all the constructors as it allows you to control every aspect of the widget, making it suitable for complex scenarios where the arrangements need to meet specific requirements.

class GridViewCustom extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return GridView.custom(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 16.0,
        crossAxisSpacing: 16.0,
      ),
      childrenDelegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            color: Colors.orange,
            child: Center(
              child: Text('Item ${index + 1}'),
            ),
          );
        },
        childCount: 6,
      ),
    );
  }
}

Output :

Benefits of GridView.custom

This constructor allows you to control the layout and is very adaptive when working with a large set of complex data that depends on complex logic such as data manipulation. The constructor also recycles items off the screen for optimal performance.

Limitations of GridView.custom

It is more intricate and complex to set up. It is only used when custom item generation and or complex layouts.

Conclusion

Now that you know the various methods of incorporating the GridView class, the benefits, and the limitations involved, You can begin to apply it in your next project, and fully implement its constructors when needed to optimize your designs and to give a better user experience.

If you enjoyed the article, You can give me a follow on GitHub.

Happy Coding!