Primera App con Flutter

Desarrollo de la primera aplicación móvil el típico Hola Mundo con Flutter, un sdk desarrollado por Google producto del proyecto Fucsia

Video Primera App con Flutter
SUSCRÍBETE A NUESTRO CANAL SÍGUENOS EN FACEBOOK

Primera App con Flutter Hola Mundo

La presente aplicación móvil es una básica, desarrollada para entender como es la dinámica con Flutter, usaremos el IDE de desarrollo Android Studio de Google, también se puede utilizar Visual Studio Code de Microsoft previa configuración e integración del SDK de Flutter tanto en Android Studio como en Visual Studio Code.

Desarrollando mi Primera App con Flutter

Antes de empezar con nuestra App, repito debemos de haber instalado y configurado Flutter es decir el SDK de Flutter para poder probar y escribir código Dart con Flutter.

El lenguaje de programación para Flutter es Dart. en su versión 2. Por experiencia puedo decirles que Dart es muy parecido a Javascript, este lenguaje nos permite trabajar en simultáneo el diseño como la lógica, es decir nos permite desarrollar mucho más rápido un proyecto.

HOLA MUNDO EN FLUTTER

¿Cómo hacer hola mundo en Flutter?

Al crear un nuevo proyecto, borramos todo lo que viene por default en main.dart  y digitamos el siguiente código para obtener un Hola mundo. Además de ello, debemos borrar al archivo que se encuentra dentro de la carpeta test.

El archivo principal llamado main.dart 

Veamos el código

  • Realizamos un import para instanciar materialApp en nuestra app
  • Levantamos runApp para ejecutar el widget principal
  • El widget retorna MaterialApp donde tenemos:
    • theme : determina los colores de la app
    • home : instancia un Scaffold el contendrá varios widgets como :appBar, Body, etc..
  • En el widget body creamos un widget Center este contendrá un widget hijo Text donde asignamos un Texto "Hola Mundo con Flutter", además podemos agregar estilos como color, tamaño de fuente, etc.
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(       
        //title: 'Flutter Demo',
        theme: ThemeData(
          primaryColor: Colors.indigo,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text("Mi Primera App"),
          ),
          body: Center(
            child: Text(
              "Hola Mundo con Flutter!!!",
              style: TextStyle(color: Colors.amber, fontSize: 60),
            ),
          ),
        ));
  }
}

Y colorin colorado este cuento se ha acabado... bueno, fuera de bromas esta es nuestra primera app. Para llegar a dominar el desarrollo de aplicaciones con Flutter recomiendo lo siguiente:

  • Práctica, mucho práctica
  • Googlear códigos de Flutter, estudiar como los han desarrollado
  • Probar dichos códigos, modificarlos, mejorarlos 
  • Leer la documentación https://flutter.dev/
  • Aprender a usar y asistenciar los paquetes: https://pub.dev/
  • Y no rendirse nunca jamas, al final siempre obtendremos frutos.

¿Quieres descargar el código fuente Primera App con Flutter?
...por favor suscríbete gratuitamente para descargarlo

Flutter

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 5188 veces | Publicado hace 2 años

Curso Flutter App Copa América

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021