En este artículo, veremos el widget más básico y simple en Flutter Container. Veremos cómo podemos diseñar nuestro contenedor de diferentes maneras según nuestra necesidad, para que podamos usar este widget de manera efectiva en nuestra aplicación.
En primer lugar, tenemos que escribir un código de inicio para nuestro proyecto. Nuestro código para la estructura de nuestra aplicación será como: –
Dart
import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Container(), ); } }
Habíamos creado un widget sin estado llamado HomePage en nuestra propiedad principal de Material App. Entonces, cuando ejecutamos nuestra aplicación, no vemos nada creado en nuestra pantalla.
Esto se debe a que un contenedor en sí mismo es un cuerpo vacío hasta que se proporcionan algunas restricciones. Por restricciones aquí queremos decir que se le debe dar algo de alto o ancho a nuestro contenedor. Asígnale también algún color para que se refleje en nuestra app.
Dart
class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( height: 200.0, width: 200.0, color: Colors.blueAccent ) ) ); } }
NOTA: – Tenemos que asignar la propiedad de color dentro del constructor BoxDecoration , de lo contrario, se creará un error.
Usando la propiedad de decoración de Container:
La propiedad Decoration toma un argumento de tipo Box Decoration . Ahora podemos ver que se pueden aplicar múltiples propiedades a nuestro contenedor.
1. Borde: – Asignaremos un borde a nuestro contenedor usando el constructor Border.all . También proporcione algunas propiedades de ancho, color y estilo.
Dart
border: Border.all( color: Colors.black, width: 2.0, ),
2. Radio del borde: se utiliza cuando tenemos que estructurar nuestro contenedor de forma distinta a la rectangular predeterminada. Podemos proporcionar un radio a nuestro contenedor para que pueda tener un borde redondeado. Esta propiedad se usa muchas veces para proporcionar algo de singularidad a nuestra interfaz de usuario.
Dart
borderRadius: BorderRadius.circular(10.0)
3. Imagen: – Como sugiere el nombre, si queremos agregar alguna imagen a nuestro contenedor, podemos usarla con el constructor de imágenes decorativas . La imagen se puede agregar de 2 maneras. Uno añadiéndolo a nuestros activos y otro extrayéndolo de Internet.
4. Box Shadow: se puede usar para proporcionar algo de sombra a nuestro contenedor. En realidad acepta una lista de objetos de tipo Box Shadow. Podemos proporcionarle algo de color y radio de desenfoque.
Dart
boxShadow: [ BoxShadow( color: Colors.grey , blurRadius: 2.0, offset: Offset(2.0,2.0) ) ]
5. Forma: – Si por alguna razón no queremos codificar el valor del radio dentro de la propiedad Radio del borde, podemos usar esta propiedad asignándole un valor de círculo. ( Nota: – Ambos no se pueden usar simultáneamente).
Dart
shape: BoxShape.circle
6. Degradado: – Si deseamos proporcionar varios colores o una combinación de colores a nuestro contenedor, podemos usar esta propiedad. Se le asigna un degradado de tipo Linear Gradient y los colores se proporcionan en forma de lista.
Dart
gradient: LinearGradient( colors: [ Colors.indigo, Colors.blueAccent ] ),
Código completo para nuestra aplicación:
Dart
import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( height: 200.0, width: 200.0, decoration: BoxDecoration( color: Colors.blueAccent, border: Border.all( color: Colors.black, width: 2.0, ), borderRadius: BorderRadius.circular(10.0), gradient: LinearGradient( colors: [ Colors.indigo, Colors.blueAccent ] ), boxShadow: [ BoxShadow( color: Colors.grey , blurRadius: 2.0, offset: Offset(2.0,2.0) ) ] ), ), ), ); } }
Producción:
Entonces, en este artículo vimos cómo podemos diseñar nuestro contenedor de diferentes y mejores maneras para crear mejores interfaces de usuario.