Build Full stack application using Flutter ft. Dart frog and MongoDB. Part 1

#flutter #tutorial #mongodb #dart

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 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.

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

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().

All route handlers have access to a RequestContext 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

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.

create order_models.dart in the same folder.

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.

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.

OUTPUT

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.

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.