Rounded Container

The Rounded Container is a customizable container widget with rounded corners. It is designed to provide a visually appealing way to wrap content within a bordered and optionally shadowed box. This widget is highly versatile and can be used to create cards, buttons, or any other UI elements that require a rounded container.

---

Constructor

RoundedContainer({
  Key? key,
  Color? borderColor,
  Color? backgroundColor,
  double? height,
  double borderRadius = 10.0,
  EdgeInsetsGeometry padding = EdgeInsets.zero,
  required Widget child,
})

Properties

Property	Type	Description
borderColor	Color?	The color of the border around the container. Defaults to transparent if not provided.
backgroundColor	Color?	The background color of the container. Defaults to the theme's card color if not provided.
height	double?	The height of the container. If null, the height will be determined by the content.
borderRadius	double	The radius of the rounded corners of the container. Defaults to 10.0.
padding	EdgeInsetsGeometry	The padding inside the container. Defaults to EdgeInsets.zero if not provided.
child	Widget	The content to be displayed inside the container.

---

Usage Example

Here’s a basic example of how to use the Rounded Container in your Flutter app:

RoundedContainer(
  borderColor: Colors.blue,
  backgroundColor: Colors.white,
  borderRadius: 15.0,
  padding: EdgeInsets.all(16.0),
  child: Text('This is a rounded container'),
);

Example with Custom Height and Content

RoundedContainer(
  borderColor: Colors.green,
  backgroundColor: Colors.lightGreen[100],
  borderRadius: 20.0,
  height: 150.0,
  padding: EdgeInsets.all(20.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Icon(Icons.check_circle, color: Colors.green, size: 50.0),
      SizedBox(height: 10),
      Text('Success!', style: TextStyle(fontSize: 18.0)),
    ],
  ),
);

---

Customization Tips

• Border and Background Colors: Customize the borderColor and backgroundColor properties to match your app's theme or the specific design requirements of the container.
• Corner Radius: Adjust the borderRadius property to make the corners more or less rounded, depending on your design needs.
• Padding: Use the padding property to control the spacing between the container's content and its borders, ensuring the content is well-positioned.
• Height: If you need a fixed height for the container, specify the height property. Otherwise, the container will size itself based on the content.

---

Common Use Cases

• Card Widgets: Use the Rounded Container to create card-like UI elements with rounded corners and optional borders.
• Button Backgrounds: Wrap buttons or other interactive elements to give them a rounded, bordered background.
• Content Wrappers: Use the container to wrap any content that needs to be visually separated from the rest of the UI, such as in a list or a form.