Flutter's Reusable Custom Containers for Big Projects

In this blog post, we dive into advanced Flutter development by creating highly reusable and clean Custom Container widgets, perfect for large-scale projects. Discover how to streamline your UI design process with a versatile widget that supports customizable properties like borders, shapes, margins, padding, and more. This guide is designed for both beginner and experienced Flutter developers who aim to maintain clean and manageable code in complex applications. Follow along to enhance your Flutter projects with efficient and elegant UI components that are easy to use and integrate.

import 'package:flutter/material.dart';

class CommonWidget {
  static Widget container({
    double? width,
    double? height,
    bool isBorder = false,
    Color borderColor = Colors.black,
    double borderWidth = 1.0,
    double borderRadius = 0.0,
    Color color = Colors.white,
    AlignmentGeometry? alignment,
    double marginAllSide = 0.0,
    double topLeft = 0.0,
    double topRight = 0.0,
    double bottomLeft = 0.0,
    double bottomRight = 0.0,
    bool isBorderOnlySide = false,
    EdgeInsetsGeometry? margin,
    double paddingAllSide = 0.0,
    bool isPaddingAllSide = false,
    EdgeInsetsGeometry? padding,
    Widget? child,
    BoxConstraints? constraints,
    BoxShape shape = BoxShape.rectangle,
  }) {
    return Container(
      width: width,
      height: height,
      margin: margin ?? EdgeInsets.all(marginAllSide),
      padding: padding ?? (isPaddingAllSide ? EdgeInsets.all(paddingAllSide) : null),
      alignment: alignment,
      constraints: constraints,
      decoration: BoxDecoration(
        shape: shape,  // Set the shape of the container
        border: isBorder ? Border.all(color: borderColor, width: borderWidth) : null,
        borderRadius: shape == BoxShape.rectangle
            ? (isBorderOnlySide
                ? BorderRadius.only(
                    bottomLeft: Radius.circular(bottomLeft),
                    bottomRight: Radius.circular(bottomRight),
                    topLeft: Radius.circular(topLeft),
                    topRight: Radius.circular(topRight),
                  )
                : BorderRadius.circular(borderRadius))
            : null,
        color: color,
      ),
      child: child,
    );
  }
}