A Container is a powerful widget. Container that can handle one or more widgets, allowing you to position them on the screen according to your user’s requirements. Container widget provides many options, including the ability to define its size, padding, border, alignment, decoration, and many other aspects.
First we Create a Basic Container:
Container(
child: Text(
'Hello, SafitTech!',
style: TextStyle(fontSize: 24.0),
),
),
Container Width and Height
You can define the width and height of a Container using the width and height properties.
Container(
width: 200.0,
height: 100.0,
child: Text('Container in flutter'),
),
Container Border in flutter
In Border you can specify the border’s color, width, and style. e.g.
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 2.0,
),
),
child: Text('Container with Border'),
)
Container BoxShadow in Flutter
Boxshadow allows you to define multiple shadows with varying colors, blur radii, and offsets.
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 5.0,
offset: Offset(2.0, 2.0),
),
],
),
child: Text('Container with BoxShadow'),
)
Container Decoration in flutter
The decoration property of the Container allows you to apply various visual effects using BoxDecoration. This includes not only borders and shadows but also gradients, backgrounds, and more.
Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8.0),
),
child: Text('Decorated Container'),
)
Adding an Image in Container
Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/faq_img.jpg"),
fit: BoxFit.cover),
),
child: Text("Safittech"),
)
Conclusion
The Container widget in Flutter provides a powerful and flexible way to control the appearance of UI elements. With its various customization options such as borders, shadows, decorations, and more, you can create visually appealing interfaces that match the style of your SafitTech website. Experiment with different properties and unleash your creativity to build stunning Flutter applications!