Requisitos:

• Flutter 3.3.4
• Dart 2.18.2
• Dart Frog 0.1.2

Dart frog nos brinda esta oportunidad de volvernos Fullstack developers sin pasar por la complejidad de adquirir otro lenguaje si ya somos desarrolladores de Flutter. Así que veamos como combinar estas dos tecnologías para crear un stack completo para la web.

Init proyect

Creamos una carpeta para nuestros archivos

$ mkdir dartfrog+flutter
$ cd dartfrog+flutter

Creamos el frontend

# /dartfrog+flutter
$ flutter create frontend

Creamos el backend

# /dartfrog+flutter
$ dart_frog create server

Abre la carpeta dartfrog+flutter en tu editor favorito

Creamos una carpeta public en nuestro servidor

Modifiquemos el index.dart para que sirva nuestro html

Creemos una version web de Flutter

# /dartfrog+flutter/frontend
$ flutter build web

Movamos el build a nuestra carpeta public en el servidor

# /dartfrog+flutter
$ mv .\frontend\build\web\* .\server\public\

Probemos nuestro proyecto

Corramos el servidor con dart_frog

# /dartfrog+flutter/server
$ dart_frog dev

Revisemos si todo funciona en la web

Y listo 🚀

Te dejo el repositorio si quieres echarle un ojo.

Gracias a Dart frog los desarrolladores mobile con experiencia en Flutter pueden dar este paso a la web sin tener que aprender un nuevo lenguaje, minimizando la curva de aprendizaje. Y que opinas la próxima hacemos deploy de nuestra app?

y Happy Hacking 🧑‍💻🎉