🧩 How to Align Content in a Custom Widget in FlutterFlow

General
,
1

Hi everyone! :waving_hand:

When building custom widgets in FlutterFlow, aligning your content properly is crucial for maintaining a clean, responsive, and visually appealing UI across all devices.

This post will walk you through:

  • :white_check_mark: Ways to align content
  • :hammer_and_wrench: Best practices
  • :page_facing_up: Useful code snippets

:bullseye: 1. Using Alignment in Container

To align the inner content of a Container, use the alignment property:

dart

CopyEdit

Container(
  alignment: Alignment.center, // Aligns child in the center
  child: Text('Centered Text'),
)

:white_check_mark: Best for: Simple widgets where you want to align a single child.

:brick: 2. Using Center or Align Widget

If you want more control or you’re nesting multiple widgets, use Center or Align:

dart

CopyEdit

Center(
  child: Text('Centered Text'),
)

Align(
  alignment: Alignment.bottomRight,
  child: Icon(Icons.arrow_forward),
)

:white_check_mark: Center is shorthand for Align(alignment: Alignment.center)

:puzzle_piece: 3. Using Row, Column, or Stack for Layout

Use layout widgets to organize multiple items with flexible alignment:

dart

CopyEdit

Row(
  mainAxisAlignment: MainAxisAlignment.center, // Horizontally center
  crossAxisAlignment: CrossAxisAlignment.center, // Vertically center
  children: [
    Icon(Icons.star),
    SizedBox(width: 8),
    Text('Starred'),
  ],
)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.person),
    Text('Profile'),
  ],
)

:triangular_ruler: 4. Padding & SizedBox for Spacing

Always use consistent spacing:

dart

CopyEdit

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text('Padded Text'),
)

SizedBox(height: 10), // Vertical space

:light_bulb: Best Practices

:white_check_mark: 1. Use alignment inside Container for single-child widgets
:white_check_mark: 2. Use Row and Column for multiple widgets
:white_check_mark: 3. Use MainAxisAlignment and CrossAxisAlignment smartly
:white_check_mark: 4. Combine Padding and SizedBox to avoid crammed UI
:white_check_mark: 5. Test on mobile and web for responsiveness
:white_check_mark: 6. Wrap widgets with Expanded or Flexible in rows/columns to handle overflow

:test_tube: Real Example (Custom Avatar Badge)

dart

CopyEdit

Container(
  padding: EdgeInsets.all(6),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(50),
    border: Border.all(color: Colors.grey),
  ),
  child: Center(
    child: Text(
      'M',
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

:speaking_head: Conclusion

Aligning content in FlutterFlow custom widgets is easy once you understand alignment, Center, Row/Column, and spacing tools like Padding and SizedBox.

Mastering layout alignment = Better UI + Better UX! :100:

Let me know if you’ve found other tricks for alignment, or if you’re stuck on a specific widget layout - happy to help!