Flutter Center, Padding and SizedBox

Center, Padding, and SizedBox are important Flutter layout widgets used to control the position, spacing, and size of UI elements. They are commonly used together with widgets such as Row, Column, Container, Expanded, and Scaffold.

These widgets help developers create clean, readable, and well-spaced Flutter interfaces.

1. Center Widget

The Center widget positions its child in the center of the available space. It is useful when you want to horizontally and vertically center a widget inside its parent.

Basic Syntax

Center(
  child: Text('Hello Flutter'),
)

Simple Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Center Example'),
        ),
        body: const Center(
          child: Text(
            'Hello Flutter',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

In this example, the Text widget is placed at the center of the available body area.

2. Why Use Center?

• To center text on a screen.
• To center buttons.
• To center loading indicators.
• To center images or icons.
• To create empty-state screens.
• To position a single widget in the middle of a parent.

Centering a Button

Center(
  child: ElevatedButton(
    onPressed: () {},
    child: const Text('Login'),
  ),
)

Centering an Icon

Center(
  child: Icon(
    Icons.favorite,
    size: 80,
  ),
)

Centering a Container

Center(
  child: Container(
    width: 200,
    height: 100,
    color: Colors.blue,
    child: const Center(
      child: Text(
        'Centered Text',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
)

Here, there are two Center widgets. The outer Center centers the Container on the screen, while the inner Center centers the text inside the Container.

3. Center with Alignment

The Center widget is essentially a convenient way to position a child in the middle. If you need more control over the child's position, use Align.

Align(
  alignment: Alignment.topCenter,
  child: Text('Top Center'),
)

Common alignment values include:

• Alignment.center
• Alignment.topCenter
• Alignment.bottomCenter
• Alignment.centerLeft
• Alignment.centerRight
• Alignment.topLeft
• Alignment.topRight
• Alignment.bottomLeft
• Alignment.bottomRight

4. Center Inside a Column

A Center widget can be placed inside a Column to center a particular child.

Column(
  children: [
    const Text('Welcome'),
    const SizedBox(height: 20),
    Center(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('Start'),
      ),
    ),
  ],
)

For more control over horizontal alignment in a Column, CrossAxisAlignment can also be used.

5. Center Inside a Row

Row(
  children: [
    const Icon(Icons.home),
    Expanded(
      child: Center(
        child: Text('Home'),
      ),
    ),
    const Icon(Icons.settings),
  ],
)

The Expanded widget gives the Center available horizontal space, allowing the text to appear in the center of that space.

6. Padding Widget

The Padding widget adds empty space around its child. Padding creates space inside the surrounding layout area and between the child and its parent boundary.

Basic Syntax

Padding(
  padding: const EdgeInsets.all(16),
  child: Text('Hello Flutter'),
)

Simple Example

Padding(
  padding: const EdgeInsets.all(20),
  child: const Text(
    'Flutter Padding Example',
    style: TextStyle(fontSize: 20),
  ),
)

The text receives 20 logical pixels of padding on all four sides.

7. EdgeInsets.all()

EdgeInsets.all() applies the same padding value to all four sides.

Padding(
  padding: const EdgeInsets.all(16),
  child: Text('Same padding on all sides'),
)

This produces:

• Top: 16
• Right: 16
• Bottom: 16
• Left: 16

8. EdgeInsets.symmetric()

EdgeInsets.symmetric() allows you to specify separate horizontal and vertical padding.

Padding(
  padding: const EdgeInsets.symmetric(
    horizontal: 20,
    vertical: 10,
  ),
  child: Text('Symmetric Padding'),
)

Here:

• Horizontal padding = 20
• Vertical padding = 10

9. EdgeInsets.only()

Use EdgeInsets.only() when you need padding on specific sides.

Padding(
  padding: const EdgeInsets.only(
    left: 20,
    top: 10,
    right: 30,
    bottom: 15,
  ),
  child: Text('Custom Padding'),
)

10. EdgeInsets.fromLTRB()

EdgeInsets.fromLTRB() allows you to specify left, top, right, and bottom padding in that order.

Padding(
  padding: const EdgeInsets.fromLTRB(
    10,
    20,
    30,
    40,
  ),
  child: Text('LTRB Padding'),
)

11. Padding Around a Button

Padding(
  padding: const EdgeInsets.all(16),
  child: ElevatedButton(
    onPressed: () {},
    child: const Text('Submit'),
  ),
)

Padding can make buttons easier to position and can help maintain consistent spacing in an interface.

12. Padding Around Text

Padding(
  padding: const EdgeInsets.symmetric(
    horizontal: 20,
    vertical: 12,
  ),
  child: const Text(
    'This text has comfortable spacing around it.',
  ),
)

13. Padding with Container

Padding can be placed outside or inside a Container depending on the desired layout.

Padding Outside Container

Padding(
  padding: const EdgeInsets.all(20),
  child: Container(
    width: 200,
    height: 100,
    color: Colors.blue,
  ),
)

Padding Inside Container

Container(
  color: Colors.blue,
  padding: const EdgeInsets.all(20),
  child: const Text(
    'Text inside Container',
    style: TextStyle(color: Colors.white),
  ),
)

The first example creates space around the Container. The second creates space between the Container's content and its boundary.

14. Padding in a Column

Column(
  children: [
    Padding(
      padding: const EdgeInsets.all(16),
      child: Text('First Item'),
    ),
    Padding(
      padding: const EdgeInsets.all(16),
      child: Text('Second Item'),
    ),
    Padding(
      padding: const EdgeInsets.all(16),
      child: Text('Third Item'),
    ),
  ],
)

15. Padding in a ListView

ListView(
  padding: const EdgeInsets.all(16),
  children: [
    const Text('Item 1'),
    const SizedBox(height: 12),
    const Text('Item 2'),
    const SizedBox(height: 12),
    const Text('Item 3'),
  ],
)

Scrollable widgets such as ListView also provide their own padding property. The Flutter API documentation demonstrates using padding to inset list content from the edges. View ListView documentation.

16. SizedBox Widget

SizedBox is used to give a widget a specific width or height, or to create empty space between widgets.

Basic Syntax

SizedBox(
  width: 100,
  height: 50,
  child: Text('Hello'),
)

17. SizedBox for Spacing

One of the most common uses of SizedBox is creating fixed space between widgets.

Vertical Spacing

Column(
  children: [
    const Text('First'),
    const SizedBox(height: 20),
    const Text('Second'),
  ],
)

Horizontal Spacing

Row(
  children: [
    const Icon(Icons.home),
    const SizedBox(width: 15),
    const Text('Home'),
  ],
)

18. SizedBox with Width

SizedBox(
  width: 200,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text('Continue'),
  ),
)

This constrains the button to a width of 200 logical pixels, subject to the constraints supplied by its parent.

19. SizedBox with Height

SizedBox(
  height: 60,
  child: const Text('Fixed Height Area'),
)

20. SizedBox with Width and Height

SizedBox(
  width: 200,
  height: 100,
  child: Container(
    color: Colors.blue,
    child: const Center(
      child: Text(
        'SizedBox',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
)

21. SizedBox.shrink()

SizedBox.shrink() creates a box with zero width and zero height within the applicable constraints.

Column(
  children: [
    const Text('Before'),
    const SizedBox.shrink(),
    const Text('After'),
  ],
)

It is useful when you need an empty widget that occupies minimal space.

22. SizedBox.expand()

SizedBox.expand() attempts to make its child fill the available space.

SizedBox.expand(
  child: Container(
    color: Colors.blue,
    child: const Center(
      child: Text(
        'Full Available Space',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
)

Use it only where the parent provides appropriate finite constraints.

23. SizedBox.fromSize()

SizedBox.fromSize() can create a SizedBox using a Size object.

SizedBox.fromSize(
  size: const Size(200, 100),
  child: Container(
    color: Colors.green,
  ),
)

24. Center vs Padding vs SizedBox

25. Padding vs Margin

Flutter does not provide a separate general-purpose Margin widget. Margin-like spacing is commonly created using Padding around a widget.

Example

Padding(
  padding: const EdgeInsets.all(20),
  child: Container(
    color: Colors.blue,
    child: const Text(
      'Container',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Here the Padding widget creates space outside the Container.

26. Center + Padding

Center and Padding are frequently combined.

Center(
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: const Text(
      'Centered with Padding',
      style: TextStyle(fontSize: 22),
    ),
  ),
)

The child is centered while also receiving padding.

27. Padding + SizedBox

Padding(
  padding: const EdgeInsets.all(20),
  child: Column(
    children: [
      const Text('Username'),
      const SizedBox(height: 10),
      TextField(),
    ],
  ),
)

This pattern is commonly used in forms where padding provides outer spacing and SizedBox creates controlled spacing between fields.

28. Center + SizedBox

Center(
  child: SizedBox(
    width: 250,
    height: 50,
    child: ElevatedButton(
      onPressed: () {},
      child: const Text('Login'),
    ),
  ),
)

The button is given a defined size and positioned in the center.

29. Combining Center, Padding and SizedBox

Center(
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: SizedBox(
      width: 300,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text(
            'Login',
            style: TextStyle(
              fontSize: 28,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 20),
          TextField(
            decoration: const InputDecoration(
              labelText: 'Email',
              border: OutlineInputBorder(),
            ),
          ),
          const SizedBox(height: 15),
          TextField(
            obscureText: true,
            decoration: const InputDecoration(
              labelText: 'Password',
              border: OutlineInputBorder(),
            ),
          ),
          const SizedBox(height: 20),
          SizedBox(
            width: double.infinity,
            height: 50,
            child: ElevatedButton(
              onPressed: () {},
              child: const Text('Login'),
            ),
          ),
        ],
      ),
    ),
  ),
)

30. Practical Login Screen Example

import 'package:flutter/material.dart';

void main() {
  runApp(const LoginApp());
}

class LoginApp extends StatelessWidget {
  const LoginApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Login'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(24),
            child: SizedBox(
              width: 350,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Icon(
                    Icons.account_circle,
                    size: 90,
                  ),
                  const SizedBox(height: 20),
                  const Text(
                    'Welcome Back',
                    style: TextStyle(
                      fontSize: 28,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 25),
                  const TextField(
                    decoration: InputDecoration(
                      labelText: 'Email',
                      border: OutlineInputBorder(),
                    ),
                  ),
                  const SizedBox(height: 15),
                  const TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                      labelText: 'Password',
                      border: OutlineInputBorder(),
                    ),
                  ),
                  const SizedBox(height: 20),
                  SizedBox(
                    width: double.infinity,
                    height: 50,
                    child: ElevatedButton(
                      onPressed: () {},
                      child: const Text('Login'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

31. Creating a Card with Padding

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          'Flutter Course',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 8),
        const Text(
          'Learn Flutter development step by step.',
        ),
        const SizedBox(height: 15),
        ElevatedButton(
          onPressed: () {},
          child: const Text('Learn More'),
        ),
      ],
    ),
  ),
)

32. Center for Loading Indicator

A common real-world use of Center is displaying a loading indicator in the middle of the screen.

const Scaffold(
  body: Center(
    child: CircularProgressIndicator(),
  ),
)

33. Center for Empty State

Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      const Icon(
        Icons.inbox_outlined,
        size: 70,
      ),
      const SizedBox(height: 15),
      const Text(
        'No items found',
        style: TextStyle(fontSize: 20),
      ),
    ],
  ),
)

34. Using Padding in a Form

Padding(
  padding: const EdgeInsets.all(20),
  child: Form(
    child: Column(
      children: [
        const TextField(
          decoration: InputDecoration(
            labelText: 'Name',
          ),
        ),
        const SizedBox(height: 15),
        const TextField(
          decoration: InputDecoration(
            labelText: 'Email',
          ),
        ),
        const SizedBox(height: 15),
        const TextField(
          decoration: InputDecoration(
            labelText: 'Phone',
          ),
        ),
      ],
    ),
  ),
)

35. SizedBox for Button Spacing

Column(
  children: [
    ElevatedButton(
      onPressed: () {},
      child: const Text('Save'),
    ),
    const SizedBox(height: 12),
    OutlinedButton(
      onPressed: () {},
      child: const Text('Cancel'),
    ),
  ],
)

36. Responsive Use of Padding

Padding values can be calculated according to available screen width when a more adaptive layout is required.

LayoutBuilder(
  builder: (context, constraints) {
    final padding = constraints.maxWidth > 600 ? 40.0 : 16.0;

    return Padding(
      padding: EdgeInsets.all(padding),
      child: const Text(
        'Responsive Content',
      ),
    );
  },
)

37. Center, Padding and SizedBox in a Profile Card

Center(
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: SizedBox(
      width: 320,
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const CircleAvatar(
                radius: 45,
                child: Icon(
                  Icons.person,
                  size: 45,
                ),
              ),
              const SizedBox(height: 15),
              const Text(
                'John Doe',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 8),
              const Text('Flutter Developer'),
              const SizedBox(height: 20),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('View Profile'),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
)

38. Important Difference: SizedBox vs Padding

SizedBox can be used to create a fixed gap, while Padding is used to inset a child from its surrounding boundaries.

Column(
  children: [
    Padding(
      padding: const EdgeInsets.all(16),
      child: Text('Content with padding'),
    ),
    const SizedBox(height: 20),
    Text('Content after fixed gap'),
  ],
)

39. Important Difference: Center vs MainAxisAlignment

When using a Column or Row, you can often center multiple children using MainAxisAlignment.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Text('First'),
    const Text('Second'),
    const Text('Third'),
  ],
)

This is different from wrapping the entire Column in a Center because the alignment is controlled within the Column's main axis.

40. Common Mistakes

• Using too many nested Padding widgets when one Padding widget is enough.
• Using large fixed widths that cause overflow on small screens.
• Using SizedBox with fixed dimensions without considering parent constraints.
• Using Center when Row or Column alignment would provide clearer control.
• Adding many unnecessary SizedBox widgets when a parent layout property can control spacing.
• Forgetting that Row and Column do not automatically scroll.

41. Best Practices

• Use Center when one child needs simple centering.
• Use Padding for consistent content spacing.
• Use SizedBox for simple fixed gaps and deliberate dimensions.
• Prefer const for widgets whose values never change.
• Avoid excessive nesting when a simpler layout can achieve the same result.
• Use responsive constraints instead of unnecessarily large fixed dimensions.
• Use ListView or another scrolling widget for long content instead of relying on a Column that may overflow.
• Keep spacing values consistent throughout the application to create a predictable visual design.

42. Flutter Layout Concept

Flutter layout follows a constraints-based system. A parent provides constraints to its child, the child determines its size within those constraints, and the parent positions the child. Understanding this concept makes widgets such as Center, Padding, and SizedBox much easier to use. Read Flutter RenderBox documentation.

43. Quick Comparison

44. Interview Questions

1. What is the purpose of the Center widget in Flutter?
2. How is Center different from Align?
3. What is the purpose of Padding?
4. What is EdgeInsets.all()?
5. What is the difference between EdgeInsets.all(), EdgeInsets.symmetric(), and EdgeInsets.only()?
6. What is SizedBox used for?
7. How can SizedBox be used to create vertical spacing?
8. How can SizedBox be used to create horizontal spacing?
9. What is the difference between Padding and SizedBox?
10. What is the difference between Center and MainAxisAlignment.center?
11. When should you use SizedBox.expand()?
12. Why can excessive fixed dimensions cause responsive layout problems?

45. Practice Exercises

1. Create a screen with a Text widget centered using Center.
2. Create a login form using Padding and SizedBox.
3. Create a profile card using Center, Padding, and SizedBox.
4. Create three buttons separated using SizedBox.
5. Create a responsive content area using LayoutBuilder and Padding.
6. Create an empty-state screen using Center, Column, and SizedBox.
7. Create a card with internal Padding and multiple content sections.

46. Quick Revision

• Center: Centers a child within the available space.
• Padding: Adds inset space around a child.
• SizedBox: Provides a specific size or creates fixed spacing.
• EdgeInsets.all: Same padding on every side.
• EdgeInsets.symmetric: Separate horizontal and vertical padding.
• EdgeInsets.only: Padding on selected sides.
• SizedBox(height): Commonly used for vertical spacing.
• SizedBox(width): Commonly used for horizontal spacing.
• SizedBox.expand: Attempts to fill available space.
• const: Use for widgets whose configuration is compile-time constant.

47. Useful Learning Resources

Flutter Training: https://www.justacademy.co/course-detail/flutter-training

Register for Course Demo: https://www.justacademy.co/register-for-course-demo

Flutter API Documentation: Flutter Widgets API

ListView Documentation: Flutter ListView API

SingleChildScrollView Documentation: Flutter SingleChildScrollView API

Conclusion

Center, Padding, and SizedBox are simple but essential Flutter layout widgets. Center is mainly used for positioning a child in the middle, Padding controls the space around content, and SizedBox is useful for fixed dimensions and controlled spacing. By combining these widgets with Row, Column, Container, Expanded, and responsive layout techniques, developers can create clean and well-structured Flutter interfaces.