Real-life Example Layout

Building real-world applications in Flutter often requires combining multiple layout widgets to achieve complex and polished designs. One common example is a user profile page, which typically contains a profile picture, user details, statistics, and interactive buttons.

This post will provide a detailed walkthrough of constructing a profile page using Column, Row, and Stack widgets, explaining each step, best practices, and alternatives to ensure a professional and responsive design.

Introduction

A profile page is one of the most common screens in mobile applications. It is usually comprised of:

A profile picture, often with an overlay button for editing.
User information such as name, username, or bio.
Statistics, such as posts, followers, and following.
Action buttons, like follow, message, or settings.

Building such a page in Flutter requires combining multiple layout widgets efficiently:

Column – To arrange the main sections vertically.
Row – To display stats horizontally.
Stack – To overlay the profile picture and edit button.

Column: Arranging Main Content Vertically

The Column widget is used to arrange widgets vertically. It forms the backbone of the profile page, containing all primary content such as the profile section, stats, and buttons.

Basic Syntax

Column(
  children: [
// Widgets go here  ],
)

Children are arranged from top to bottom.
You can control alignment with mainAxisAlignment (vertical spacing) and crossAxisAlignment (horizontal alignment).

Using Column in Profile Page

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
// Profile picture section
// Stats section
// Buttons section  ],
)

crossAxisAlignment.center centers children horizontally.
Each section is a separate widget or layout.

Stack: Overlaying Profile Picture

A Stack widget allows you to layer widgets on top of each other. This is especially useful for adding an edit button or badge over a profile picture.

Example: Profile Picture with Edit Overlay

Stack(
  children: [
CircleAvatar(
  radius: 50,
  backgroundImage: AssetImage("assets/profile.jpg"),
),
Positioned(
  bottom: 0,
  right: 0,
  child: Container(
    padding: EdgeInsets.all(5),
    decoration: BoxDecoration(
      color: Colors.blue,
      shape: BoxShape.circle,
    ),
    child: Icon(Icons.edit, size: 18),
  ),
),  ],
)

The CircleAvatar displays the profile picture.
Positioned places the edit button at the bottom-right.
Stack ensures that the edit button overlays the picture without affecting other layout elements.

Row: Displaying User Statistics

The Row widget arranges children horizontally, making it ideal for displaying statistics like posts, followers, and following.

Example: Stats Section

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
Column(
  children: &#91;
    Text("150", style: TextStyle(fontWeight: FontWeight.bold)),
    Text("Posts"),
  ],
),
Column(
  children: &#91;
    Text("2.5K", style: TextStyle(fontWeight: FontWeight.bold)),
    Text("Followers"),
  ],
),
Column(
  children: &#91;
    Text("300", style: TextStyle(fontWeight: FontWeight.bold)),
    Text("Following"),
  ],
),  ],
)

Each stat is a Column containing a number and label.
Row with spaceEvenly ensures equal horizontal spacing.

Complete Profile Page Layout

Combining Column, Row, and Stack gives a structured profile page layout.

SingleChildScrollView(
  child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: &#91;
  SizedBox(height: 30),
  Stack(
    children: &#91;
      CircleAvatar(
        radius: 50,
        backgroundImage: AssetImage("assets/profile.jpg"),
      ),
      Positioned(
        bottom: 0,
        right: 0,
        child: Container(
          padding: EdgeInsets.all(5),
          decoration: BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
          ),
          child: Icon(Icons.edit, size: 18),
        ),
      ),
    ],
  ),
  SizedBox(height: 10),
  Text("John Doe", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
  Text("@johndoe", style: TextStyle(color: Colors.grey)),
  SizedBox(height: 20),
  Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: &#91;
      Column(
        children: &#91;
          Text("150", style: TextStyle(fontWeight: FontWeight.bold)),
          Text("Posts"),
        ],
      ),
      Column(
        children: &#91;
          Text("2.5K", style: TextStyle(fontWeight: FontWeight.bold)),
          Text("Followers"),
        ],
      ),
      Column(
        children: &#91;
          Text("300", style: TextStyle(fontWeight: FontWeight.bold)),
          Text("Following"),
        ],
      ),
    ],
  ),
  SizedBox(height: 20),
  Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: &#91;
      ElevatedButton(onPressed: () {}, child: Text("Follow")),
      OutlinedButton(onPressed: () {}, child: Text("Message")),
    ],
  ),
  SizedBox(height: 30),
],  ),
)

Key Points

SingleChildScrollView allows vertical scrolling if content exceeds screen height.
SizedBox provides spacing between sections.
Column stacks main sections vertically.
Row arranges statistics and buttons horizontally.
Stack overlays the edit button on the profile picture.

Adding Responsive Design

For different screen sizes, you can use MediaQuery to make the layout responsive.

double screenWidth = MediaQuery.of(context).size.width;

SizedBox(
  width: screenWidth * 0.4,
  child: ElevatedButton(onPressed: () {}, child: Text("Follow")),
),

Buttons adjust width according to screen size.
Ensures consistent design on phones and tablets.

Best Practices for Profile Page Layout

Use Padding and SizedBox for spacing – Avoid using empty Containers for space.
Keep Stack usage minimal – Only overlay elements when necessary.
Separate Widgets – Break sections into reusable widgets (ProfilePicture, StatsRow, ActionButtons).
Scrollable Layout – Use SingleChildScrollView or ListView to handle overflow.
Alignment Control – Use mainAxisAlignment and crossAxisAlignment for precise layout.

Example: Breaking Layout into Widgets

class ProfilePicture extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return Stack(
  children: &#91;
    CircleAvatar(radius: 50, backgroundImage: AssetImage("assets/profile.jpg")),
    Positioned(
      bottom: 0,
      right: 0,
      child: Container(
        padding: EdgeInsets.all(5),
        decoration: BoxDecoration(color: Colors.blue, shape: BoxShape.circle),
        child: Icon(Icons.edit, size: 18),
      ),
    ),
  ],
);  }
}

class StatsRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: &#91;
    StatItem(label: "Posts", value: "150"),
    StatItem(label: "Followers", value: "2.5K"),
    StatItem(label: "Following", value: "300"),
  ],
);  }
}

class StatItem extends StatelessWidget {
  final String label;
  final String value;

  StatItem({required this.label, required this.value});

  @override
  Widget build(BuildContext context) {
return Column(
  children: &#91;
    Text(value, style: TextStyle(fontWeight: FontWeight.bold)),
    Text(label),
  ],
);  }
}

Breaking the profile page into smaller widgets improves readability, maintainability, and reusability.

Common Mistakes

Using only Column without scroll – content may overflow on small screens.
Overusing Stack – unnecessary complexity if simple layout is sufficient.
Ignoring responsive design – buttons and images may appear too small or too large on different devices.
Not aligning children properly – can cause uneven or unprofessional UI.

Enhancing the Profile Page

Add Gradient Background – Use Container with BoxDecoration to add visual appeal.
Use Custom Fonts – Improve typography with TextStyle and Google Fonts.
Interactive Widgets – Include buttons, icons, or gestures for engagement.
Profile Bio – Add a Text widget below username for additional info.
List of Posts or Activities – Use ListView or GridView for user content.

Performance Considerations

Minimize unnecessary nesting – Too many nested Columns, Rows, or Stacks can slow down rendering.
Use const constructors – For widgets that don’t change, to improve performance.
Avoid large images without optimization – Use compressed images or NetworkImage with caching.

Summary

A real-life profile page in Flutter can be efficiently constructed using Column, Row, and Stack:

Column – Organizes main sections vertically.
Row – Displays statistics and action buttons horizontally.
Stack – Overlays the profile picture with edit buttons or badges.

Other important considerations include:

Spacing with SizedBox and Padding
Responsive design using MediaQuery
Breaking complex layouts into smaller reusable widgets
Scrollable layouts with SingleChildScrollView