Exploring Container Widget in Flutter

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!

Related Posts

Navigator
Unlocking Potential: Creating Any App with Flutter - How and Why?
Decoding Flutter: Is Coding Essential for App Success?
Unlocking Potential: Creating Any App with Flutter - How and Why?
Flutter Essentials: A Beginner’s Guide – Why Should You Start Here?
Inside Google's Plan: The Journey Behind Flutter's Rise - What You Should Know
Discovering Flutter: Who Can Benefit and How in the Digital World?
Flutter: Opening Doors to Exciting Careers - How Does it Work?
Exploring Flutter: From Crafting Apps to Transforming Web Development
Flutter Architecture
Scroll to Top