Conceptos básicos del desarrollo de aplicaciones con Flutter

Conceptos básicos para desarrollar aplicaciones con Flutter, desde el “Hola mundo”, hasta crear formularios de registro o acceder a Internet.

Flutter es un SDK de Google que facilita el desarrollo de aplicaciones móviles, web y de escritorio. Flutter está impulsado por la plataforma Dart, que posibilita la compilación en código máquina ARM para iOS y Android, también JavaScript para web e Intel x64 para dispositivos de escritorio.

Te puede interesar: Instalar Flutter

Hola Mundo con Flutter

El método main() es el punto de entrada de una aplicación Dart. Este método llama a App que desciende de un StatelessWidget. El método build de App retorna un MaterialApp con el appBar y el body. Dentro del body tenemos un texto centrado “Hola Mundo”.

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Mundo'),
        ),
        body: Center(
          child: Text('Hola Mundo'),
        ),
      ),
    );
  }
}

Aplicación StatelessWidget

Un StatelessWidget una vez que ha sido creado ya no cambia su apariencia. Por lo tanto, a diferencia del StatefulWidget, no necesita un objeto State.

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StatelessWidget',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('StatelessWidget'),
        ),
        body: Center(
          child: Text('StatelessWidget'),
        ),
      ),
    );
  }
}

Aplicación StatefulWidget

Un StatefulWidget modifica su apariencia dinámicamente en el momento de detectar algún cambio. Stateful proporciona un objeto State con sus métodos y campos.

En el ejemplo, cada vez que el usuario hace clic en el FloatingActionButton,  se invoca al método setState. Este ejecuta build de nuevo para actualizar su contenido.

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(title: 'Home'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _HomePageState extends State<HomePage> {
  int _counter = 1;

  void _multiply() => setState(() => _counter = _counter * 2);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline2,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _multiply,
        tooltip: '* 2',
        child: Icon(Icons.add),
      ),
    );
  }
}

Crear un formulario con el Widget Form

Los formularios son unos de los elementos fundamentales en cualquier aplicación informática. En Flutter tenemos el Widget Form. Puedes ver la entrada donde explico cómo crear un formulario de registro con Flutter, que contiene una imagen de perfil, y tres campos (nombre de usuario, email y clave).

Entrada: Crear formulario de registro en Flutter

Obtener datos desde Internet con Flutter

El primer paso para obtener información desde la red con flutter es utilizar el paquete http. No olvides añadirlo al archivo de dependencias pubspec.yaml.

También tenemos que añadir el permiso de Internet en el archivo AndroidManifest.xml.

Y modelar una clase en Dart que represente a los datos (generalmente en formato json) que queremos obtener desde Internet. Puedes ver el ejemplo completo desde el siguiente enlace:

Datos desde internet con Flutter

Flutter habla en Dart

Dart es el lenguaje de programación utilizado por Flutter. Desarrollado por Google es muy parecido a C, C++ o Java. En zafirogame tenemos una minientrada básica sobre Dart. Desde las variables y condicionales hasta los bucles.

Entrada Dart básico