DEV Community: Pablo L

Flutter. A Quarter Round Slider.

Pablo L — Tue, 12 May 2020 17:30:25 +0000

Introduction

This post describes the process of creating a custom slider that can be used to select a value from a range of them. The slider resembles the quarter of a circle instead of the typical linear shape.

Custom Painter

Obviously I will need to paint a custom component and this should be done using two Flutter API classes. CustomPainter and CustomPaint.

CustomPainter You must extend this class and overwrite the method void paint(Canvas, Size) in order to draw the Widget UI and bool shouldRepaint(CustomPainter) method to return true if the widget should be repainted when a new instance of CustomPainter is provided.

CustomPaint The class CustomPainter described above is used through the CustomPaint Widget. CustomPaint takes a constructor parameter named painter for this purpose.

The process is quite simple and can be applied to both simple projects like these and larger, more complex components.

Skeleton example

The classes used in the example are:

MyApp extends StatelessWidget. A Stateless Widget which contains the MaterialApp, Scaffold Widgets of the Application.
RoundSlider extends StatefulWidget. Statefull Widget class of the component.
_RoundSliderState extends State Representing the state of the RoundSlider Widget .
RoundPainter extends CustomPainter. The class which paints the UI.

Class MyApp

It's a stateful widget which launches the application and passes to the slider the constructor parameters title, radius and maxvalue which are self-described.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
 return   MaterialApp(
     home: Scaffold(
         appBar: AppBar(title: Text("Example")),
         body: Center(
             child: RoundSlider(
                 title: "Volume", radius: 90, maxvalue: 99))));
  }
}

Classes RoundSlider and RoundSliderState

RoundSlider is the main slider Widget. Its a stateful widget and its state class named RoundSliderState returns into the building method, a GestureDetector which captures drag movements and calculates the proper angle.

Notice that the angle is limited in code to the range 0 to pi/2

The GestureDetector wraps an instance of RoundPainter that we will analyze later.

class RoundSlider extends StatefulWidget {
  final double radius;
  final double maxvalue;
  final String title;

  RoundSlider({this.radius, this.maxvalue, this.title});
  @override
  _RoundSliderState createState() => _RoundSliderState();
}

class _RoundSliderState extends State<RoundSlider> {
  double angle = 0;

  void _update(u) {
    setState(() {
      double testAngle = atan2(u.localPosition.dy, u.localPosition.dx);

      if (testAngle >= 0 && testAngle <= pi / 2) {
        setState(() {
          angle = testAngle;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onHorizontalDragUpdate: (update) {
          _update(update);
        },
        onVerticalDragUpdate: (update) {
          _update(update);
        },
        child: Column(children: <Widget>[
          Text(widget.title,textScaleFactor: widget.radius/60,),
          Container(
            padding: EdgeInsets.all(widget.radius * 0.20),
            width: widget.radius + widget.radius * 0.20,
            height: widget.radius + widget.radius * 0.20,
            decoration: BoxDecoration(border: Border.all()),
            child: CustomPaint(
                painter: RoundPainter(angle: angle, maxvalue: widget.maxvalue)),
          ),
        ]));
  }
}

Class RoundPainter

The constructor takes the parameter angle in order to calculate the coordinates x,y of the selector and the parameter maxvalue to calculate the actual value selected.

Values like strokeWidth, textScaleFactor, etc...are calculated proportionally to width value of the component.

class RoundPainter extends CustomPainter {
  double angle;
  double maxvalue;
  Paint strokePaint = Paint()..style = PaintingStyle.stroke;

  Paint fillPaint = Paint()
    ..style = PaintingStyle.fill
    ..color = Colors.white;

  RoundPainter({this.angle, this.maxvalue});

  Offset offset = Offset(0, 0);

  @override
  void paint(Canvas canvas, Size size) {
    strokePaint.strokeWidth = size.width / 25;

    canvas.drawArc(Rect.fromCircle(center: offset, radius: size.width), 0,
        pi / 2, false, strokePaint);

    _drawSelector(canvas, size, angle);
    _drawValue(canvas, size, (maxvalue * angle / pi).round());
  }

  void _drawValue(Canvas canvas, Size size, int value) {
    TextSpan span = new TextSpan(
        style: new TextStyle(color: Colors.black), text: value.toString());
    TextPainter tp = TextPainter(
        text: span,
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.left,
        textScaleFactor: size.width / 40);
    tp.layout(minWidth: 0);
    Offset newOffset = Offset(offset.dx, offset.dy);
    tp.paint(canvas, newOffset);
  }

  void _drawSelector(Canvas canvas, Size size, double angle) {
    strokePaint.strokeWidth = 1;
    double x = size.width * cos(angle);
    double y = size.height * sin(angle);
    canvas.drawCircle(Offset(x, y), size.width / 10, fillPaint);
    canvas.drawCircle(Offset(x, y), size.height / 10, strokePaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

All the code

The rest of the code...
`

import 'package:flutter/material.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
 return   MaterialApp(
     home: Scaffold(
         appBar: AppBar(title: Text("Example")),
         body: Center(
             child: RoundSlider(
                 title: "Volume", radius: 90, maxvalue: 99))));
  }
}


class RoundSlider extends StatefulWidget {
  double radius;
  double maxvalue;
  String title;

  RoundSlider({this.radius, this.maxvalue, this.title});
  @override
  _RoundSliderState createState() => _RoundSliderState();
}

class _RoundSliderState extends State<RoundSlider> {
  double angle = 0;

  void _update(u) {
    setState(() {
      double testAngle = atan2(u.localPosition.dy, u.localPosition.dx);

      if (testAngle >= 0 && testAngle <= pi / 2) {
        setState(() {
          angle = testAngle;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onHorizontalDragUpdate: (update) {
          _update(update);
        },
        onVerticalDragUpdate: (update) {
          _update(update);
        },
        child: Column(children: <Widget>[
          Text(widget.title,textScaleFactor: widget.radius/60,),
          Container(
            padding: EdgeInsets.all(widget.radius * 0.20),
            width: widget.radius + widget.radius * 0.20,
            height: widget.radius + widget.radius * 0.20,
            decoration: BoxDecoration(border: Border.all()),
            child: CustomPaint(
                painter: RoundPainter(angle: angle, maxvalue: widget.maxvalue)),
          ),
        ]));
  }
}

class RoundPainter extends CustomPainter {
  double angle;
  double maxvalue;
  Paint strokePaint = Paint()..style = PaintingStyle.stroke;

  Paint fillPaint = Paint()
    ..style = PaintingStyle.fill
    ..color = Colors.white;

  RoundPainter({this.angle, this.maxvalue});

  Offset offset = Offset(0, 0);

  @override
  void paint(Canvas canvas, Size size) {
    strokePaint.strokeWidth = size.width / 25;

    canvas.drawArc(Rect.fromCircle(center: offset, radius: size.width), 0,
        pi / 2, false, strokePaint);

    _drawSelector(canvas, size, angle);
    _drawValue(canvas, size, (maxvalue * angle / pi).round());
  }

  void _drawValue(Canvas canvas, Size size, int value) {
    TextSpan span = new TextSpan(
        style: new TextStyle(color: Colors.black), text: value.toString());
    TextPainter tp = TextPainter(
        text: span,
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.left,
        textScaleFactor: size.width / 40);
    tp.layout(minWidth: 0);
    Offset newOffset = Offset(offset.dx, offset.dy);
    tp.paint(canvas, newOffset);
  }

  void _drawSelector(Canvas canvas, Size size, double angle) {
    strokePaint.strokeWidth = 1;
    double x = size.width * cos(angle);
    double y = size.height * sin(angle);
    canvas.drawCircle(Offset(x, y), size.width / 10, fillPaint);
    canvas.drawCircle(Offset(x, y), size.height / 10, strokePaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

RaisedButton Examples

Pablo L — Mon, 27 Apr 2020 16:23:17 +0000

RaisedButton

  Widget _makeButton() {
    return RaisedButton(
        child: Text("PUSH ME"),
        color: Colors.red,
        onPressed: () {
          print("OK!!");
        }
    );
  }

RaisedButton + Border

  Widget _makeButton() {
    return RaisedButton(
      child: Text("PUSH ME"),
      shape: Border.all(),
      color: Colors.red,
      onPressed: () {
        print("PUSHED");
      },
    );
  }

RaisedButton + Border + Elevation

  Widget _makeButton() {
    return RaisedButton(
      color: Colors.red,
      elevation: 15,
      child: Text("PUSH ME"),
      shape: Border.all(),
      onPressed: () {
        print("PUSHED");
      },
    );
  }

RaisedButton + Elevation + Round Shape

  Widget _makeButton() {
    return RaisedButton(
      color: Colors.red,
      elevation: 15,
      shape: StadiumBorder(),
      child: Text("PUSH ME"),
      onPressed: () {
        print("PUSHED");
      },
    );
  }

RaisedButton + Border + Elevation + Round Shape and Border

  Widget _makeButton() {
    return RaisedButton(
      color: Colors.red,
      elevation: 15,
      shape: StadiumBorder(side: BorderSide(color: Colors.black, width: 1)),
      child: Text("PUSH ME"),
      onPressed: () {
        print("PUSHED");
      },
    );
  }

RaisedButton + Border + Icon + Elevation + Round Shape and Border

  Widget _makeButton() {
    return RaisedButton(
      color: Colors.red,
      elevation: 15,
      child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[Icon(Icons.access_alarm), Text("TIME ALARM")]),
      shape: StadiumBorder(side: BorderSide(color: Colors.black, width: 1)),
      onPressed: () {
        print("PUSHED");
      },
    );
  }

Procesos Asíncronos. Streams en dart.

Pablo L — Fri, 24 Apr 2020 20:14:48 +0000

Introducción

Comprender la forma en como dart trata los procesos asíncronos y entender los streams puede costar al principio porque se alejan un poquito de la programación tradicional, pero no es algo difícil y una vez comprendida la foto te darás cuenta de su utilidad.

Voy a tratar en este artículo de ser lo más claro y sencillo posible. Sin presuponer conocimientos previos de la materia en dart.

Streams

En la mayoría de los tutoriales de dart a la hora de definir un Stream suelen comparar un Stream con una cinta transportadora en donde dejamos datos al principio de la cinta para recogerlos al final de la misma más tarde.

Efectivamente en nuestro programa un proceso de ejecución como por ejemplo puede ser una entrada de texto de usuario o la respuesta a un request HTTP, deja datos en un Stream. Otro proceso de ejecución recoge esos datos de este Stream y los procesa.

Cuando digo que otro proceso de ejecución recoge esos datos te puedes preguntar de que proceso estoy hablando. Ese proceso o procesos los habrás creado previamente, se llaman listeners y son configurados para "escuchar" lo que pasa en ese stream (aviso de inicio datos, fin de datos, errores) y por supuesto para recoger los datos que otro proceso dejó.

Dart es un lenguaje de programación reactiva y en nuestro programas reaccionamos antes los datos. En otros lenguajes como por ejemplo Java, en las operaciones de E/S (que siempre son asíncronas) se bloquea el hilo de ejecución para "facilitar" las cosas. Por ejemplo en Java o C, cuando leemos de un fichero le decimos a nuestro programa algo así como:

Lee este fichero pero cuando tengas 1024 bytes te paras y proceso los datos ahora

En dart con programación reactiva y los streams suena distinto...le decimos algo como:

Lee este fichero y me vas soltando los datos en este Stream, algún listener procesará los datos

No sé si la exposición es muy académica pero quiero que sea entendible :) En dart hay que configurar como reaccionar al cambio en los datos. No quiero entrar en si la programación reactiva de dart es mejor o no que la programación tradicional.

Entendiendo los Streams desde el código

Vamos a bajar un poquito al código dart. Vamos a ver clases y métodos relacionados para entender el concepto.

StreamController es la clase principal implicada en los streams. Creamos streams desde esta clase. El constructor usa el tipo de dato que utilizaremos en nuestro stream.
stream es un getter de la clase StreamController para obtener su Stream
listen(dynamic data) método de la clase Stream para escuchar lo que pasa en el mismo. En principio solo puede haber un escuchador por Stream aunque veremos que fácilmente podemos configurarlo para que existan varios.

El tipo dynamic puede ser cualquier tipo pero coincidirá con el tipo T indicado en el constructor parametrizado de StreamController mencionado en el punto 1.

sink getter de la clase StreamController para obtener la instancia del Sink del stream. El Sink es donde poner los datos
add() método de la clase Sink para añadir un dato al stream.

Ejemplo mínimo

Vamos a poner el ejemplo más ridículo y breve posible que he podido desarrollar para que no te pierdas los conceptos clave.

import 'dart:async';

void main() {
  StreamController controller=new StreamController<int>();

  controller.stream.listen((dynamic data){
    print(data);    
  });

  controller.sink.add(2);
}

El ejemplo representa bastante bien los conceptos mencionados. Crear StreamController, crear listener, añadir dato, captura de datos. Lo vemos.

Hemos creado una instancia de la clase StreamController:

StreamController controller=new StreamController<int>();

Hemos creado un listener que capturan los datos añadididos al stream :

StreamController controller=new StreamController<int>();

Hemos añadido una dato de tipo int al Stream:

controller.sink.add(2);

Capturar errores, fin de datos

Además de recoger los datos para su proceso deberíamos capturar los posibles errores de nuestro Stream. Imaginemos que queremos hacer un request a una página de internet. Es posible que haya un error de red durante la transmisión o quizás la página este caída. Deberíamos poder informar de estas situaciones y cerrar la conexión.

Mediante el método handleError(Object error) de la clase Stream capturamos el error. Para añadirlo utilizamos el método handleError(Object error).

También puede ser útil controlar cuando ya se ha cerrado el stream y no va a haber más datos. En este caso usamos el método onDone(). El fin de datos se produce cuando el stream lo cerramos con el método **close()*

Lo vemos con un ejemplo. Vamos a añadir al código anterior la captura de errores, control de fin de datos.

import 'dart:async';

void main() {
  StreamController controller = new StreamController<int>();


  controller.stream.listen(
          (data) {
        print('Data: $data');
      },
      onError: (err) {
        print('Error!');
        controller.sink.close();
      },
      onDone: () {
        print('Done!');
      }
  );

  controller.sink.add(2);
  controller.sink.addError("error");
}

El resultado de la ejecución es:

2
error
Done!

Más de un listener

Si en el código anterior intentamos añadir un listener:

import 'dart:async';

void main() {
  StreamController controller = new StreamController<int>();

  controller.stream.listen((data) {
    print('Data: $data');
  });

  controller.stream.listen((data) {
    print('Data: $data');
  });

  controller.sink.add(2);
  controller.sink.addError("error");
  controller.sink.close();
}

Veremos que obtenemos un error similar a este:

Unhandled Exception: Bad state: Stream has already been listened to

Efectivamente no podemos tener más de un listener en nuestro stream, pero mediante el constructor broadcast() del StreamController si que podemos.

import 'dart:async';

void main() {
  StreamController controller = new StreamController<int>.broadcast();

  controller.stream.listen((data) {
    print('Data: $data');
  });

  controller.stream.listen((data) {
    print('Data: $data');
  });

  controller.sink.add(2);
}

Otra forma de crear streams, async* y yield

Imaginemos que tenemos una serie de valores que queremos añadir a un stream de una forma sistemática como por ejemplo números aleatorios o una serie de números primos. En estos casos en lugar de ir añadiendo al stream número a número mediante el método add(), hay otra forma muy elegante. Vamos al ejemplo para y luego te explico conceptos.

import 'dart:async';

bool isPrimo(n) {
  for (int i = 1; i < n; i++) {
    if (n % i == 0 && i!=1) {
      return false;
    }
  }

  return true;
}

Stream<int> generaPrimos(n) async* {
  for (int i = 1; i <= n; i++) {
    if (isPrimo(i)) {
      yield i;
    }
  }
}


void main() {
  generaPrimos(100).listen((data){
    print (data);
  });
}

Vamos a centrarnos en esta función generadora de valores:

Stream<int> generaPrimos(n) async* {
  for (int i = 1; i <= n; i++) {
    if (isPrimo(i)) {
      yield i;
    }
  }
}

Esta función generadora de números primos termina con un operador clave async*. Cuando terminamos una función con async* sucede lo siguiente:

Al igual que async, convierte la función es asíncrona.
Nos obliga a retornar un tipo Stream.
Nos da la oportunidad de utilizar un comando muy útil y elegante para usar en listas de datos. Se llama yield.

El comando yield retorna un valor pero a diferencia del comando return normal, no sale de la función sino que continua con el flujo de esta. En el ejemplo, la función asíncrona generaPrimo, cuando encuentra un número primo retorna ese número pero continúa en la función a la búsqueda del siguiente.

Conclusión

Tengo mucho experiencia en programación tradicional principalmente en Java y poca en programación reactiva así que cuando conocí dart y su forma de tratar la asincronía, streams, futures etc...pensé...pero como no se inventó esto antes? :)

Espero que te haya gustado el artículo!!! Como admirador del lenguaje dart A mi me encantó escribirlo!!! Viva dart!!! :)

En breve redactaré otro sobre futures en dart que está muy relacionado.

Muchas gracias!!
(PLM)

Patrón Provider en Flutter

Pablo L — Mon, 20 Apr 2020 23:51:44 +0000

Introducción

Flutter y Widgets. Widgets y Flutter....como sabéis, la mayoría de los elementos visuales y no visuales que componen una aplicación en en Flutter son Widgets.

Efectivamente, el hecho que casi todo en un desarrollo Flutter sea un Widget, es una ventaja en términos de simplicidad sobretodo en los comienzos del desarrollo de una aplicación.

Normalmente en la ejecución de nuestra aplicación y en ciertos puntos de la misma, cambiaremos el estado a través del método setState y Flutter internamente se ocupa de repintar. Esto funciona así de "de serie" y está bien, nada que objetar...sin embargo, cuando una aplicación crece en tamaño y funcionalidad, la cosa se complica por dos razones.

1- La lógica de negocio puede estar dispersa en un montón de Widgets y difícil de encontrar. Además el código de la lógica suele encontrarse en el propio Widget, por lo que interfaz visual y lógica se mezclan.

2- Cuando cambiamos algo en el estado de un Widget, todo el árbol de Widgets es repintado aunque no sea necesario, lo que en términos de eficiencia penaliza.

Cuando la aplicación es lo suficientemente grande y se complica un poco necesitamos de una arquitectura que evite estos problemas.

El patrón Provider

El patrón Provider puede que no sea tan sofisticado como otros patrones como por ejemplo el patrón impulsado por Google en el 2018, el patrón Bloc, pero pata aplicaciones de tamaño pequeño/medio puede ser válido. Cuando mecanizamos el proceso del desarrollo de nuestras aplicaciones se simplifican mucho las cosas aplicando este patrón.

Elementos del patrón Provider

ChangeNotifier: La clase o clases que contienen el modelo deben heredar de esta clase. Desde esta clase avisaremos a los 'listeners' cuando el modelo cambie mediante el método 'notifyListeners'

ChangeNotifierProvider: Tiene dos parámetros en su construcción.

create: en donde instanciaremos el modelo.
child: Los widgets que cuelguen de aquí, serán serán notificados cuando invoquemos el método 'notifyListeners'.

Consumer: A la hora de recuperar el modelo para su consulta o modificación desde los diferentes Widgets de nuestra aplicación, usaremos el Widget Consumer. Eventualmente podemos usar Provider.of(T).

Ejemplo Práctico

Vamos a poner como ejemplo una aplicación muy simple en el mostraremos por pantalla el número de caracteres de un TextField.

Primero creamos el modelo heredando de la clase ChangeNotifier.

class MyModel extends ChangeNotifier{
  int ncars=0;

  void textChange(String cars){
    ncars=cars.length;
    notifyListeners();
  }
}

Fíjate que hemos creado el método textChange dentro del cual modificamos la variable del modelo ncars en función de la longitud de la cadena cars. Después de la modificación invocamos al método notifyListeners de ChangeNotifier. Al hacer esto, Flutter avisará a los escuchadores de que el modelo ha cambiado.

El resto del código de la aplicación.

class MyApp extends StatelessWidget {
  @override

  Widget build(BuildContext context) {
    MaterialApp materialApp= MaterialApp(
        home: Material(
            child: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[

                  Consumer<MyModel>(
                    builder:(context,m,child){
                      return Text(m.ncars.toString());
                    }
                  ),
                  Consumer<MyModel>(
                      builder:(context,m,child){
                        return TextField(
                          onChanged: (car){
                            m.textChange(car);
                          }
                        );
                      }
                  )
    return ChangeNotifierProvider<MyModel>(
      builder: (context) => MyModel(),
      child: materialApp,
    );
  }
}

Observa que en el Widget MyApp sin estado, devolvemos un representante de la clase ChangeNotifierProvider<. En el parámetro constructor builder retornamos un representante de nuestro modelo y en el parámetro child el árbol de Widgets.

return ChangeNotifierProvider<MyModel>(
      builder: (context) => MyModel(),
      child: materialApp,
    )

Si te detienes en los Widgets del tipo Consumer, verás que el primero para presentar el número de caracteres del Texfield. Recuerda que este número de caracteres es la variable ncars de la clase MyModel.

Es importante que en el interior de los Widgets tengamos el mínimo código posible, es mejor situar la lógica de negocio en el interior de los ChangeNotifier cómo es el caso del presente ejemplo o en una clase que haga de wrapper de la lógica. Este patrón no se caracteriza por separar claramente la lógica de negocio del modelo pero si la saca de los Widgets y la ordena.

Consumer<MyModel>(
                    builder:(context,m,child){
                      return Text(m.ncars.toString());
                    }
                  ),

El segundo Consumer contiene el TextField y reacciona al

                  Consumer<MyModel>(
                      builder:(context,m,child){
                        return TextField(
                          onChanged: (car){
                            m.textChange(car);
                          }
                        );
                      }
                  )

Pestañas en Flutter

Pablo L — Mon, 28 Oct 2019 20:23:34 +0000

Introducción

Flutter nos proporciona en su API una forma muy simple de presentar pestañas en nuestra aplicación que reaccionan a su pulsación presentando un contenido u otro. Empezamos!!!

En primer lugar vamos a describir teóricamente los elementos necesarios y finalizaremos con un ejemplo muy simple para verlo en la práctica. Este ejemplo consistirá en dos pestañas etiquetadas con un icono que mostrarán un texto u otro.

Elementos

Los elementos necesarios son:

TabBarView contiene los contenidos a mostrar por las pestañas. Es el parámetro del tipo List children.

TabBar contiene las etiquetas de las pestañas (tipicamente textos o iconos) en el parámetro del tipo List tabs. Generalmente su contenedor es un tipo AppBar.bottom.

TabController coordina el manejo de las pestañas y coordinación de elementos TabBar y TabBarView descritos. Generalmente no usaremos la clase TabController directamente sino que usaremos la subclase DefaultTabController.. Los parámetros de construcción relevantes son length con el número de pestañas a mostrar y child con el widget contenedor de los elementos TabBar y TabBarView.

Ejemplo

import 'package:flutter/material.dart';

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

class TabApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Tab());
  }
}

class Tab extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TabState();
  }
}

class TabState extends State<Tab> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        child: Scaffold(
            appBar: AppBar(
              title: Text('Tabs, Tabs, Tabs...'),
              bottom: TabBar(
                tabs: [
                  Icon(Icons.call),
                  Icon(Icons.call_end),
                ],
              ),
            ),
            body: TabBarView(children: [
              Center(child: Text('Llamar')),
              Center(child: Text('Colgar'))
            ])));
  }
}

Diálogos en Flutter

Pablo L — Sun, 27 Oct 2019 19:34:54 +0000

Introducción

La clase Dialog del API de Flutter es la clase base en la que apoyarnos cuando queremos mostrar un Diálogo pero raramente la vamos a usar directamente sino que nos apoyaremos en sus subclases AlertDialog y SimpleDialog

AlertDialog y SimpleDialog

En líneas generales, cuando queramos mostrar un diálogo sencillo con un solo widget, quizás con un texto de alerta o un texto de entrada usaremos AlertDialog.

Cuando queramos un diálogo un poquito más evolucionado usaremos la clase SimpleDialog.

Ambos Widgets son mostrados con el método de la clase Material showDialog. Veamos un ejemplo de cada opción.

AlertDialog

Como ejemplo vamos a crear una miniaplicación en la que al pulsar un botón presentaremos un diálogo con un texto de entrada. Al completar el texto cerraremos el diálogo y la vista principal mostrará el valor informado.

Vamos a crear un Stateful llamado MyDialog. En su clase de estado que llamaremos MyDialogState, tendremos una variable de tipo String que contendrá el valor que puede ser fijado desde el TextField de entrada del diálogo.

Vemos que el diálogo es muy básico y tiene como contenido un solo widget por lo que lo más idóneo es usar la clase AlertDialog.



import 'dart:io';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyDialog(title: 'Flutter Demo Diálogo'),
    );
  }
}

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

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

class MyDialogState extends State<MyDialog> {
  int _counter = 0;
  String textValue = '?';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Text(textValue)
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showDialog(context);
        },
        child: Icon(Icons.add),
      ),
    );
  }

  _showDialog(BuildContext ctx) {
    showDialog(context: ctx,
        builder: (context) {
          return AlertDialog(
              title: Center(
                  child:Text(
                      "Alerta!!!")),
              content: TextField(
                  decoration: InputDecoration(
                    hintText: textValue,
                  ),
                  onSubmitted: (text){
                    setState(() {
                      textValue=text;
                    });

                    Navigator.pop(ctx);
                  }));
        }
    );
  }

}

Como relevante mencionar el parámetro constructor de AlertDialog content que es el Widget de contenido que vamos a presentar en el diálogo. Nada nos impediría pasarle un contenedor que contuviera varios Widgets pero para eso esta la clase SimpleDialog que veremos a continuación.

SimpleDialog

Vamos a sustituir el método _showDialog anterior que presenta un AlertDialog por este otro que presenta un SimpleDialog:



...
...
 _showDialog(BuildContext ctx) {
    showDialog(
      context: ctx,
        builder: (context) {
          return SimpleDialog(
            title: Center(child: Text("SimpleDialog!!")),
            children: <Widget>[
              Center(child: Text("Un Widget!!!")),
              Center(child: Text("Dos Widgets!!!")),
              Center(child: Text("Tres Widgets!!!")),
              Center(child: FlatButton(child: Text("Ok"), onPressed: () {
                Navigator.pop(ctx);
              })),
            ],
          );
        });
  }
...
...

Observamos que el parámetro content de AlertDialog desaparece y ahora tenemos el parámetro children con un array de Widgets.

Widgets y FutureBuilder

Pablo L — Sat, 26 Oct 2019 16:52:30 +0000

Introducción

Se nos habrá presentado seguramente el caso en el que tenemos un Widget el cual necesita datos para su construcción pero estos datos no puede ser adquiridos inmediatamente sino que van a demorarse más o menos tiempo su obtención. Una lectura de un fichero, consultas a base de datos, un request a una página de internet...en fin operaciones asíncronas que pueden demorarse.

Obviamente hasta que no tengamos el contenido que necesita el Widget no deberíamos presentarlo pero...y si este contenido se demora como debemos actuar?

Flutter en su API nos provee de un Widget llamado FutureBuilder que nos permite lidiar con estos problemillas "asíncronos" de una modo fácil.

FutureBuilder

Para un funcionamiento mínimo FutureBuilder necesita en su constructor dos parámetros.

future
builder

El parámetro future es una instancia Future con el valor necesitado por nuestro Widget.

El parámetro builder es un método que debemos sobreescribir que tiene dos parámetros context y snapshot. El segundo parámetro es el relevante. Es un representante de la clase AsyncSnapshot que contiene métodos de tipo bool hasData, hasError...útiles porque nos informan del estado de la operación asíncrona para que podamos reaccionar.

Lo vemos con un ejemplo. Simplemente es un Text que aparecerá en nuestra pantalla a los cinco segundos de iniciar la aplicación.

Cómo parámetro en future le suministramos un objeto Future (devuelto por el método getFutureData) que será el contenido del texto.

En el método asíncrono getFutureData deliberadamente introducimos un retardo de cinco segundos en la obtención del literal 'Hola!!'.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }

}

class MyAppState extends State<MyApp>{
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: getFutureData(),
      builder: ((context, snapshot){
        if(snapshot.hasData){
          return _buildTextWidget(snapshot.data);
        }else{
          return CircularProgressIndicator(strokeWidth: 10,);
        }
      })
    );
  }

  Future<String> getFutureData() async{
    return await Future.delayed(Duration(seconds: 5), () {
      return 'Hola!!!';
    });
  }

  Widget _buildTextWidget(String data){
    return Center(child: Directionality(textDirection: TextDirection.ltr,child:Text(data,textScaleFactor: 3)));
  }
}

Nuestro builder es llamado por el sistema con los distintos estados de la operación asíncrona.

Nosotros simplemente cuando no tenemos datos presentamos un indicador de progreso circular y cuando tenemos datos efectivamente presentamos el texto.

En un contexto de producción deberíamos tener en cuenta el estado de error en nuestro builder

...
...
    return FutureBuilder(
      future: getFutureData(),
      builder: ((context, snapshot){
        if(snapshot.hasData){
          //TODO Widget normal
        }if(snapshot.hasError){
          //TODO Widget de error
        }else{
          //TODO Widget de espera
        }
      })
    );
...
...

FutureBuilder con datos iniciales

El código mostrado es de lo más básico para una utilización correcta de FutureBuilder pero puede que querramos mostrar siempre el mismo Widget y no otro alternativo durante la demora como en el ejemplo.

En este caso podemos usar el parámetro initialData

Hemos cambiado el código anterior eliminando del builder la opción de mostrar el Widget de progreso y añadiendo el parámetro initialData con un literal que será mostrado cuando los datos aún no han llegado.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }

}

class MyAppState extends State<MyApp>{
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: getFutureData(),
      initialData: "Cargando...",
      builder: ((context, snapshot){
        if(snapshot.hasData){
          return _buildTextWidget(snapshot.data);
        }
      })
    );
  }

  Future<String> getFutureData() async{
    return await Future.delayed(Duration(seconds: 5), () {
      return 'Hola!!!';
    });
  }

  Widget _buildTextWidget(String data){
    return Center(child: Directionality(textDirection: TextDirection.ltr,child:Text(data,textScaleFactor: 3)));
  }
}

Animación en Flutter (1)

Pablo L — Mon, 21 Oct 2019 21:16:50 +0000

Introducción

Existen animaciones que vienen "de serie" en los Widgets suministrados por las APIs de Flutter pero es frecuente que necesitemos alguna animación específica por requerimientos, por usabilidad o por dar un poco de "brillo" a nuestra aplicación.

Este artículo pretende mostrarte el abc de la animación en Flutter junto con un ejemplo lo más simple y claro posible para que tengas una base desde donde encarar animaciones más complejas.

Arquitectura

En una animación Flutter necesitamos tres instancias de:

Clase abstracta Animation

En el objeto Animation, definimos los valores de inicio y de fin de la animación y contiene el valor actual durante el transcurso de la misma. El valor de la animación no tiene porque ser numérico como veremos en breve.
Contiene los importantes métodos addListener y addStatusListener para añadir listeners que informarán a la aplicación de los cambios en la animación.
La clase Animation es abstracta y por tanto no es obtenida directamente sino a través de las clases Tween, ColorTween, TextStyleTween, AlignmentTwen, etc...dependiendo de lo que queramos animar. En el ejemplo que suministro al final he elegido la clase Tween porque quiero que el valor sea un numérico, pero si hubiera querido animar por ejemplo un color podría haber elegido la clase ColorTween.

Clase AnimationController

La instancia de AnimationController es un parámetro para la construcción del objeto Animation pero realmente es AnimationController quien realiza el trabajo importante de la animación. En base a la duración de la misma, va interpolando los valores apropiados entre su inicio-fin y llama en el momento justo al listener de nuestra aplicación.
Contiene los métodos forward, repeat, reset, reverse, etc...para el manejo de nuestra animación.

Clase abstracta TickerProvider

1.- AnimationController en su requerido parametro contructor vsync usa un TicketProvider que se encarga de notificar cuando se requiere pintar un frame.
2.- No usaremos directamente la clase abstracta TicketProvider sino que generalmente utilizaremos un mixin derivado del tipo SingleTickerProviderStateMixin o un TicketProvider customizado para obtenerlo

Ejemplo

El siguiente ejemplo muestra en pantalla un texto con un valor numérico que va decreciendo a lo largo del tiempo.

Una animación puede ser más o menos complicada pero no se diferenciará en lo esencial de este ejemplo. Atención especial en como usar el primer listener en donde cambiamos el valor del texto y el segundo listener en donde detectamos cuando ha finalizafo la animación.

import 'package:flutter/material.dart';

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

class Counter extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CounterState();
  }
}

class CounterState extends State<Counter> with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;
  String textCounter = "5";

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            child: Directionality(
                textDirection: TextDirection.ltr, child: Text(textCounter,textScaleFactor: 3))));
  }

  @override
  @mustCallSuper
  void initState() {
    super.initState();

    //Creamos el controller para una animación con una duración de 5 segundos
    controller = AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this,
    );

    /*La clase Animation es abstracta. Sus instancias son obtenidas a través de
    la clase Tween, IntTween, AlignementTween, BorderTween...Tenemos una pléyade
    de clases disponibles dependiento de lo que queremos animar y por tanto de
    lo que querramos interpolar entre frame y frame*/

    animation = Tween<double>(begin: 0, end: 5).animate(controller);

    //Añadimos un listener en este caso para cambiar el texto a 'FINALIZADO!!'
    animation.addStatusListener((AnimationStatus status) {
      setState(() {
        if (status == AnimationStatus.completed) {
          textCounter = "FINALIZADO!!!";
        }
      });
    });

    //Añadimos un listener que es llamado cuando el valor entre el rango
    // begin-end ha cambiado y un frame está preparado para pintar. Es el
    //momento para cambiar el texto con el valor interpolado
    animation.addListener(() {
      setState(() {
        textCounter = this.animation.value.round().toString();
      });
    });

    //Iniciamos la animación
    controller.forward();
  }
}

Se pretende hacer un widget que anime un simple Texto para que cuente hasta
5 y cuando termine ponga el mensaje FINALIZADO!!!

Los comentarios en el código son muy descriptivos. Los hechos relevantes en el código son la obtención de una instancia Animation mediante el método animate de la clase Tween. Ya fijamos que los valores begin y end van a ser 0 y 5.

animation = Tween<double>(begin: 0, end: 5).animate(controller);

Observa como el parámetro vsync del controller es el propio objeto puesto que estamos usando el mixin en la propia clase CounterState.

Otro punto crucial del código es el añadir a la animación los callbacks, los listeners de nuestra aplicación. Uno recibirá el valor de la animación durante el tiempo de vida de esta y cambiara el texto. El segundo listener recibirá los diferentes estados por los que va pasando la animación. Cuando este finalizada mostraremos un texto acorde.

 animation.addStatusListener((AnimationStatus status) {
      setState(() {
        if (status == AnimationStatus.completed) {
          textCounter = "FINALIZADO!!!";
        }
      });
    });

 animation.addListener(() {
      setState(() {
        textCounter = this.animation.value.round().toString();
      });
    });