Curso de Flutter

Curso de Flutter

Anah铆 Salgado D铆az de la Vega

Anah铆 Salgado D铆az de la Vega

Flutter para desarrolladores React Native

6/38

Lectura

Si desarrollas aplicaciones con React Native ya habr谩s notado que hacerlo con Flutter es muy similar pues utiliza el mismo estilo reactivo.

La principal diferencia es que mientras que React Native transpila (traduce) el c贸digo a Widgets Nativos para cada plataforma, Flutter compila todo directamente a Nativo controlando cada pixel de la pantalla para evitar problemas de rendimiento causados por el bridge de JavaScript.

Ahora que est谩s interesado en aprender Flutter voy a darte un breve recorrido entre lo que maneja React Native y lo que encontrar谩s en Flutter.

El punto de entrada de una aplicaci贸n en React Native est谩 definido por ti a partir de una funci贸n

// JavaScript

function startHere() {

  // Can be used as entry point

}

Flutter maneja un punto de entrada ya definido que es la funci贸n main

// Dart

main() {

}

M谩s all谩 de esto, ver谩s que la manera de funcionar de cada uno es muy similar.
A continuaci贸n te presento c贸mo ser铆a un Hola Mundo con React Native vs. Flutter:

// React Native
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});


// Flutter
import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

Ver谩s que la verbosidad entre c贸digos es m谩s reducida en Flutter y esto es gracias al lenguaje de programaci贸n Dart y en general la mejora que se est谩 proponiendo con este SDK.

Aportes 87

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Flutter es menos verboso que React Native, esto hace que sea m谩s sencillo comprender y mantener el c贸digo que se implementa.

La verdad que Flutter se ve mil veces m谩s sencillo y 煤til que React Native. Soy de esos que siempre que programa algo necesita escribirlo 20 veces hasta conseguir hacerlo de la manera m谩s sencilla posible jajaja 馃槀

todos los que vienen de React

Ese c贸digo de React Native se puede mejorar mas.

import React from "react";
import { Text, View } from "react-native";

export default () => (
  <View
    style={{
      flex: 1,
      backgroundColor: "#fff",
      alignItems: "center",
      justifyContent: "center"
    }}
  >
    <Text>Hello world!</Text>
  </View>
);

El entorno de desarrollo para ReactNative me pareci贸 muy inestable, pesado y con muchos bugs 馃槮, hasta ahora con Flutter ha sido muy straight forward y sin complicaciones, 隆Genial!

Dart i鈥檓 ur son!!! 鉂わ笍

Al parecer no se va a sufrir tanto si vienes de React

Ciertamente es m谩s reducido, sin embargo tiene un aire de complejidad por su estructura de anidar componentes en forma de 鈥渇unciones鈥. Center(...)

Quiz谩s por que estoy empezando, imagino que me acostumbrar茅 dentro de poco. Nos vemos en un par de d铆as que termine el curso.

flutter es un lenguaje que mas gente quiere aprender para poder desarrollar de forma r谩pida y eficiente

Muy emocionado por aprender Flutter! Vamos con todo!

Genial. Esto me hace sentir como cuando estaba aprendiendo CSS.

Este es mi primer curso y la primera vez que veo algo relacionado con la programaci贸n, espero aprender mucho, me intereso bastante el tema. 馃槂

Dart no solo acorta c贸digo, sino tambi茅n puede ser para IOS y Android en un solo c贸digo 馃槑

No he manejado react pero me fue mas sencillo entender como funciona react que flutter, no se en donde aplica todos los estilos que tiene react en flutter
ES pero entenderlo con el paso del curso

En ReactNative ser铆a.

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default () => (
  <View style={styles.container}>
    <Text>Hello world!</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

Una gran ventaja si ya se tiene conocimiento de como funciona y se estructuran los componentes en React
No cambia demasiado la manera de declarar interfaces por componentes/widgets

Yo vengo de dos a帽os sin programar, pero lo veo entendible.
Llevar谩 bastante tiempo y dedicaci贸n, pero tengo una idea y para llevarla a cabo debo manejar bastante bien el lenguaje!

M谩s compacto, m谩s minimalista 馃挭馃徎

Me gusta , muy simple el codigo y corto.

Va muy interesante todo, pero esas ultimas 4 lineas me recuerdan a LISP

Flutter para quienes vienen del mundo c# y java se les va a hacer muy divertido! aprenderlo

la sintaxis se ve m谩s simplificada porque en flutter no agrega los estilos que si agrega en React (al menos para este ejemplo en particular)

Vengo del mundo del Desarrollo M贸vil con React Native y cada vez Flutter me est谩 pareciendo s煤per sencillo y pr谩ctico a la hora de hacer pantallas para aplicaciones m贸viles. Vamos a ver que tal se comporta con la l贸gica de negocio.

en react-native no utilizan hooks?

Es necesario usar la propiedad textDirection del widget Text?

Es mucho m谩s sencillo y a mi parecer no tienes que declara tantas cosas como en React

Hola, la verdad soy nuevo y no tengo mucho para compartir, pero quer铆a figurar.
Buena jornada!

Welcome to the 鈥淐allback Hell鈥!

En cuanto a sintaxis parece no ser tan complicado, espero poder con el curso 馃槃

y los que entendemos JavaScript, podemos tomar este curso de Flutter?

La simplicidad de Flutter lo hace demasiado potente para desarrollar algo r谩pido con buen rendimiento y con un futuro potencial.

Se mira bastante m谩s amigable, solo es cuesti贸n de ir viendo como va la sintaxis

Muy limpio todo

Es interesante ver como es m谩s corto un Hello Word en Flutter m谩s que solo en Rect Native, sino tambi茅n en Android Nativo.

muy interesante

No eh utilizado React pero veo que es m谩s corta la sintaxis de Dart

驴Mientras que React utiliza el XML (creo que es XML) para estilizar el texto Flutter lo hace por defecto?

nunca he usado react, pero esta en mi lista de cursos por tomar, ahora por necesidad estoy entrando a flutter y me esta gustando mucho!

Se ve facil de utilizar.

Genial, sin tanto codigo y mas facil de aprender

Super!

Que sencillo 鉂わ笍

Me encanta que sea mas sencillo hasta este punto 馃槂

Mucho mas compacto y simplicidad de codigo.

Es notorio a simple vista la sencillez, lo claro y lo menos lioso que es Dart respecto a React Native.

interesante鈥

Genial!

Podre pasar de Flutter a React Native 馃槂

驴Me ocurre s贸lo a mi o sale c贸digo mal formateado con texto seguido?

Genial!!

En el c贸digo de flutter no tiene estilos鈥 驴ser谩 que le pone unos por defecto?

Mucho m谩s simplista, me gusta!

super interesante los ejemplos que nos das, muy simple y corto el c贸digo.

genial

es la primera vez que ver茅 el entorno de desarrollo para apps de android y me veo flutter y se ve demasiado sencillo

Flutter se ve bastante mas facil de aprender! 馃槃

Que incre铆ble la sintaxis se ve m谩s simplificada y la definici贸n de estilos es m谩s reducida 馃槷

uff si mucho mas corta las instrucciones

Excelente

Me a interesado mucho, la verdad que Flutter es mucho mas simplificado y r谩pido de escribir, e incluso ver la estabilidad al momento de su compilaci贸n.

Excelente este lenguaje Dart un paradigma

reduce bastante la escritura y es bastante legible, like it

wow excelente!

Estaba aprendiendo React Native pero en mi concepto lo que he leido de Flutter, es que su funcionalidad es m谩s eficiente y reducida su sintaxis.
Espero conocer el potencial que ofrece Flutter con este curso 馃槂

Genial!

En el c贸digo no veo los estilos en Flutter, supongo que se declaran en adelante.

Realmente sorprendente, el Dart- side de la programacion 馃槑 me agrada la idea de aprender mas aun sobre como hacer codigo mas limpio y simplificado.

Es realmente simple鈥!! se ve que promete.

buena clase

Aqu铆 hay m谩s sobre Flutter: https://bit.ly/3a4YG8m

muy bueno

La principal diferencia es que mientras que React Native transpila (traduce) el c贸digo a Widgets Nativos para cada plataforma, Flutter compila todo directamente a Nativo controlando cada pixel de la pantalla para evitar problemas de rendimiento causados por el bridge de JavaScript.

maravilloso

quiz谩s, eso lo haga eficiente, pero a nivel l贸gico tomar谩 mucho tiempo para encontrarle una fuente y corregir.

muy bueno, f谩cil de entender.

Mas facil Flutter

con react native hooks los componentes se simplificaron, estarian a la par en mi opinion

Emocionante, que empiece ya el c贸digo!!! 馃槂 sin dejar atras la teoria.

Se ve mas sencillo!! estoy emocionado por aprender.

Yo vengo del mundo PHP y lo entiendo muy bien.

Pero al parecer con Flutter se reduce las l铆neas de c贸digo pero me da la sensaci贸n que no se tiene una flexibilidad al customizar alg煤n componente lo que si pasa con React Native con el uso de CSS? es as铆 o estoy equivocado?.

Vamo a ver que tal

interesante, quiero aprender React Native.

Hay mucho que aprender!

No he programado aplicaciones m贸viles, tengo conocimientos de programaci贸n en Python, c++ y JAVA. Veo que Flutter es muy amigable.

Reducir todo a menos l铆neas de c贸digo hace que trabajar con Flutter sea mas sencillo. Aunque me gustar铆a ver como se reduce mas una vez exportada la aplicaci贸n.

驴No hay una forma de separar los estilos de la parte l贸gica en Flutter ?

Center()

Es el Equivalente a Flex ?