Row and Column in Flutter

Create Free Backend With Appwrite

Row and Column Flutter

Row and Column helps you to align its children horizontally and vertically. These widgets are important when designing the user interface for an application.

Row Column
Arranges children horizontally. Arranges children vertically.

Example 1: Row & Column

In this example, you will learn to use Row and Column widgets together with a CircleAvatar to create a user profile layout.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    CircleAvatar(
      radius: 35,
      backgroundImage: NetworkImage(
        'https://avatars.githubusercontent.com/u/33576285?v=4',
      ),
    ),
    Padding(padding: EdgeInsets.all(2.0)),
    Column(
      children: <Widget>[
        Text(
          'John Doe',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          'Flutter Developer',
          style: TextStyle(
            fontSize: 15,
          ),
        ),
      ],
    ),
  ],
)
Run Online

Example 2: Login Form

In this example, you will learn how to build a simple login form using Column and Row, along with the TextField for input fields.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    const Row(
      children: <Widget>[
        Text('Username: '),
        Expanded(child: TextField()),
      ],
    ),
    const Row(
      children: <Widget>[
        Text('Password: '),
        Expanded(
          child: TextField(
            obscureText: true,
          ),
        ),
      ],
    ),
    Row(
      children: <Widget>[
        Expanded(
          child: MaterialButton(
            color: Colors.blue,
            textColor: Colors.white,
            onPressed: () {},
            child: const Text('Login'),
          ),
        ),
      ],
    ),
  ],
)
Run Online

Example 3: Star Pattern

In this example, you will learn how to create a star pattern using Center, Column, and Row widgets, along with the Icon widget.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      // First row (one star in the middle)
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [Icon(Icons.star, color: Colors.blue)],
      ),
      // Second row (one star in the middle)
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [Icon(Icons.star, color: Colors.blue)],
      ),
      // Third row (five stars)
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.star, color: Colors.blue),
          Icon(Icons.star, color: Colors.blue),
          Icon(Icons.star, color: Colors.blue),
          Icon(Icons.star, color: Colors.blue),
          Icon(Icons.star, color: Colors.blue),
        ],
      ),
      // Fourth row (one star in the middle)
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [Icon(Icons.star, color: Colors.blue)],
      ),
      // Fifth row (one star in the middle)
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [Icon(Icons.star, color: Colors.blue)],
      ),
    ],
  ),
),
Run Online