Build Full stack application using Flutter ft. Dart frog and MongoDB. Part 1
Tags: flutter, tutorial, mongodb, dart
Published: 2022-12-13 09:50:45

I am back again on the track of a series of learning.

**Do you know we can build a Full-stack application using Flutter only?**

Yes, We can build Full stack applications with the help of the [dart-frog](https://pub.dev/packages/dart_frog) library.

We are going to build in this series a simple Pizza-shop application.

In this part, We are going to learn about how Dart-frog basically works with static data.

## What is Dart-Frog?

Dart-frog is not directly or officially related to the flutter but it is a framework designed in the dart to create a minimalist back end.


![meme1](https://i.imgflip.com/744wmr.jpg)

In addition, Dart Frog is intended to help Flutter/Dart developers maximize their productivity by having a unified tech stack that enables sharing tooling, models, and more!

Thanks to [verygood.ventures](https://verygood.ventures/)


![dart-frog](https://raw.githubusercontent.com/VeryGoodOpenSource/dart_frog/main/assets/dart_frog_logo_black.png)




## Installing Dart-frog

```
//📦 Install the dart_frog cli from pub.dev
dart pub global activate dart_frog_cli
```

## Creating a project

```
dart_frog create pizza_shop
```

## Start the server

```
dart_frog dev 
```

Note: By default 8080 port is used to change via `--port`.

## Lets Explore 

> How do routes work?

**"routes"** folder contains routes for example **"index.dart"** is "/" home route and if we have to create another route then create a new folder in **"routes"** in with route_name and create a dart file named the same as the endpoint with `onRequestFunction()`.

{% embed https://gist.github.com/Djsmk123/4752b71cd9e242bf88a95587b4b397f2.js %}


All route handlers have access to a [RequestContext](https://dartfrog.vgv.dev/docs/basics/routes) which can be used to access the incoming request as well as dependencies provided to the request context.


## HTTP Method

We can identify types of HTTP requests via `context.request.method`

{% embed https://gist.github.com/Djsmk123/ed8c6fda7e74ff4fdefbc69e2167605a.js %}


for the same, we can get also

- Query parameters: `context.request.uri.queryParameters`
- Headers: `context.request.headers`
- Body: `await context.request.body()`
- Json Data: `await context.request.json()`
- Form Data: `await context.request.formData()`


## Let's start working on the Pizza shop

> ..........................................

## Create models for pizzas and orders.
- Add `json_annotation: ^4.7.0` in `pubspec.yaml` for serialization.
- Step create a new folder named `models` and a file named `pizza_models.dart` using JSON annotation.


{% embed https://gist.github.com/Djsmk123/8ee57e4005a1dff850b0cd493a965287.js %}


- create `order_models.dart` in the same folder.
{% embed https://gist.github.com/Djsmk123/2e3c640b073922971891ab2ae5f6e214.js %}

![meme](https://media3.giphy.com/media/26u4lOMA8JKSnL9Uk/giphy.gif?cid=790b7611e77e5454d75d724eed7e1eb5c82f562fd4dd914b&rid=giphy.gif&ct=g)

##  Creating Endpoints for fetching the list of pizzas or specific using pizza_id.

- Before creating the endpoint, We need a List of orders and pizzas, so create a new folder in the project name `utlis` and inside this create a dart file(`constant.dart`) with the following content.

{% embed https://gist.github.com/Djsmk123/fd554cc913249a69f17d2d5be26ef54d.js %}

- create a dart file named `pizzas.dart`. This method will be a GET to return a list of pizzas if no `id` query parameter is provided otherwise it will return specific pizza details.


{% embed https://gist.github.com/Djsmk123/e5b254b7e620e1e80d4daa68d1d64dde.js %}



## OUTPUT


![/pizzas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxk15ebjuez3c31lyknk.png)



## Fetching order


- For fetching orders, we are going to create a GET method with the query parameter `user_id` for getting the list of orders.

{% embed https://gist.github.com/Djsmk123/f4e42bccf371793d18bec4cca2888d15.js %}



![output 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1thw05k7ulimq1s6p53.png)


## Creating order

- For creating an order we required the following fields `user_id,pizza_id, address, and phone number`.
- Method should post only.
- Will check if the headers `content type is application/JSON` or not.

- Will also check if the pizza_id is valid or not.

- after creating the order, we will return `order-id` to the user.


{% embed https://gist.github.com/Djsmk123/f1ff48d1da62df654a76c8f21ddbe0dd.js %}



![output 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r667gjj0uf6pk4r2bxkt.png)



> We are done .....................

## In the next part, we are going to connect MongoDB for persisting data. 

## [part-2](https://dev.to/djsmk123/build-full-stack-application-using-flutter-ft-dart-frog-and-mongodb-part-2-m1a)

Stay Tuned .....

- [**Source Code**](https://github.com/Djsmk123/pizza_shop_dart_backend_part_1)

> Follow me:

- [GitHub](https://github.com//djsmk123)

- [LinkedIn](https://www.linkedin.com/in/md-mobin-bb928820b)

- [Twitter](https://twitter.com/smk_winner)