GridView de formatos implementada

lib/modelo/formato.dart

@@ -9,7 +9,8 @@ class Formato{
 }
 
 enum ClaseFormato{
-  PNG(".png", "Portable Network Graphics", "Calidad", "Nombre, Autor...", "Formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de contraste y otros datos importantes.");
+  PNG(".png", "Portable Network Graphics", "Calidad", "Nombre, Autor...", "Formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de contraste y otros datos importantes."),
+  JPG(".jpg", "Joint Photographic Experts Group", "Ligero", "Nombre, Autor...", "A pesar de ser un método de compresión, es a menudo considerado como un formato de archivo. Es el formato de imagen más común, utilizado por las cámaras fotográficas digitales y otros dispositivos de captura de imagen");
 
   final String _extension;
   final String _nombre;

lib/paginas/pagina_configuracion.dart

@@ -18,6 +18,8 @@ class PaginaConfiguracion extends StatefulWidget {
 }
 
 class _PaginaConfiguracionState extends State<PaginaConfiguracion> {
+  int _categoriaActiva = 0;
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -43,6 +45,7 @@ class _PaginaConfiguracionState extends State<PaginaConfiguracion> {
         ],
       ),
       body: _construirCuerpo(),
+      bottomNavigationBar: _construirBarraNavegacion()
     );
   }
 
@@ -68,7 +71,41 @@ class _PaginaConfiguracionState extends State<PaginaConfiguracion> {
   }
 
   Widget _construirCuerpo() {
-    return PaginaConversion(formatoOriginal: (widget._elementoAsociado as ArchivoIndividual).formatoActual);
+    if(widget._elementoAsociado is ArchivoIndividual){
+      if(_categoriaActiva == 0){
+        return PaginaConversion(formatoOriginal: (widget._elementoAsociado as ArchivoIndividual).formatoActual);
+      }
+      else{
+        // Página de metadatos
+        return Placeholder();
+      }
+    }
+    // Páginas de carpetas y formato de archivo para carpeta
+    return Placeholder();
+  }
+
+  BottomNavigationBar? _construirBarraNavegacion(){
+    if(widget._elementoAsociado is ArchivoIndividual){
+      return BottomNavigationBar(
+          currentIndex: _categoriaActiva,
+          onTap: (int indice) {
+            setState(() {
+              _categoriaActiva = indice;
+            });
+          },
+          items: <BottomNavigationBarItem>[
+            BottomNavigationBarItem(
+                icon: Icon(Icons.sync),
+                label: 'Formato de conversión'
+            ),
+            BottomNavigationBarItem(
+                icon: Icon(Icons.format_list_bulleted),
+                label: 'Metadatos'
+            )
+          ]
+      );
+    }
+    return null;
   }
 }
 

lib/paginas/pagina_conversion.dart

@@ -16,26 +16,46 @@ class PaginaConversion extends StatefulWidget {
 }
 
 class _PaginaConversionState extends State<PaginaConversion> {
-  Formato? _formatoConvertido;
+  Formato? _formatoConvertido = Formato(extension: ClaseFormato.JPG);
+  int _calidad = 0;
 
   @override
   Widget build(BuildContext context) {
     return Column(
-      mainAxisAlignment: MainAxisAlignment.start,
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
         Padding(
           padding: const EdgeInsets.all(15.0),
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.center,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
             children: [
-              _createOriginalFormatBox(),
-              const SizedBox(width: 10.0),
-              Icon(Icons.chevron_right),
-              const SizedBox(width: 10.0),
-              _createConversionFormatBox()
+              SizedBox(height: 8.0),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  _createOriginalFormatBox(),
+                  const SizedBox(width: 10.0),
+                  Icon(Icons.chevron_right),
+                  const SizedBox(width: 10.0),
+                  _createConversionFormatBox()
+                ],
+              ),
+              SizedBox(height: 8.0),
+              // Calidad...
+              /*Slider(
+                  value: _calidad.toDouble(),
+                  min: 0,
+                  max: 3,
+                  onChanged: (valor) {
+                    setState(() {
+                      _calidad = valor.toInt();
+                    });
+                  }
+              )*/
             ],
           ),
-        )
+        ),
+        _createConversionSelectionPanel()
       ],
     );
   }
@@ -49,7 +69,7 @@ class _PaginaConversionState extends State<PaginaConversion> {
               color: Colors.black,
             ),
             borderRadius: BorderRadius.circular(15),
-            color: Colors.black12
+            color: Colors.black26
         ),
         child: Padding(
           padding: const EdgeInsets.all(13.0),
@@ -90,4 +110,68 @@ class _PaginaConversionState extends State<PaginaConversion> {
         )
     );
   }
+
+  Widget _createConversionSelectionPanel() {
+    return Material(
+      clipBehavior: Clip.antiAlias,
+      shape: BeveledRectangleBorder(
+        side: BorderSide(
+          color: Colors.black,
+          width: 1
+        ),
+        borderRadius: BorderRadius.only(
+          topLeft: Radius.circular(20.0),
+          topRight: Radius.circular(20.0)
+        )
+      ),
+      child: Container(
+        height: MediaQuery.of(context).size.height - 400,
+        width: MediaQuery.of(context).size.width,
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
+        child: Padding(
+          padding: const EdgeInsets.all(20.0),
+          child: GridView.count(
+            crossAxisCount: 3,
+            crossAxisSpacing: 12,
+            mainAxisSpacing: 12,
+            children: List.generate(16, (index) {
+              return Material(
+                shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(20.0),
+                ),
+                color: Theme.of(context).cardColor,
+                child: InkWell(
+                  onTap: () {},
+                  child: Container(
+                      decoration: BoxDecoration(
+                        border: Border.all(
+                          color: Colors.black
+                        ),
+                        borderRadius: BorderRadius.circular(20.0)
+                      ),
+                      child: Center(
+                          child: Column(
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            children: [
+                              Text(
+                                'PNG',
+                                style: Theme.of(context).textTheme.titleLarge,
+                                textScaler: TextScaler.linear(1.5),
+                              ),
+                              Container(
+                                height: 15.0,
+                                child: Icon(Icons.airplanemode_active),
+                              )
+                            ],
+                          )
+                      )
+                  ),
+                ),
+              );
+            }),
+          ),
+        ),
+      ),
+    );
+  }
 }