Página de fotogramas de ejemplo terminada

lib/paginas/pagina_fotograma.dart

+import 'dart:async';
+
 import 'package:flutter/material.dart';
 
 class PaginaFotograma extends StatefulWidget {
@@ -8,8 +10,114 @@ class PaginaFotograma extends StatefulWidget {
 }
 
 class _PaginaFotogramaState extends State<PaginaFotograma> {
+  int _fotogramaSeleccionado = 0;
+  int _ultimoFotograma = 1200;
+  final _buttons = _IconButtons.values;
+  Timer? timer;
+
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          SizedBox(
+            height: (MediaQuery.of(context).size.width - 16.0*2)*9.0/16.0,
+            child: Placeholder(),
+          ),
+          const SizedBox(height: 48.0),
+          Slider(
+              min: 0.0,
+              max: _ultimoFotograma.toDouble(),
+              divisions: _ultimoFotograma,
+              value: _fotogramaSeleccionado.toDouble(),
+              label: _fotogramaSeleccionado.toString(),
+              onChanged: (value) {
+                setState(() { _fotogramaSeleccionado = value.toInt(); });
+              }
+          ),
+          RichText(
+            text: TextSpan(
+                children: [
+                  TextSpan(
+                    text: 'Fotograma seleccionado: ',
+                    style: Theme.of(context).textTheme.titleLarge,
+                  ),
+                  TextSpan(
+                    text: _fotogramaSeleccionado.toString(),
+                    style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                        fontWeight: FontWeight.bold
+                    ),
+                  )
+                ]
+            ),
+          ),
+          const SizedBox(height: 24.0),
+          _construirBotonesFotograma(context)
+        ],
+      ),
+    );
+  }
+
+  Widget _construirBotonesFotograma(BuildContext context) {
+    final buttons = <Widget>[];
+    for(var button in _buttons){
+      buttons.add(GestureDetector(
+        onLongPressStart: (detail) {
+          setState(() {
+            timer = Timer.periodic(const Duration(milliseconds: 100), (t) {
+              setState(() {
+                _fotogramaSeleccionado += button.variation;
+                if(_fotogramaSeleccionado < 0) _fotogramaSeleccionado = 0;
+                if(_fotogramaSeleccionado > _ultimoFotograma) _fotogramaSeleccionado = _ultimoFotograma;
+              });
+            });
+          });
+        },
+        onLongPressEnd: (detail) {
+          if (timer != null) {
+            timer!.cancel();
+          }
+        },
+        child: Ink(
+          decoration: ShapeDecoration(
+            color: Theme.of(context).colorScheme.surfaceTint,
+            shape: CircleBorder()
+        ),
+        child: IconButton(
+                icon: button.icon,
+                color: Colors.white,
+                onPressed: () {
+                  setState(() {
+                    _fotogramaSeleccionado += button.variation;
+                    if(_fotogramaSeleccionado < 0) _fotogramaSeleccionado = 0;
+                    if(_fotogramaSeleccionado > _ultimoFotograma) _fotogramaSeleccionado = _ultimoFotograma;
+                  });
+                },
+            ),
+        ),
+      ),
+      );
+    }
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      spacing: 15.0,
+      children: buttons,
+    );
   }
 }
+
+enum _IconButtons{
+  DOBLE_ATRAS(Icon(Icons.keyboard_double_arrow_left), -60),
+  ATRAS(Icon(Icons.chevron_left), -1),
+  ADELANTE(Icon(Icons.chevron_right), 1),
+  DOBLE_ADELANTE(Icon(Icons.keyboard_double_arrow_right), 60);
+
+  final Icon icon;
+  final int variation;
+
+  const _IconButtons(this.icon, this.variation);
+}

lib/paginas/pagina_metadatos.dart

@@ -131,21 +131,17 @@ class _PaginaMetadatosState extends State<PaginaMetadatos> {
   }
 
   Widget _buildTextField(int index){
-    return InputDecorator(
-      decoration: const InputDecoration(
-        border: OutlineInputBorder(),
-      ),
-      child: TextField(
-        controller: _controladores[index],
-        decoration: InputDecoration(
-            hintText: '${_metadatos[index].nombreMostrado}...'
-        ),
-        keyboardType:
-        (_metadatos[index].numerico)? const TextInputType.numberWithOptions(
-            signed: true,
-            decimal: false
-        ): null,
+    return TextField(
+      controller: _controladores[index],
+      decoration: InputDecoration(
+          hintText: '${_metadatos[index].nombreMostrado}...',
+          border: OutlineInputBorder(),
       ),
+      keyboardType:
+      (_metadatos[index].numerico)? const TextInputType.numberWithOptions(
+          signed: true,
+          decimal: false
+      ): null,
     );
   }
 }