Saltar al contenido

Estructura de una aplicación hecha en Flutter

febrero 11, 2020
curso gratis de flutter

Continuamos con el curso de Flutter en YouTube. En esta ocasión vamos a estudiar la estructura de una aplicación hecha en flutter con un pequeño ejemplo en el que construimos una aplicación desde cero usando los widget más importantes y básicos.

En el vídeo anterior vimos como descargar e instalar el SDK de Flutter y además creamos la primera aplicación por defecto de Flutter. También vemos un poco sobre lo que es Flutter y sus ventajas en comparación con otros software similares, si no lo has visto te recomiendo verlo antes para poder seguir el curso junto con los demás.

Comenzaremos borrando el contenido por defecto del archivo main.dart que se encuentra en la carpeta lib. No olvides borrar la carpeta test que se encuentra al nivel de la carpeta lib. Después de eso vamos a comenzar a escribir nuestro código.

Primera parte de una App hecha en Flutter

Lo primero que debemos saber es importar el paquete de material y llamar a nuestra función main. Esta función tiene la importante misión de llamar al primer widget que contendrá toda la aplicación dentro.

import 'package:flutter/material.dart';
 
void main() => runApp(MiApp());

El texto que está dentro de los paréntesis de runApp( … ) es el nombre del primer widget que se ejecutará. La estructura del resto estará en el vídeo que dejaré a continuación:


A continuación les dejo todo el código del archivo main.dart para que lo compares con el tuyo y revisarlo mejor.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Mi App",
      home: Inicio(),
    ) ;
  }
}


class Inicio extends StatefulWidget {
  Inicio({Key key}) : super(key: key);

  @override
  _InicioState createState() => _InicioState();
}

class _InicioState extends State<Inicio> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Mi App"),
      ),
      body: Center(
        child: Text("Hola mundo"),
      ),
    );
  }
}