How do I align the first column to the top?

I am coming from an Android Development background and normally I will just use gravity="top" on the container.

But how do I do it in Flutter?

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Layout Test'),
          ),
          body: ListView(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[

    // The problem is here ------> 

                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Icon(Icons.star_half),
                      Icon(Icons.star_half),
                      Icon(Icons.star_half),
                    ],
                  ),
                  _buildLongColumn(),
                  _buildLongColumn(),
                  _buildLongColumn(),
                  _buildLongColumn(),
                  _buildLongColumn(),
                ],
              )
            ],
          ),
        ));
  }

  Column _buildLongColumn() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Icon(Icons.star_half),
        Icon(Icons.star_half),
        Icon(Icons.star_half),
        Icon(Icons.star_half),
        Icon(Icons.star_half),
        Icon(Icons.star_half),
        Icon(Icons.star_half),
      ],
    );
  }
}

enter image description here


Solution 1: Aamil Silawat

You have to set just crossAxisAlignment: CrossAxisAlignment.start, in Row Try out this code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Layout Test'),
          ),
          body: ListView(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[

                  // The problem is here ------>

                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Icon(Icons.star_half),
                      Icon(Icons.star_half),
                      Icon(Icons.star_half),
                    ],
                  ),
                  _buildLongColumn(),
                  _buildLongColumn(),
                  _buildLongColumn(),
                  _buildLongColumn(),
                  _buildLongColumn(),
                ],
              )
            ],
          ),
        ));
  }

  Column _buildLongColumn() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Icon(Icons.star_half),
        Icon(Icons.star_half),
        Icon(Icons.star_half),
        Icon(Icons.star_half),
        Icon(Icons.star_half),
        Icon(Icons.star_half),
        Icon(Icons.star_half),
      ],
    );
  }
}

for more info about Rows and Column Concept