DEV Community

Cover image for Flutter + Dart Frog
Ushieru Kokoran
Ushieru Kokoran

Posted on

Flutter + Dart Frog

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
Enter fullscreen mode Exit fullscreen mode

Create folders

Creamos el frontend

# /dartfrog+flutter
$ flutter create frontend
Enter fullscreen mode Exit fullscreen mode

create frontend

Creamos el backend

# /dartfrog+flutter
$ dart_frog create server
Enter fullscreen mode Exit fullscreen mode

create backend

Abre la carpeta dartfrog+flutter en tu editor favorito

Creamos una carpeta public en nuestro servidor

create public folder

Modifiquemos el index.dart para que sirva nuestro html

serve index

Creemos una version web de Flutter

# /dartfrog+flutter/frontend
$ flutter build web
Enter fullscreen mode Exit fullscreen mode

Flutter build web

Movamos el build a nuestra carpeta public en el servidor

# /dartfrog+flutter
$ mv .\frontend\build\web\* .\server\public\
Enter fullscreen mode Exit fullscreen mode

mv flutter build to server

Probemos nuestro proyecto

Corramos el servidor con dart_frog

# /dartfrog+flutter/server
$ dart_frog dev
Enter fullscreen mode Exit fullscreen mode

dart frog in dev

Revisemos si todo funciona en la web

flutter app on dart frog

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 🧑‍💻🎉

Top comments (0)