Flutter Container Widgets and Layout Components

Flutter distinguishes between layout widgets that arrange multiple children and container widgets that wrap a single child, adding padding, decoration, transformation, or size constraints. While the official Flutter documentation does not define this split, the classification helps developers understand widget responsibilities.

1. Padding

The Padding widget adds internal space around its child, similar to CSS padding, and replaces the missing Margin widget in Flutter. It requires an EdgeInsetsGeometry argument, typically created via the EdgeInsets class.

const Padding({Key? key, @required this.padding, Widget? child})

Common constructors of EdgeInsets include:

EdgeInsets.fromLTRB(double left, double top, double right, double bottom)

EdgeInsets.all(double value)

EdgeInsets.only({left, top, right, bottom})

EdgeInsets.symmetric({vertical, horizontal})

Example:

class PaddingDemo extends StatelessWidget {
  const PaddingDemo({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.all(8),
          child: Text("莫听穿林打叶声，何妨吟啸且徐行，竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生！"),
        ),
        Text("普通文本"),
      ],
    );
  }
}

2. DecoratedBox

DecoratedBox paints a Decoration (usually a BoxDecoration ) either behind or in front of its child, allowing background colors, borders, gradients, and shadows.

const DecoratedBox({Key? key, required this.decoration, this.position = DecorationPosition.background, Widget? child})

Key fields of BoxDecoration :

color, image, border, borderRadius, boxShadow, gradient, backgroundBlendMode, shape

Example:

class DecoratedBoxDemo extends StatelessWidget {
  const DecoratedBoxDemo({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8),
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [Colors.blue, Colors.lightBlueAccent]),
          borderRadius: BorderRadius.circular(3),
          boxShadow: [BoxShadow(color: Colors.black54, offset: Offset(2, 2), blurRadius: 4)],
        ),
        child: Text("装饰测试", style: TextStyle(color: Colors.white)),
      ),
    );
  }
}

3. Transform

The Transform widget applies a matrix transformation during the paint phase, enabling skew, translate, rotate, and scale effects without affecting layout size.

Skew example:

class HomeBody extends StatelessWidget {
  const HomeBody({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: DecoratedBox(
        decoration: BoxDecoration(color: Colors.red),
        child: Transform(
          alignment: Alignment.topRight,
          transform: Matrix4.skewY(0.3),
          child: Text("Transform倾斜示例"),
        ),
      ),
    );
  }
}

Translate, rotate, and scale examples follow the same pattern, using Matrix4.translationValues , Matrix4.rotationZ , and Transform.scale respectively.

Note: Transform operates only during painting, so the transformed widget still occupies its original layout space.

4. Container

Container is a composite widget that combines DecoratedBox , ConstrainedBox , Transform , Padding , and Align . It can set size, margin, padding, decoration, and transformation in a single widget.

Container({Key? key, Alignment? alignment, EdgeInsetsGeometry? padding, Color? color, Decoration? decoration, Decoration? foregroundDecoration, double? width, double? height, BoxConstraints? constraints, EdgeInsetsGeometry? margin, Matrix4? transform, Widget? child, ...})

Important notes:

Width/height take precedence over constraints .

Providing color automatically creates a BoxDecoration .

Example:

class HomeBody extends StatelessWidget {
  const HomeBody({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [Colors.blueAccent, Colors.lightBlueAccent]),
          boxShadow: [BoxShadow(color: Colors.black54, offset: Offset(2, 2), blurRadius: 4)],
        ),
        transform: Matrix4.rotationZ(0.4),
        width: 100,
        height: 100,
        child: Icon(Icons.pets, size: 32, color: Colors.white),
      ),
    );
  }
}

Padding vs. Margin demonstration shows that margin adds space outside the container, while padding adds space inside.

5. Scaffold (Page Skeleton)

Scaffold provides the basic visual layout structure for a Material page, including appBar , drawer , bottomNavigationBar , floatingActionButton , and body .

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State
{
  int _selectedIndex = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scaffold示例'),
        actions: [IconButton(onPressed: () => print('分享按钮被点击'), icon: Icon(Icons.share))],
      ),
      drawer: null,
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        unselectedItemColor: Colors.grey,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: '购物车'),
          BottomNavigationBarItem(icon: Icon(Icons.perm_identity), label: '我'),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) => setState(() => _selectedIndex = index),
      ),
      body: Text('Scaffold示例'),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => print('浮窗按钮被点击'),
      ),
    );
  }
}

The AppBar can be customized with a leading widget, title, actions, and bottom tabs. The Drawer is a side panel that can be opened via a swipe or programmatically with Scaffold.of(context).openDrawer() . The FloatingActionButton offers a prominent action, and BottomNavigationBar provides tab navigation.

Overall, the article demonstrates how to combine these widgets to build rich, responsive Flutter UIs.