Hoy vamos a ver como hacer nuestra primera app del tipo hola mundo con Flutter, esta tecnología para crear aplicaciones móviles para android e iOS programando solo una vez y que además nos permite hacerlo con un lenguaje algo nuevo pero bastante sencillo, Dart.

Flutter es una tecnología increíble desarrollada por Google.

Nos permite programar aplicaciones móviles y generarlas con el mismo código central para android, iOS e incluso web.

Existen varias opciones similares para esto, pero la verdad es que el hecho que Google este detrás y la facilidad del lenguaje de programación utilizado es para llamar la atención.

El lenguaje utilizado es Dart y la verdad es que es bastante sencillo de utilizar, sobre todo si vienes de desarrollo web y conoces de objetos o clases.

En Flutter todo es un widget, que es lo mismo que una clase, solo personalizas con parámetros de estos mismos objetos.

Para entrar en materia vamos a hacer el clásico hola mundo con Flutter, Dart y VSCode.

Para este tutorial debemos tener instalado Flutter y utilizaremos el editor de código VSCode.

Iniciamos creando nuestro proyecto Flutter mediante el gestor de paquetes presionando en VSCode Ctrl + Shift + P y eligiendo crear una nueva aplicación Flutter.

Una vez generado el demo vamos a eliminar todo el contenido de main.dart y escribimos el siguiente:

import 'package:flutter/material.dart';
import 'package:holamundo/home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Hola Mundo",
      home: HolaMundoHome()
    );
  }
}

Ahora creamos un nuevo archivo de código en lib llamado home.dart y escribimos el siguiente código:

import 'package:flutter/material.dart';

class HolaMundoHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: "Menu principal",
          onPressed: () => {
            print("Haciendo clic..")
          },
        ),
        title: Text('Titulo principal'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            tooltip: "Buscar",
            onPressed: () => {
              print('buscando..')
            }
          )
        ],
      ),
      body: Center(
        child: Text('¡Hola mundo!'),
      )
    );
  }
}

Con este tendremos nuestra primera aplicación Flutter terminada y luce así.

hola mundo con flutter final - jonathan melgoza

Si este hola mundo con Flutter te ha sido de utilidad no olvides compartirlo en tus redes sociales favoritas y dejarnos un comentario en la sección de abajo si tienes cualquier duda relacionada con este tema, será un placer ayudarte.

¡Hasta luego!

Clic para valorar esta información

[Total: 4 Promedio: 5]

Hola Mundo con Flutter Dart y VSCode

jonathan__melgoza