Una aplicación Hello World usando Flutter

Flutter es un SDK de aplicaciones para crear aplicaciones de alto rendimiento y alta fidelidad para iOS, Android, Web (beta) y escritorio (vista previa técnica) a partir de una única base de código escrita en Dart Language. En este artículo, proporcionaré una explicación línea por línea de cómo crear una aplicación simple de Hello World usando Flutter. 

En Flutter todo es un Widget y usando widgets predefinidos uno puede crear widgets definidos por el usuario al igual que usando int, float, double podemos crear tipos de datos definidos por el usuario. En Flutter hay tres tipos de widgets

• Widget sin estado
• Widget con estado
• Widget heredado

En este artículo, usaremos Stateless Widget , Material App, Center y Text Widget

Widget sin estado : en Flutter Stateless Widget son los widgets que no pueden cambiar su estado, es decir, en Stateless Widget hay un método (función) llamado build que es responsable de dibujar componentes en la pantalla llamado solo una vez. Para volver a dibujar un widget sin estado, se debe crear una nueva instancia del widget sin estado. 

MaterialApp: también es un widget proporcionado por Flutter Team, que sigue el esquema de diseño de materiales de Google, MaterialApp es una clase que tiene varios argumentos con nombre como home: en el que pasamos el widget que debe mostrarse en la pantalla de inicio de una aplicación. Para leer más sobre MaterialApp , consulte la documentación de Flutter. 

Center Widget: Center también es un widget predefinido por Flutter Team, que toma otro widget en su argumento secundario. Usando Center Widget como sugiere el nombre, mostrará Widget en su argumento secundario en Center. 

Center(
    child: Widget(
    ),
),

Widget de texto: el Widget de texto también está predefinido por Flutter Team, que se usa para mostrar texto. Ahora construyamos una aplicación Hello World usando Flutter.

import 'package:flutter/material.dart';
 
void main() {
  runApp(const GeeksForGeeks());
}
 
class GeeksForGeeks extends StatelessWidget {
  const GeeksForGeeks({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Center(child: Text('Hello World')),
    );
  }
}

import 'package:flutter/material.dart';

Aquí estamos importando el paquete que tiene una definición para Stateless Widget, Center, Text, Material App y muchos más. Es como #include<iostream> en el programa C++.

GeeksForGeeks: es una clase definida por el usuario que hereda Stateless Widget, esa es toda la propiedad de Stateless Widget en GeeksForGeeks

Build: Es un método que se encarga de dibujar componentes en la pantalla, toma como argumento un BuildContext que tiene información sobre qué widget se debe mostrar y en qué orden se debe pintar en la pantalla. 

Producción:

No parece una aplicación moderna, ¡agreguemos diseño de materiales!

import 'package:flutter/material.dart';
 
void main() {
  runApp(const GeeksForGeeks());
}
 
class GeeksForGeeks extends StatelessWidget {
  const GeeksForGeeks({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    // Material App
    return MaterialApp(
 
        // Scaffold Widget
        home: Scaffold(
      appBar: AppBar(
        // AppBar takes a Text Widget
        // in it's title parameter
        title: const Text('GFG'),
      ),
      body: const Center(child: Text('Hello World')),
    ));
  }
}

Producción:

Explicación de salida: en la primera línea hemos importado la biblioteca de diseño de materiales que se utilizará en esta aplicación. Entonces tenemos nuestra función principal. Este es el punto donde comenzará la ejecución del código. Luego tenemos la clase ‘GeeksForGeeks’ que está extendiendo StatelessWidget. Este es básicamente el árbol de widgets principal de nuestra aplicación ‘hola mundo’. A todo esto le sigue el método de compilación, que devuelve un widget de MaterialApp . Luego, hemos empleado la propiedad de inicio de MaterialApp , que a su vez contiene el widget Scaffold . El widget Scaffold contiene la pantalla completa de la aplicación. Hemos usado la propiedad appBar que está tomando AppBarwidget como el objeto. Y a su vez, el widget AppBar tiene ‘GFG’ como título. Luego tenemos el cuerpo, que nuevamente es propiedad de MaterialApp . El centro es el objeto del cuerpo y su elemento secundario es el widget de texto que dice «Hola mundo».