Crea tu primer widget con flutter

Crear un widget en Flutter

Anteriormente aprendimos como configurar flutter en nuestro equipo y correr la aplicación de prueba que viene al crear el proyecto. Hoy nos ensuciaremos un poco las manos creando nuestro primer widget.

 

¿Qué es un widget?

Un widget no es más que una clase que nos permite construir los elementos de los que se compone la UI (interfaz de usuario).

En flutter, básicamente todo es un widget. Un botón, un texto, un menú , entre otras cosas que como usuarios podemos ver dentro de una aplicación. Sin embargo, también hay cosas que como usuarios no podemos ver a simple vista pero también lo son. Una columna, Una fila o el estilo de un texto.

Existen dos tipos de widgets: los que tienen estado (StatefulWidget) y los que no (StatelessWidget). Por ahora no entraremos en detalles. Esto lo veremos más adelante en otro artículo.

 

Creando nuestro primer widget

 

1. Deja limpio el archivo main.dart

Borra todo el código que se encuentre en este archivo. Vamos a comenzar desde cero.

 

2. Importa la librería de material design

Para construir nuestros widgets. Utilizaremos el patrón de diseño de material design. Que es el que podemos observar generalmente en las aplicaciones android.

				
					import 'package:flutter/material.dart';

				
			

Nota: Flutter también nos permite utilizar el patrón de diseño Cupertino. Que es el que se utiliza dentro de las aplicaciones iOS.

 

3. Crea la función main dentro de main.dart

La función main es la que se encarga de inicializar nuestra aplicación. Por eso es muy importante definirla. Sin esta simplemente flutter no sabrá por donde empezar.

				
					void main() {}
				
			

 

4. Llamar la función runApp()

Para que nuestra aplicación se ejecute. tendremos que llamar a la función runApp(). A esta le deberemos de pasar como parámetro nuestro widget principal. Nosotros le llamaremos MyApp.

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

 

5. Crear nuestro widget principal

Para crear nuestro widget principal. Creamos una clase que extienda alguna de las clases de widget con las que contamos (StatelessWidget ó StatefulWidget). Para este ejemplo. Crearemos la clase MyApp que extenderá StatelessWidget.

				
					class MyApp extends StatelessWidget{}
				
			

 

6. Método build()

Notaremos que el editor de texto nos marca un error dentro de nuestra clase MyApp. Esto es debido a que no hemos implementado el método build. Este método nos ayuda a construir la UI del widget. 

				
					class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {}
}
				
			

Este método como podemos apreciar se hereda de StatelessWidget. Por lo que tenemos que sobre escribirlo para realizar nuestra propia implementación. También podemos apreciar que este método recibe como argumento un parámetro del tipo BuildContext. Hablaremos de BuildContext más adelante.

7. MaterialApp()

MaterialApp es una widget que nos permite definir una aplicación basada en material design. Este widget nos sera útil a manera de layout en el que agrupar todos los demás widgets que conformarán nuestra aplicación.

Como hemos dicho al principio. Un widget, es una clase. Por lo que como tal, tiene sus propios constructores que la definen:

				
					MaterialApp({Key? key, GlobalKey<NavigatorState>? navigatorKey, GlobalKey<ScaffoldMessengerState>? scaffoldMessengerKey, Widget? home, Map<String, WidgetBuilder> routes, String? initialRoute, RouteFactory? onGenerateRoute, InitialRouteListFactory? onGenerateInitialRoutes, RouteFactory? onUnknownRoute, List<NavigatorObserver> navigatorObservers, TransitionBuilder? builder, String title, GenerateAppTitle? onGenerateTitle, Color? color, ThemeData? theme, ThemeData? darkTheme, ThemeData? highContrastTheme, ThemeData? highContrastDarkTheme, ThemeMode? themeMode, Locale? locale, Iterable<LocalizationsDelegate>? localizationsDelegates, LocaleListResolutionCallback? localeListResolutionCallback, LocaleResolutionCallback? localeResolutionCallback, Iterable<Locale> supportedLocales, bool debugShowMaterialGrid, bool showPerformanceOverlay, bool checkerboardRasterCacheImages, bool checkerboardOffscreenLayers, bool showSemanticsDebugger, bool debugShowCheckedModeBanner, Map<ShortcutActivator, Intent>? shortcuts, Map<Type, Action<Intent>>? actions, String? restorationScopeId, ScrollBehavior? scrollBehavior, bool useInheritedMediaQuery})
				
			

Bien. No te asustes. Su implementación es mas sencilla de lo que parece. Por el momento vamos a pasar de los constructores y vamos a retornar MaterialApp así sin mas.

				
					class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}
				
			

Veremos que nuestro editor de texto ya no nos marca ningún error. Sin embargo al correr la aplicación en el debug, nos encontraremos con una amenazante pantalla roja que nos muestra el siguiente error.

 

 

El error en cuestión es debido a que nuestro widget esta retornando un valor nulo. Esto debido a que hemos hemos pasado por alto las propiedades de nuestro widget. Pues bien ahora si basta de tantos errores. Mostraremos a continuación el famoso “Hola Mundo” en nuestra aplicación.

 

8. Hola Mundo

Para mostrar el “Hola Mundo” en nuestra aplicación definiremos la propiedad home de nuestra MaterialApp y le pasaremos como valor un widget del tipo Scaffold. A su vez, a este le definimos la propiedad body con otro widget del tipo Text. En el que escribiremos nuestro “Hola Mundo”.

				
					class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
        body: Text('Hola Mundo')
        )
    );
  }
}
				
			

Un widget dentro de otro widget dentro de otro widget? Pues si. Básicamente es así como funcionan las cosas en Flutter. Es algo confuso en un principio, pero conforme vayamos practicando las cosas se irán haciendo mas sencillas. Por ahora corremos nuestra app y veremos que queda así.

 

 

Horrible ¿Cierto?. No te preocupes. Iremos haciendo cosas cada vez más detalladas. Pero por ahora vamos a ver lo que hemos hecho:

La propiedad home de MaterialApp es la que define la primera pantalla que se mostrará al iniciar nuestra aplicación. A esta propiedad le hemos pasado un widget Scaffold.

El widget Scaffold es un layout en el que se agruparan todos los widgets que se muestren en una pantalla. Estos los definiremos en su propiedad body. Por ahora solo hemos definido un widget de texto.

 

Conclusion

En esta ocasión hemos aprendido lo que es un widget, como crearlo, y como correr este al inicio de nuestra aplicación mediante el ejercicio “Hola Mundo”. También hemos aprendido a realizar una implementación básica de los widgets MaterialApp, Scaffold y Text.

 

Bonus

Bien. No dejemos tan feo nuestro “Hola mundo”. Vamos a dejarlo un poco más bonito para que de orgullo mostrarlo.

				
					class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Text(
      'Hola Mundo',
      style: TextStyle(color: Colors.teal, fontSize: 30),
    ))));
  }
}
				
			

Lo que hemos hecho es agregar el widget de texto que teníamos, dentro del widget Center. Lo que ha hecho que nuestro “Hola Mundo” se ponga en el centro de la pantalla. Luego le hemos agregado la propiedad style al widget de texto en el cual le hemos definido otro widget llamado TextStyle, que nos permitirá editar el estilo del texto. Por ahora solo hemos modificado su color y su tamaño quedandonos así:

 




Mucho mejor ¿No?. Si deseas puedes descargar esta práctica en github.

Compartir:
Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Entradas relacionadas
pastel herencia programacion
POO | Entendiendo la herencia de clases

En este artículo desarrollaremos código Puedes consultar el código de esta practica en el siguiente repositorio de github. Generalmente cuando pensamos en herencia. Pensamos en