Prasad Tech
Building an On-Demand Services App like UrbanClap With Flutter

Building an On-Demand Services App like UrbanClap With Flutter

prasad venkatachalam's photo
prasad venkatachalam
·

8 min read

Table of contents

On-demand service marketplaces have seen tremendous growth in recent years by connecting customers with local service professionals. In this article, we will discuss how to build an UrbanClap clone app that offers on-demand home services using Flutter.

What is UrbanClap?

UrbanClap is an Indian startup that offers on-demand home services like cleaning, plumbing, carpentry, beauticians, and more through a mobile app and website. Customers can browse profiles of verified professionals, read reviews, check availability, and book appointments with just a few taps.

Some key features of UrbanClap include:

  • Browse over 50 home service categories by location

  • View profiles and hourly rates of thousands of pre-verified professionals

  • Read reviews and ratings from previous customers

  • Check real-time availability and book instant appointments

  • Make online payments directly through the app

Why Build Your App with Flutter?

Flutter is an open-source SDK developed by Google for building native mobile apps using the Dart programming language. Some of the major advantages of using Flutter include:

  • Cross-platform support - A single Flutter codebase can be used to build apps for both Android and iOS. This eliminates the need to maintain separate codebases.

  • Hot reload - Flutter apps support hot reload which instantly refreshes code changes without recompiling or restarting the app during development. This improves productivity.

  • Large community - Flutter has a growing community of developers contributing plugins, tutorials and help on forums like Stack Overflow.

  • Performance - Flutter produces optimized native apps since it compiles code to ARM/x86 machine instructions. This results in great user experience.

  • Tools and Libraries - Tools like Flutter Inspector, and packages like Firebase/Auth etc speed up development substantially.

Using Flutter will allow building high-quality Android and iOS apps much faster with a single codebase. This significantly reduces development and maintenance costs compared to native mobile development.

10 Step Guide to Build an App like UrbanClap with Flutter

Step 1. Setup Flutter Development Environment

The first step is to install Flutter and configure our development environment.

Download and extract the latest Flutter SDK from the official site. On Linux/Mac, add flutter bin path to PATH variable.

For IDE, we'll use Android Studio. Download and install it. Then install the Flutter and Dart plugins.

To verify setup, run flutter doctor command which checks dependencies.

Now create a new Flutter project by running flutter create serviczy. This will generate a basic Flutter project structure with directories for android, iOS, web etc.

Let's also install additional packages that we'll need - http client, cupertino_icons (iOS style icons), firebase_core etc. We add these dependencies to pubspec.yaml file.

Run the app by flutter run to see the default "Hello World" app. Our environment is now setup to build Flutter apps!

Step 2. Create UI Screens

The next step is to build common screens like home, categories, profile etc using Flutter widgets.

Let's start with the home screen. Create a StatelessWidget class HomeScreen:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(), 
      body: Center(
        child: Text("Home")
      )
    );
  }
}

Similarly, create CategoriesScreen and ProfessionalProfileScreen classes extending StatelessWidget.

For the categories screen, display items in a ListView with title and icon. Use a GridView to display professional tiles with images, name etc.

Add sample data in Map objects for now. We'll fetch real data later from the backend API.

Let's also add some common UI components like AppBar, circular profile images using Container, padding etc.

Run the app to see the basic UI shell of the main screens with placeholder data.

Step 3. Implement Navigation

To navigate between our screens, we'll use the Navigator widget provided by Flutter.

Wrap the material app widget inside a MaterialApp widget:

class App extends StatelessWidget {

  final routes = <String, WidgetBuilder>{
    '/': (_) => HomeScreen(),
    '/categories': (_) => CategoriesScreen(),
    '/profile': (_) => ProfileScreen()
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Serviczy',
      routes: routes,
      initialRoute: '/',
    );
  }
}

Now add onPressed callbacks to navigate from home to categories and further to a profile page.

FlatButton(
  onPressed: () {
    Navigator.pushNamed(context, '/categories');
  }, 
  child: Text("Categories")
)

Add a back button to AppBar to pop screens. Now we can smoothly navigate between screens.

Step 4. Database Schemas and Models

Now let's design the backend database schemas. We'll use MongoDB for simplicity.

Some sample categories, professionals and booking schemas:

// categories collection
{
  name: "Cleaning",
  icon: "...",
  professionals: [..] // references
} 

// professionals collection  
{
  name: "John Doe",
  image: "...", 
  categories: ["Cleaning"],
  hourlyRate: 500
}

// bookings collection
{
  professional: "...", // reference 
  customer: "...",
  date: "...",
  status: "pending"  
}

In Dart, create model classes mirroring these schemas:

class Category {
  String name;
  String icon;
  List<Professional> professionals;
}

class Professional {
  String name;
  String image;
  List<String> categories;
  int hourlyRate;
}

class Booking {
  String professional;
  String customer;
  DateTime date;
  String status;
}

These models will be used to fetch, parse and display data from the backend API.

Step 5. Build Backend API

Let's build a Node.js/Express backend API to perform CRUD on MongoDB database.

Create a project:

npm init
npm i express mongoose

Define MongoDB connection and models:

mongoose.connect(MONGO_URI);

const categorySchema = new Schema({
  name: String,
  //...
});

const Category = mongoose.model('Category', categorySchema);

Create REST endpoints to list, add, update categories:

app.get('/categories', (req, res) => {
  Category.find({}, (err, categories) => {
    res.send(categories);
  });
});

app.post('/category', (req, res) => {
  new Category(req.body).save();
});

Repeat for other collections. Start server:

app.listen(3000, () => console.log('API started'));

Now our backend API is ready to serve data to mobile app!

6. Consume Backend API

With backend done, let's integrate API calls in the Flutter app.

We'll use the http package for making requests.

In the categories screen, fetch categories on init:

List<Category> categories = [];

@override  
void initState() {
  super.initState();
  fetchCategories();
}

fetchCategories() async {
  var response = await http.get('http://localhost:3000/categories');
  categories = parseCategories(response.body);
  setState(() {});
}

Similarly fetch professionals and display on profile screen.

Add error handling for network failures.

Use FutureBuilder widget to show loading indicator while data loads.

Now our app is fully data driven displaying content from the backend!

Step 7. Add Features

Let's enrich the app experience with more features:

Search: Add search bar on home screen to filter professionals. Use StreamBuilder to update results on typing.

Filters: Add filters UI on categories screen to filter by price, ratings etc. Send params to API.

Bookings: On tapping book, show modal to select date/time. Make POST request on submit.

Payments: Integrate Razorpay payment SDK. Pass orderId after successful transaction.

Chat: Add chats screen to message professionals directly. Store in Firestore.

Reviews: Allow adding/viewing reviews on professional page with rating bar.

Notifications: Send notifications on new messages, bookings using Firebase Cloud Messaging.

Dark Mode: Add theme switcher to support light/dark UIs.

Offline: Cache data locally using sqflite and show when offline.

These additions enrich the overall user experience of the app.

Step 8. Payment Integration

Let's integrate a payment gateway - Razorpay to allow online payments.

First sign up for a Razorpay account and get API keys.

In the bookings screen add the button to open the payment model:

onPressed: () async {
  var options = {
    "amount": amount * 100, //in paise
    "currency": "INR",
    "name": "Serviczy",
    //other params
  };

  var response = await Razorpay.open(options);

  //check order id  
  if(response.error) 
     //error logic
  else
     //success logic 
}

On success, save orderId in backend and render success screen.

On failure, handle errors gracefully.

Use try catch to catch errors.

Now users can book services and make secure online payments directly within the app!

Step 9. Authentication

Let's add user authentication using Firebase Authentication.

Set up a Firebase project, enable authentication and get config details.

Import firebase_auth package and initialize Firebase:

FirebaseAuth _auth = FirebaseAuth.instance;

@override
void initState() {
  super.initState();
  Firebase.initializeApp();
}

Add login and signup screens with email/password fields.

On form submit, make auth requests like:

await _auth.createUserWithEmailAndPassword(
  email: email, 
  password: password
);

Store user object internally.

Add logic to protect routes and show user profile only when logged in.

Now users can sign up, login and book services with their authenticated account!

Step 10. Publishing App

  • Generate signing keys for Android and add to Firebase project. This is required for release builds.

  • For Android, generate a signed release APK file. Upload to Play Console and publish.

  • For iOS, generate an Xcode archive file. Upload to App Store Connect and publish.

  • Market the app through social media, influencer outreach etc. Add it to relevant online directories.

  • Keep improving the app based on feedback - new features, bug fixes, performance enhancements etc.

  • For monetization, explore subscriptions, online ads, seller payment cut models etc. depending on your business goals.

  • Consider adding driver/assistant side apps for onboarding professionals on the platform.

  • Integrate with maps APIs to allow location tracking during service visits.

  • Partner with related home services brands to offer bundled deals and expand your category offerings.

Conclusion

In this article, we learned how to build a full-featured on-demand home services app like UrbanClap from scratch using Flutter. Flutter enabled us to develop high-quality native Android and iOS apps with a single codebase significantly faster.

The app incorporated features like categories, profiles, reviews, bookings, payments and auth. By following similar steps, one can build various other on-demand marketplace apps.

urbanclapmobile app developmentAndroidFlutterurbanclap clone