extrawest / flutter_web_responsive_showcase

Flutter Web Responsive UI Showcase: Dynamic Routing, Master-Detail Flow

Flutter Web Responsive UI Showcase 🌐

This project is a part of the Flutter Web Responsive UI Showcase The main goal of the project is to demonstrate the core functionality of the Flutter Web

Project info

• Build with Flutter 3.7.0
• Supports both mobile and web platforms
• Supports routing for web and mobile
• Uses dummyapi as a data source
• Uses Firebase for a hosting
• Uses Sentry for error tracking
• Uses Codemagic for CI/CD

Demo

Web page which showcases the core functionality of the app with all screens developed yet.

user_posts_demo.mp4

How to run

• Clone the project

$ git clone https://github.com/extrawest/flutter_web_responsive_showcase.git

• Go to the project folder

$ cd flutter_web_responsive_showcase

• Install dependencies

$ flutter pub get

• Proceed with the Firebase setup

 $ flutterfire configure

• Create config.json file in the assets folder at the root of the project with the followed contents:

$ touch assets/config.json

config.json file content:

{
  "apiDomain": "domain for the dummyapi.io",
  "apiKey": "your api key here",
  "dsn": "your dsn from sentry.io"
}

• Run the app

$ flutter run

In order to deploy the app to the Firebase

• Create a new project in the Firebase
• Build the app for the web
• run the following command and proceed with the setup for only hosting

$ firebase init

• select build/web as a public directory
• run the following command to deploy the app

$ firebase deploy --only hosting --token <your_token>

To create new sentry release

• Create a new project if you don't have one in the Sentry
• Add environment variables SENTRY_AUTH_TOKEN, SENTRY_ORG and SENTRY_PROJECT with proper values
• Run the following command

$ sentry-cli releases new <release_name>

Maintained by Lesha Melnychenko

Extrawest.com, 2023