code_sharing - Flutter Examples

This project demonstrates a Dart application utilizing Flutter and Shelf, showcasing how to share business logic between client and server. By incrementing a counter via HTTP requests, it highlights efficient code sharing and Docker setup, fostering seamless development and collaboration.

Introduction

This project showcases a full-stack Dart application utilizing Flutter for the client-side and Shelf for the server-side. The Flutter app functions as a basic counter, but the actual count is managed on the server and incremented via HTTP requests, employing transport data classes understood by both the Flutter client and Shelf server.

Goals

The primary objective of this sample project is to illustrate how to share business logic between a Flutter client and a Dart server. Additionally, it includes modifications to the Dockerfile necessary for building a Docker image from a Dart app containing nested packages.

Project Structure

The project structure is organized as follows:

client/: Contains the Flutter app
server/: Contains the Shelf server
shared/: Holds common business logic shared between client and server

Recreating the Project

Recreating this project can be accomplished in the following steps:

1. Create Parent Directory

Start by creating a parent directory, likely named after your project or product, to contain all project components.

2. Create Flutter App

Within the parent directory, run flutter create client to create the Flutter app. You can name this project whatever suits your preference.

3. Create Dart Server

From the same location, run dart create -t server-shelf server to create the Dart server using Shelf.

4. Shared Business Logic

Enter the server directory (cd server) and run dart create -t package shared to create a package for shared business logic.

5. Dependency Configuration

Edit the pubspec.yaml files in both the client and server directories to include dependencies on the shared package.

6. Dockerfile Adjustment

Modify the Dockerfile to ensure it correctly handles the shared directory.

Running the Sample

To run the sample, follow the instructions below based on your preferred method:

From the CLI

In one terminal window, navigate to my_project/server and run dart run bin/server.dart.
In another terminal window, navigate to my_project/client and run flutter run.

Build and Run with Docker

To build the server’s Docker image, navigate to my_project/server and run docker build . -t my_project_server.
To run the Docker container, use docker run -it my_project_server.

Join Our Whatsapp Group

Join Telegram group

Build and Run with docker-compose

If you have docker-compose installed, you can build and launch the server with the following command:

cd my_project
docker-compose up -d

To stop the server later, use:

docker-compose stop

By following these steps, you can recreate the code sharing project and explore sharing business logic between a Flutter client and a Dart server efficiently.

Header	Content
Title	Code Sharing: A Full-Stack Dart Application
Introduction	This project showcases a full-stack Dart application utilizing Flutter for the client-side and Shelf for the server-side. The Flutter app functions as a basic counter, but the actual count is managed on the server and incremented via HTTP requests, employing transport data classes understood by both the Flutter client and Shelf server.
Goals	The primary objective of this sample project is to illustrate how to share business logic between a Flutter client and a Dart server. Additionally, it includes modifications to the Dockerfile necessary for building a Docker image from a Dart app containing nested packages.
Project Structure	The project structure is organized as follows: – client/: Contains the Flutter app – server/: Contains the Shelf server – shared/: Holds common business logic shared between client and server
Recreating the Project	Recreating this project can be accomplished in the following steps: 1. Create Parent Directory: Start by creating a parent directory, likely named after your project or product, to contain all project components. 2. Create Flutter App: Within the parent directory, run `flutter create client` to create the Flutter app. You can name this project whatever suits your preference. 3. Create Dart Server: From the same location, run `dart create -t server-shelf server` to create the Dart server using Shelf. 4. Shared Business Logic: Enter the server directory (`cd server`) and run `dart create -t package shared` to create a package for shared business logic. 5. Dependency Configuration: Edit the `pubspec.yaml` files in both the client and server directories to include dependencies on the shared package. 6. Dockerfile Adjustment: Modify the Dockerfile to ensure it correctly handles the shared directory.
Running the Sample	To run the sample, follow the instructions below based on your preferred method: – From the CLI: 1. In one terminal window, navigate to `my_project/server` and run `dart run bin/server.dart`. 2. In another terminal window, navigate to `my_project/client` and run `flutter run`. – Build and Run with Docker: 1. To build the server’s Docker image, navigate to `my_project/server` and run `docker build . -t my_project_server`. 2. To run the Docker container, use `docker run -it my_project_server`. – Build and Run with docker-compose: If you have docker-compose installed, you can build and launch the server with the following command: `cd my_project docker-compose up -d` To stop the server later, use: `docker-compose stop`

FAQs

How can I recreate this project on my own?

To recreate this project, follow these steps:

Create Parent Directory: Begin by creating a parent directory to house all project components.
Create Flutter App: Inside the parent directory, run flutter create client to create the Flutter app. You can name this project as per your preference.
Create Dart Server: From the same location, run dart create -t server-shelf server to create the Dart server using Shelf.
Shared Business Logic: Enter the server directory (cd server) and create a package for shared business logic by running dart create -t package shared.
Dependency Configuration: Edit the pubspec.yaml files in both the client and server directories to include dependencies on the shared package.
Dockerfile Adjustment: Modify the Dockerfile in the server directory to ensure it handles the shared directory correctly.

What is the purpose of this project?

The primary objective of this project is to demonstrate the sharing of business logic between a Flutter client and a Dart server. It showcases how to manage a basic counter application where the count is stored on the server and incremented via HTTP requests, utilizing transport data classes understood by both client and server.

Join Our Whatsapp Group

Join Telegram group

What does the project structure look like?

The project structure is organized as follows:

client/: Contains the Flutter app.
server/: Contains the Shelf server.
shared/: Holds common business logic shared between the client and server.

How can I run the sample project?

To run the sample project, follow the instructions below based on your preferred method:

From the CLI: Navigate to my_project/server and run dart run bin/server.dart in one terminal window. In another terminal window, navigate to my_project/client and run flutter run.
Build and Run with Docker: Navigate to my_project/server, build the server’s Docker image with docker build . -t my_project_server, and then run the Docker container using docker run -it my_project_server.
Build and Run with docker-compose: If you have docker-compose installed, navigate to my_project and run docker-compose up -d to build and launch the server. To stop the server later, use docker-compose stop.

Can I modify the project structure?

Yes, you can modify the project structure according to your requirements. However, ensure that dependencies and configurations are updated accordingly, especially when sharing business logic between the client and server.

What if I encounter issues during project recreation?

If you encounter any issues during the project recreation process, refer to the project documentation and ensure that all steps are followed correctly. Additionally, you can seek assistance from the Flutter and Dart communities for troubleshooting and support.