If you are using Firebase then you are probably familiar with Firebase Cloud Messaging. The setup on Flutter web is very different than mobile and other plugins you are probably used to.

Setting Up

Open your web/index.html and look for the following script. If you do not have one you can add it now in the <body> tag.

We need to modify it to support the FCM service worker. The important thing we need to do is comment out the flutter_service_worker.js


Flutter is a UI Toolkit from Google allowing you to create expressive and unique experiences unmatched on any platform. You can write your UI once and run it everywhere. Yes everywhere! Web, iOS, Android, Windows, Linux, MacOS, Raspberry PI and much more…

If you prefer a video you can follow the YouTube series I am doing called “Flutter Take 5” where I explore topics that you encounter when building a Flutter application. I will also give you tips and tricks as I go through the series.

What is Flutter

Flutter recently crossed React Native on Github and now has more than…


Do you have a story to tell and want to share it with the world but do not know where to start? Are you a developer looking to start a tech podcast? Are you looking to save money for hosting? Well this article is for you!

TL;DR; You can fork this repo and customize it for your podcast!

Github Pages allows you to host any website for free on Github. You can host any kind of file or content and will be distributed with Github CDN around the world. …


In this article I will show you how to have proper URL navigation for your application. Open links to specific pages, protected routes and custom transitions.

There is a online demo here:

https://rodydavis.github.io/flutter_deep_linking/

Here is the source code:

https://github.com/rodydavis/flutter_deep_linking

Setup

  • Create a new flutter project called “flutter_deep_linking”
  • Open that folder up in VSCode
  • Update your “pubspec.yaml” with the following:

Step 1

  • Create a file at “lib/ui/home/screen.dart” and add the following:


Sometimes you have content in HTML that needs to be displayed and interacted with in Flutter.

Online Demo:https://rodydavis.github.io/easy_web_view/#/

For those impatient I created a package for you to get all the following functionally and more here: https://pub.dev/packages/easy_web_view

Getting Started

Create a new flutter project named whatever you want.

If you plan on showing HTML content on iOS/Android you will need to add the following to your pubspec.yaml

Web

Reference: https://github.com/rodydavis/easy_web_view/blob/master/lib/src/web.dart

To show html on Flutter web we need to use an HTMLElementView. This is a platform view that allows us to display native content.

We first need to register the Element…


  • Run Flutter web with SKIA
  • Run Flutter web with Canvas Kit
  • Build your Flutter web app to Github Pages to the docs folder
  • Clean rebuild CocoaPods

Sometimes with firebase you need to run: `pod update Firebase`

  • Create Dart package with Example
  • Watch Build…


After you build your flutter project you may want to reuse the models and business logic from your lib folder. I will show you how to go about setting up the project to have iOS, Android, Web, Windows, MacOS, Linux and a REST API interface with one project. The REST API can also be deploy to Google Cloud Run for Dart everywhere.

One Codebase for Client and Sever.

This will allow you to expose your Dart models as a REST API and run your business logic from your lib folder while the application runs the models as they are.


Prerequisites :

  1. Open your Flutter project
  2. Run: cd ios
  3. Run: fastlane init and follow the prompts
  4. Replace the Fastfile contents with this:

5. Run: cd .. && cd android

6. Run: fastlane init and follow the prompts

7. Replace the Fastfile contents with this:

8. Run: fastlane add_plugin versioning_android and enter your password if needed

9. Run: cd ..

Now you are ready to launch your app to beta!

For ios run: cd ios && fastlane beta

For android run: cd android && fastlane beta

Stay tuned for an article soon where we use these fastlane sub folders for automating the releases on Github Actions CI


Import dart:html and dart:io in the same project!

You can find the final project here.

Up to now you have been able to create projects with Flutter that run on iOS/Android, Web and Desktop but only sharing pure dart plugins. Flutter launched Flutter for web at Google I/O and was a temporary fork that required you to change imports from import 'package:flutter/material.dart'; to import 'package:flutter_web/material.dart';. As you can image this was really difficult for a code base as you had to create a fork and change the imports. This also meant that you could not import any package that needed…


A brief overview of a new app built with Flutter.io by Rody Davis and Jesus Rodriguez.

Background

About 6 months ago Jesus Rodriguez launched his app “SpaceX GO!” On Reddit and I had just recently had launched my app “Daily NASA”. I messaged him because not many people were building production apps with Flutter yet. I wasn’t to see what he thought about collaboration. Over the next 6 months, we would brainstorm and design an app together in Flutter that could reach a larger audience. …

Rody Davis

I am a cross platform dev. I am currently using Flutter, Firebase, SQLite, Google Cloud Platform, Docker and WebAssembly. I am exploring Rust, C++, Go, WebXR.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store