DEV Community

Cover image for Build a Local Services App with Flutter and HosteDay — Part 1
mustafa3max
mustafa3max

Posted on • Originally published at hosteday.com

Build a Local Services App with Flutter and HosteDay — Part 1

#flutter #dart #api #backend

This article is a condensed English adaptation of the original Arabic tutorial published on HosteDay.

Original article: https://hosteday.com/blog/6/build-local-services-jobs-app-flutter-hosteday-1

Build a Local Services App with Flutter and HosteDay — Part 1

Building a local services app often starts with a long backend setup process: creating a server, designing a database, writing API routes, adding validation, and securing the endpoints.

In this tutorial, we will simplify that process using HosteDay and Flutter.

The example application is called At Your Service — a local services platform where users can create accounts and publish the services they provide.

By the end of this first part, you will have:

  • A free backend server created on HosteDay
  • A database table for service providers
  • Automatically generated CRUD API endpoints
  • A Flutter project connected to your backend
  • API token protection for requests
  • A foundation for future authentication and service features

1. Create a Free Server on HosteDay

Start by creating a server for your application.

  1. Open HosteDay.
  2. Create an account or sign in.
  3. Open the dashboard.
  4. Click Create Free Server.
  5. Enter a server name or subdomain.

For example:

a-y-service
Enter fullscreen mode Exit fullscreen mode
  1. Confirm the creation process.
  2. Wait until the server is ready.

Once the server is created, you can start building your database structure and API endpoints.

2. Create the Profiles Table

For the first version of the application, create a table named:

profiles
Enter fullscreen mode Exit fullscreen mode

This table will store service-provider information.

Open the API creation page in your HosteDay server and create a CRUD module with the following fields:

Field Type Notes
user_id UUID Required. Linked to the id field in the users table. Enable ON UPDATE CASCADE and ON DELETE CASCADE.
avatar varchar Optional profile image URL.
socials json Stores social and contact links, such as Facebook and WhatsApp.
title varchar Required service title, maximum 255 characters.
desc text Optional service description.
status enum Available values: draft, published, active, and paused. The default value is draft.

After adding the fields and validation rules, click:

Build and Generate CRUD Now
Enter fullscreen mode Exit fullscreen mode

HosteDay automatically generates:

  • The database table
  • Create endpoints
  • Read endpoints
  • Update endpoints
  • Delete endpoints
  • Validation rules
  • CRUD API routes

This allows you to start building your Flutter application without manually creating Laravel migrations, controllers, routes, requests, and validation logic.

3. Create the Flutter Project

Open Android Studio and create a new Flutter project.

Use a name such as:

at_your_service
Enter fullscreen mode Exit fullscreen mode

Run the default Flutter application once to ensure your development environment is configured correctly.

4. Add the HosteDay Flutter Package

Open your pubspec.yaml file and add the HosteDay Flutter package:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  hosteday_flutter: ^1.0.6
Enter fullscreen mode Exit fullscreen mode

Then run:

flutter pub get
Enter fullscreen mode Exit fullscreen mode

The hosteday_flutter package helps your Flutter project communicate with your HosteDay server and API endpoints.

You can also review the package example here:

https://pub.dev/packages/hosteday_flutter/example

5. Add the Starter Example

Open the example project provided by the hosteday_flutter package.

Copy the example code and replace the content of:

lib/main.dart
Enter fullscreen mode Exit fullscreen mode

This gives you a practical starting point for connecting Flutter to HosteDay, testing authentication, and sending API requests.

6. Configure the API Token

Use an API token to protect your backend endpoints.

Inside main.dart, find the configuration below:

const apiToken = String.fromEnvironment(
  'HOSTEDAY_API_TOKEN',
  defaultValue: 'YOUR_API_TOKEN',
);
Enter fullscreen mode Exit fullscreen mode

Replace:

YOUR_API_TOKEN
Enter fullscreen mode Exit fullscreen mode

with the API token generated for your HosteDay server.

API tokens help prevent unauthorized access to your project data and endpoints.

For production applications, avoid placing sensitive tokens directly in source code. Prefer secure configuration methods such as:

--dart-define
Enter fullscreen mode Exit fullscreen mode

or environment-based configuration.

7. Test the Connection

Run the Flutter application and test one of the available actions:

  • Create a new account
  • Sign in with an existing account

Once registration or login works successfully, your Flutter application is connected to the HosteDay backend.

At this stage, you have completed the initial backend setup and created a working connection between Flutter and your API.

What Comes Next?

In the next part, we move from backend setup to building the actual application interface.

We will create:

  • A services list screen
  • A service details screen
  • A structured Flutter project architecture
  • State management with GetX
  • API data models
  • Loading, error, and empty states
  • WhatsApp and Facebook contact actions

This is the first step toward building a complete local services application that can later include authentication, user profiles, service requests, reviews, notifications, and more.

Source Code

The source code for this stage is available on GitHub:

https://github.com/mustafa3max/at-your-service/tree/blog-1

Original Arabic Article

This post is adapted from the original Arabic tutorial published on HosteDay:

https://hosteday.com/blog/6/build-local-services-jobs-app-flutter-hosteday-1

Top comments (0)