Flutter

FLUTTER
INSTALACIONES INICIALES
• Visual Studio Code
• Git.
• Postman.
• Android Studio
• Si eres mac descargar el MacOSX – Xcode
• Pluggins
– Awesome Flutter Snippets
– Bracket Pair Colorizer 2
– Dart
– Flutter
– Material Icon theme
– Paste as Json code
INTRODUCCION A DART
• Temas a tratar:
– Por qué Dart?
– Hola mundo en Dart
– Tipado de datos en Dart
– Listas
– Mapas
– Funciones
– Clases
– Mixins
– Constructores
– Getters
– Setters
– Extender una clase
– Futures
– Async
– Await
• Compatibilidad con Google y este a su vez creo Flutter.
• Caracteristicas:
– AOT (Ahead of Time): Compilado a un rapido y predecible codigo nativo. (totalmente personalizable).
– Puede ser JIT (Just in Time): compilado para una velocidad excepcional de desarrollo (esto incluye el popular
Hot Reload).
– Hace facil la creacion de animaciones y transiciones que corren a 60fps
– Al ser compilado a codigo nativo no hay puentes innecesarios para correr el codigo.
– Dart le permite a flutter evitar el desarrollo de diseños en archivos independientes como JSX, XML o bien
interfaces separadas.
– Dart es facil de aprender, no es un lenguaje complicado.
HOLA MUNDO
• Vamos a empezar entrando a la pagina https://dartpad.dartlang.org, recuerde que dart necesita un
metodo main, en dart se recomienda que las funciones tengan el tipo de dato que retornan.
• Como definir una variable

• Ahora hagamos interpolacion en el string del print
TIPOS DE DATOS
NUMEROS Y STRING
• Podemos definir tipos de datos en dart, no es muy diferente a los lenguajes de programacion que hemos
usado, veamos un ejemplo con interpolación de strings para ahorrar lineas de codigo.
INSTALACION DE FLUTTER, EQUIPOS
VIRTUALES Y FISICOS
• Temas puntuales:
– Instalaciones en windows
– Instalaciones en OSX
– Android studio
– Xcode (solo en OSX)
– Correr en un android fisico
– Correr en un iphone fisico (solo OSX)
– Lanzar emuladores desde VScode
INSTALACIONES EN WINDOWS
• Ir a la pagina de flutter.dev y dar clic en get started
• Despues elegimos el instalador, recuerde elegir su sistema operativo

• Despues instalamos el flutter_windows.
• Abrir el explorador de windows y en el disco local C:\ crean una carpeta llamada src y en esta copian el
archivo que descomprimieron de la descarga anterior, no instalar en program files o archivos de
programas, despues abrimos las variables de entorno desde el menu de inicio escribimos env y abrimos
variables de entorno o enviroment variables, seleccionamos la variable de entorno path y editar o edit y
agregamos uno nuevo y agregamos el path c:\src\flutter\bin y lo pegamos en las variables de entorno
damos ok, cerramos el git bash que se instala y damos flutter –version recuerden descargar las
versiones estables. Instalamos android studio lo descargan y lo instalan abrimos el android studio
• El android studio no es
necesario instalarlo ya que
vamos a trabajar con Vscode de
todas formas aca dejo como lo
vamos a configurar para trabajar
con flutter.
• Damos clic en configuracion y
elegimos plugins
• Despues de abrir los plugins en la seccion de marketplace escribimos flutter e instalamos flutter
CREACION DE UN ANDROID VIRTUAL
EN WINDOWS
• Abrir el git bash, debemos aceptar las licencias de android flutter doctor --android-licenses si es la
primera vez damos enter enter y aceptar, cerramos y listo.
• Abrimos android studio y creamos un proyecto de flutter y seleccionamos un flutter application
• Despues de elegir flutter application damos clic en next y si quieren le cambian el nombre, damos clic
en next y finish y se crea el proyecto.
• Despues de crear el proyecto damos clic en tools  AVD Manager, se nos abre una pantalla y damos
clic en create virtual device, seleccionamos el dispositivo uno con una pantalla grande y otro con una
pantalla pequeña, se recomienda nexus 6 y los pixel XL creemos un pixel 3 XL, damos next y elegimos
la version de android estable el Pie, next, elegimos el nombre del dispositivo y le dejamos el nombre
por defecto, la tarjeta de video si tenemos una le dejamos Hardaware y si no sabemos lo dejamos
automatic. Y damos clic en finish.
COMO CREAR PROYECTOS DESDE
VISUAL STUDIO CODE - WINDOWS
• Lo primero que vamos a hacer es abrir el VsCode.
• Vamos a view (ver)  command palette (paleta de comandos) y escribimos flutter  flutter new proyect
• Y despues le colocamos el nombre al proyecto y este se crea

WINDOWS Y OSX
CORRE APLICACIÓN EN DISPOSITIVO
FISICO ANDROID
• Lo primero que vamos a hacer es actualizar las licensias del sdk ya que estas si no estan actualizadas no
dejaran que nuestro dispositivo android o iphone no conecte con nuestra aplicación, abrimos una terminal
recuerde que si usted es windows debe ejecutar como administrador esta consola.
• Despues de actualizar las licencias vamos a poner nuestro dispositivo android modo desarrollador, vamos
a ajustes acerca del telefono y tocamos varias veces sobre compilacion y colocamos nuestro pin
• Y buscamos desarrollador y seleccionamos opciones del desarrollador y activamos las opciones USB
• Lo que vamos a hacer a continuacion es abrir el VsCode y vamos a hacer que nuestro proyecto en flutter
compile en nuestro celular
• Primero: abrimos el proyecto que hicimos.
• Segundo: vamos a seleccionar el dispositivo (nuestro celular) en el Vscode vamos a ir al menu ver o view
paleta de comandos o palette commands y escribimos select device y seleccionamos nuestro dispositivo
en mi caso mi dispositivo se llama FRL L23
• Tercero: ya seleccionado nuestro dispositivo procedemos a depurar para que se compile en nuestro celular
y esperamos ya que este proceso es demorado por primera vez.
• Y ya por ultimo vemos reflejada la aplicación en el celular android
INTRODUCCION A FLUTTER
• TEMAS PUNTUALES:
– Conceptos fundamentales de flutter
– Arbol de Widgets
– Estructura de un proyecto en flutter
– Exposicion de cada archivo generado automaticamente
CONCEPTOS FUNDAMENTALES DE
FLUTTER
• Requiere mucha practica para aprender.
• Widget: es una clase que puede tener argumentos posiciones y argumentos con nombre. Todo en flutter
son widgets, existen dos tipos StatelessWidget Statefulwidget ambos son clases abstractas

Flutter - 1

Cargado por

Copyright:

Formatos disponibles

Flutter - 1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Flutter - 1

Cargado por

Copyright:

Formatos disponibles

• Como definir una variable

• Despues elegimos el instalador, recuerde elegir su sistema operativo

• Y despues le colocamos el nombre al proyecto y este se crea

También podría gustarte