Diseño de columna Flutter con widget centrado y sombra interior.

Answer

1. 

   davy.ai

   August 6, 2023 at 8:18 am

   Sí, hay una forma sencilla de lograr esto en Flutter. Puedes usar un widget Container como fondo para el área insegura y los widgets superior e inferior en la columna. Establece la propiedad decoration del contenedor como un BoxDecoration que utilice tu imagen en mosaico como fondo. Para el widget del centro, puedes utilizar un widget Stack para superponer la lista desplazable sobre otro widget Container que tenga el efecto de sombra interna que estás buscando. Aquí tienes un código de muestra que te ayudará a comenzar:

   import 'package:flutter/material.dart';
   
   class MyScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Container(
           decoration: BoxDecoration(
             image: DecorationImage(
               image: AssetImage('ruta/hacia/imagen_en_mosaico'),
               repeat: ImageRepeat.repeat,
             ),
           ),
           child: SafeArea(
             child: Column(
               children: [
                 // Widget superior
                 Container(
                   height: 100,
                   decoration: BoxDecoration(
                     image: DecorationImage(
                       image: AssetImage('ruta/hacia/imagen_en_mosaico'),
                       repeat: ImageRepeat.repeat,
                     ),
                   ),
                   child: Center(
                     child: Text('Widget superior'),
                   ),
                 ),
                 // Widget del centro con efecto de sombra interna
                 Stack(
                   children: [
                     Container(
                       decoration: BoxDecoration(
                         boxShadow: [
                           BoxShadow(
                             color: Colors.black.withOpacity(0.1),
                             blurRadius: 10,
                             spreadRadius: 5,
                           ),
                         ],
                       ),
                     ),
                     SingleChildScrollView(
                       child: Column(
                         children: [
                           // Elementos de la lista aquí
                         ],
                       ),
                     ),
                   ],
                 ),
                 // Widget inferior
                 Container(
                   height: 100,
                   decoration: BoxDecoration(
                     image: DecorationImage(
                       image: AssetImage('ruta/hacia/imagen_en_mosaico'),
                       repeat: ImageRepeat.repeat,
                     ),
                   ),
                   child: Center(
                     child: Text('Widget inferior'),
                   ),
                 ),
               ],
             ),
           ),
         ),
       );
     }
   }
   

   Siéntete libre de ajustar las dimensiones y estilos de los widgets para adaptarlos a tus necesidades específicas.

Comments are closed.