Flutter: creación de un selector de tiempo con el diseño de materiales

Time Picker es un componente de la interfaz de usuario que controla o permite la selección de la hora en formato de 24 horas o en formato AM/PM. Principalmente, su trabajo es facilitar el proceso de selección de tiempo y garantizar que el usuario elija o seleccione un tiempo válido en la aplicación. Esto se puede utilizar en aplicaciones como alarma, cronómetro o en cualquier otro escenario donde se requiera selección de tiempo. En el selector de hora nativo de Android está disponible en dos modos, el primero es el reloj, donde el usuario puede seleccionar la hora desde el propio reloj seleccionando primero la casa y luego los minutos. Y otro modo es el modo giratorio en el que el usuario puede escribir manualmente la hora o desplazarse por la rueda giratoria. Flutter hace que sea muy fácil implementar ambos, ya que desde el primer momento nos brinda ambos modos sin ningún esfuerzo adicional. Así que en este artículo,

Usaremos VS Code IDE para este proyecto, también puede usar Android Studio o cualquier otro IDE. El único paquete que se utilizará en esta aplicación es material.dart.  A continuación se enumeran algunos de los conceptos que se utilizarán durante el desarrollo de esta aplicación:

• Uso del diseño de materiales para crear una interfaz de usuario en la pantalla.
• Usando el widget con estado.
• Construcción de lógica a través de la función de dardo.

Paso 1: El primer paso va a ser simple.

• Aquí primero hemos importado el paquete material.dart a través del cual se construirá la interfaz de usuario en los siguientes pasos. Flutter por defecto toma el diseño de materiales en uso. El sistema de diseño de materiales es creado por Google. Aunque flutter nos brinda total flexibilidad para personalizar el diseño, ya sea a nuestra voluntad o mediante el uso de widgets de Cupertino, que son una alternativa al diseño de materiales.
• Luego, hemos inicializado la función principal , que es el punto de partida de esta aplicación flutter. Dentro de la función principal , tenemos el método runApp . El trabajo principal de este método es inflar el widget dado y adjuntarlo a la pantalla. Los widgets que se inflarán se describirán en la clase MyApp en los siguientes pasos.

import 'package:flutter/material.dart';
  
// Main function which starts the app
void main() {
  runApp(MyApp());
}

Paso 2:  En este paso, hemos realizado tres cosas principales.

• Aquí , la clase MyApp , que va a contener todos los widgets de esta aplicación, se extiende como el widget sin estado que no requiere un estado mutable .
• Luego, reemplazando la información ya presente de los widgets sin estado, hemos proporcionado nuestra propia descripción de los mismos.
• A continuación, hemos utilizado el método de compilación. Esto describe la parte de la interfaz de usuario representada por este widget. Y también controla la ubicación de los widgets que se pintarán en la pantalla. Dentro de esto, hemos descrito el título, el tema y la clase de extensión de nuestro MaterialApp .

class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          
        // This is the theme of your application.
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'GeeksForGeeks'),
    );
  }
}

Paso 3: En el paso tres tenemos lo siguiente:

• Este widget es la página de inicio de su aplicación. Tiene estado, lo que significa que tiene un objeto State (definido a continuación) que contiene campos que afectan su apariencia.
• Esta clase es la configuración para el estado. Contiene los valores (en este caso, el título) proporcionados por el padre (en este caso, el widget de la aplicación) y utilizados por el método de compilación del Estado. Los campos en una subclase de Widget siempre se marcan como «finales».

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  
  // This widget is the home of this app which is Stateful
  final String title;
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Paso 4: En este paso, construimos la lógica para la selección de tiempo.

• Tenemos la clase TimeofDay class que representa una hora durante el día, independientemente de la fecha en la que pueda caer ese día o la zona horaria. El tiempo está representado por el par [hora] y [minuto]. Una vez creados, ambos valores no se pueden cambiar. Al usar esta clase, crearemos la hora del día que será seleccionada por el selector de interfaz de usuario . TimeOfDay.now() crea una base de tiempo en la hora actual. Esto establece que la hora y el minuto sean la hora actual.
• Luego, en el futuro , hemos utilizado la función showTimePicker que mostrará un selector de tiempo diseñado por material en la pantalla para que el usuario seleccione el tiempo. La función setState le dice al sistema que algo en el estado del objeto cambió. El tiempo que se selecciona se establece igual al tiempo seleccionado que luego se imprime en la consola.

class _MyHomePageState extends State<MyHomePage> {
  TimeOfDay _time = TimeOfDay.now();
  TimeOfDay picked;
  
  Future<Null> selectTime(BuildContext context) async {
    picked = await showTimePicker(
      context: context,
      initialTime: _time,
    );
    setState(() {
      _time = picked;
  
      print(picked);
    });
  }
    
  ....

Paso 5: en este paso, finalizamos la aplicación mediante la creación de la interfaz de usuario para la lógica, que se seleccionó en el paso anterior.

• En la clase MyHomePage , tenemos el método de construcción que se devuelve cada vez que el usuario selecciona la hora porque llamará a la función setState .
• El siguiente es el widget Scaffold que contiene todos los widgets que se muestran en la pantalla, como la AppBar que se encuentra en la parte superior de la pantalla y el widget Center que contiene el cuerpo de la aplicación. En el widget del Centro , tenemos el IconButton y el Texto separados por el SizedBox. 
• Cada vez que se presiona el icono de alarma , se activa la función de selección de hora, que muestra un selector de hora.

....
    
  @override
  Widget build(BuildContext context) {
    
    // This method is rerun every time setState is called.    
    return Scaffold(
      appBar: AppBar(
          
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
          
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              iconSize: 80,
              icon: Icon(
                Icons.alarm,
                size: 80,
              ),
              onPressed: () {
                selectTime(context);
              },
            ),
            SizedBox(
              height: 60,
            ),
            Text('$_time', style: TextStyle(fontSize: 40)),
          ],
        ),
      ), 
    );
  }
}

Código completo:

import 'package:flutter/material.dart';
  
// Main function which starts the app
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          
        // This is the theme of your application
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'GeeksForGeeks'),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  
  // This widget is the home page of your application.
  final String title;
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  TimeOfDay _time = TimeOfDay.now();
  TimeOfDay picked;
  
  Future<Null> selectTime(BuildContext context) async {
    picked = await showTimePicker(
      context: context,
      initialTime: _time,
    );
    setState(() {
      _time = picked;
  
      print(picked);
    });
  }
  
  @override
  Widget build(BuildContext context) {
      
    // This method is rerun every time setState is called.
    return Scaffold(
      appBar: AppBar(
          
        // Here we take the value from the 
        // MyHomePage object that was created by
        // the App.build method, and use it
        // to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
          
        // Center is a layout widget. It takes
        // a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              iconSize: 80,
              icon: Icon(
                Icons.alarm,
                size: 80,
              ),
              onPressed: () {
                selectTime(context);
              },
            ),
            SizedBox(
              height: 60,
            ),
            Text('$_time', style: TextStyle(fontSize: 40)),
          ],
        ), // Column
      ), // Center
    ); // Scaffold
  }
}

Producción: