https://github.com/extrawest/flutter_web_responsive_showcase
Flutter Web Responsive UI Showcase: Dynamic Routing, Master-Detail Flow
https://github.com/extrawest/flutter_web_responsive_showcase
auto-router codemagic dart demo extrawest firebase firebase-hosting flutter flutter-web responsive sentry showcase spa
Last synced: 2 months ago
JSON representation
Flutter Web Responsive UI Showcase: Dynamic Routing, Master-Detail Flow
- Host: GitHub
- URL: https://github.com/extrawest/flutter_web_responsive_showcase
- Owner: extrawest
- Created: 2023-02-22T09:23:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-08T14:55:48.000Z (over 3 years ago)
- Last Synced: 2025-06-16T03:37:45.190Z (12 months ago)
- Topics: auto-router, codemagic, dart, demo, extrawest, firebase, firebase-hosting, flutter, flutter-web, responsive, sentry, showcase, spa
- Language: Dart
- Homepage: https://flutter-web-training-om.web.app/
- Size: 140 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flutter Web Responsive UI Showcase 🌐
[](https://codemagic.io/apps/63ea1ecf46f7d12ff5711b7b/63ea1ecf46f7d12ff5711b7a/latest_build)
[]()
[](https://flutter-web-training-om.web.app/)
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](https://dummyapi.io/docs) as a data source
- Uses [Firebase](https://firebase.google.com/) for a hosting
- Uses [Sentry](https://sentry.io/) for error tracking
- Uses [Codemagic](https://codemagic.io/) for CI/CD
## Demo
[Web page](https://flutter-web-training-om.web.app/#/) which showcases the core functionality of the app with all screens developed yet.
https://user-images.githubusercontent.com/42183561/220580932-6ed226ac-32a0-4791-ab30-ebbbf8c49d8c.mp4
## How to run
- Clone the project
```shell
$ git clone https://github.com/extrawest/flutter_web_responsive_showcase.git
```
- Go to the project folder
```shell
$ cd flutter_web_responsive_showcase
```
- Install dependencies
```shell
$ flutter pub get
```
- Proceed with the [Firebase](https://firebase.google.com/) setup
```shell
$ flutterfire configure
```
- Create config.json file in the assets folder at the root of the project with the followed contents:
```shell
$ 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
```shell
$ flutter run
```
## In order to deploy the app to the Firebase
- Create a new project in the [Firebase](https://firebase.google.com/)
- Build the app for the web
- run the following command and proceed with the setup for only hosting
```shell
$ firebase init
```
- select __build/web__ as a public directory
- run the following command to deploy the app
```shell
$ firebase deploy --only hosting --token
```
## To create new sentry release
- Create a new project if you don't have one in the [Sentry](https://sentry.io/)
- Add environment variables __SENTRY_AUTH_TOKEN__, __SENTRY_ORG__ and __SENTRY_PROJECT__ with proper values
- Run the following command
```shell
$ sentry-cli releases new
```
#### Maintained by *Lesha Melnychenko*
[Extrawest.com](https://www.extrawest.com), 2023