Selector de día y noche en Flutter

day_night_time_picker es un selector de día y noche para aleteo, hermosas animaciones diurnas y nocturnas con los activos del sol y la luna. no necesitamos agregar activos explícitos. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Propiedades

Algunas propiedades de day_night_time_picker se dan a continuación. 

Proyecto de ejemplo

Agregar complemento a la dependencia pubspec.yaml

dependencies:
  day_night_time_picker:

Uso 

Para usar el complemento, solo importa el paquete

import 'package:day_night_time_picker/day_night_time_picker.dart';

Código

Creación de variables de tiempo:

TimeofDay _time  = TimeofDay.now();

Actualizar la variable de tiempo en el cambio:

void onTimeChanged(TimeOfDay time) {
   setState(() {
     _timeOfDay = time;
   });
 }

Navegue hasta Mostrar selector:

Navigator.of(context).push(
                     showPicker(
                       context: context,
                       value: _timeOfDay,
                       onChange: onTimeChanged,
                       minuteInterval: MinuteInterval.FIVE,
                       is24HrFormat: false,
                     ),
                   );

El código final será:

import 'package:day_night_time_picker/lib/constants.dart';
import 'package:day_night_time_picker/lib/daynight_timepicker.dart';
import 'package:flutter/material.dart';
  
void main() {
  runApp(const DayNight());
}
  
class DayNight extends StatefulWidget {
  const DayNight({Key? key}) : super(key: key);
  
  @override
  State<DayNight> createState() => _DayNightState();
}
  
class _DayNightState extends State<DayNight> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "DayNight",
      theme: ThemeData(primaryColor: Color.fromARGB(255, 25, 71, 133)),
      debugShowCheckedModeBanner: false,
      home: const Home(),
    );
  }
}
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);
  
  @override
  State<Home> createState() => _HomeState();
}
  
class _HomeState extends State<Home> {
  TimeOfDay _timeOfDay = TimeOfDay.now();
  void onTimeChanged(TimeOfDay time) {
    setState(() {
      _timeOfDay = time;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Day Night Picker"),
      ),
      body: SafeArea(
          child: Center(
        child: SingleChildScrollView(
          // controller: controller,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                _timeOfDay.format(
                  context,
                ),
                style: Theme.of(context).textTheme.headlineLarge,
              ),
              const SizedBox(
                height: 10,
              ),
              TextButton(
                  onPressed: () {
                    Navigator.of(context).push(
                      showPicker(
                        context: context,
                        value: _timeOfDay,
                        onChange: onTimeChanged,
                        minuteInterval: MinuteInterval.FIVE,
                        is24HrFormat: false,
                      ),
                    );
                  },
                  child: const Text("Pick Time "))
            ],
          ),
        ),
      )),
    );
  }
}

Código Explicación 

• main es un método principal que se llama una vez que se carga el programa.
• Una vez que se carga el programa, la aplicación de ejecución se ejecutará y llamará a nuestro widget con estado DayNight.
• Como Flutter se basa en un widget, se crea un widget.
• Creación de MaterailApp que nos permite configurar el título de la aplicación tomando Scaffold como hogar.
• Creando Variable _time de tipo TimeDay inicializado a la hora actual.
• Scaffold nos permite configurar AppBar y el cuerpo de la página.
• Como AppBar es un título simple.
• Como Cuerpo, lleva una columna central.
• Los primeros niños toman un texto que tiene el valor de tiempo actual almacenado en la variable _time.
• En segundo lugar, tome una caja de tamaño con altura.
• Tercero Tome un botón, presionándolo para mostrar el cuadro de diálogo del selector diurno.
• Método de creación onTimeChanged que toma el tiempo modificado en un tiempo variable y lo almacena en nuestra variable _time para que pueda verse en la pantalla del usuario.

Producción