DEV Community

Cover image for Build Full stack application using Flutter ft. Dart frog and MongoDB. Part 1
Md. Mobin
Md. Mobin

Posted on • Updated on

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

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.

meme1

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

dart-frog

Installing Dart-frog

//📦 Install the dart_frog cli from pub.dev
dart pub global activate dart_frog_cli
Enter fullscreen mode Exit fullscreen mode

Creating a project

dart_frog create pizza_shop
Enter fullscreen mode Exit fullscreen mode

Start the server

dart_frog dev 
Enter fullscreen mode Exit fullscreen mode

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.

meme

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

/pizzas

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.

output 2

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.

output 3

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

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

part-2

Stay Tuned .....

Follow me:

Top comments (4)

Collapse
 
panicoli0 profile image
Pablo Ariel Nicoli • Edited

How to connect dart-frog with mongodb cloud?

Collapse
 
djsmk123 profile image
Md. Mobin

Hi pablo sorry for late reply, you can dart-frog to Atlas using following code
var db = await Db.create("mongodb+srv://:@:/?");
await db.open();

and for more info
pub.dev/packages/mongo_dart

I hope it will help you.

Collapse
 
george_lee_e2ca2ed8be27c7 profile image
George Lee • Edited

I am having issues using JSON annotation. Would you please show how to do this?

Collapse
 
djsmk123 profile image
Md. Mobin

Hi George, you can refer to this article.
medium.com/flutter-community/gener...