I'm very new with flutter and this is very confusing to me

I'm trying to have an image simply placed in the top left corner of the screen. Seems simple enough but for some reason there is ALWAYS empty space to the left of the image. This seems to be mainly an issue when on larger screens and then when using a smaller screen the empty space make the image not aligned to the top of the screen.

Note: I want to use row because I would like to have multiple images here in a row but the first one I'm using is not cooperating with its alignment

here is my code which is pretty simple

        body: Align(
          alignment: Alignment.topLeft,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Image.asset(
                'assets/images/background_home/slide_image1.jpg',
                width: MediaQuery.of(context).size.width * 0.3,
                height: MediaQuery.of(context).size.height * 0.4,
              ),
            ],
          ),
        ));

however when I do something like

      body: Align(
          alignment: Alignment.topCenter,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(width: 100, height: 100, color: Colors.blue)
            ],
          )),

it works aligning to the top left

I'm very new with flutter and this is very confusing to me

I'm trying to have an image simply placed in the top left corner of the screen. Seems simple enough but for some reason there is ALWAYS empty space to the left of the image. This seems to be mainly an issue when on larger screens and then when using a smaller screen the empty space make the image not aligned to the top of the screen.

Note: I want to use row because I would like to have multiple images here in a row but the first one I'm using is not cooperating with its alignment

here is my code which is pretty simple

        body: Align(
          alignment: Alignment.topLeft,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Image.asset(
                'assets/images/background_home/slide_image1.jpg',
                width: MediaQuery.of(context).size.width * 0.3,
                height: MediaQuery.of(context).size.height * 0.4,
              ),
            ],
          ),
        ));

however when I do something like

      body: Align(
          alignment: Alignment.topCenter,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(width: 100, height: 100, color: Colors.blue)
            ],
          )),

it works aligning to the top left

• flutter

• Turn on devtools. You'll likely see that the widgets aren't occupying the full width, perhaps. – Randal Schwartz Commented Mar 31 at 22:52

2 Answers 2

The issue is caused by the Row trying to take up the full width, and the image not aligning fully left because of its size and available space. To fix this, wrap the Row in an Align and a Container with alignment, or use CrossAxisAlignment.start in the Row.

Here’s a simple fix:

body: Align(
  alignment: Alignment.topLeft,
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Image.asset(
        'assets/images/background_home/slide_image1.jpg',
        width: MediaQuery.of(context).size.width * 0.3,
        height: MediaQuery.of(context).size.height * 0.4,
        fit: BoxFit.cover,
      ),
    ],
  ),
),

1. Using Row with Image.asset or Imagework

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('YOUR-ASSET-NAME', width: 50, height: 50),
    Image.asset('YOUR-ASSET-NAME', width: 50, height: 50),
    Image.asset('YOUR-ASSET-NAME', width: 50, height: 50),
  ],
)

Normal row image

2. Using ListView with scrollDirection: Axis.horizontal

SizedBox(
  height: 100,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: [
      Image.asset('YOUR-ASSET-NAME', width: 50, height: 50),
      Image.asset('YOUR-ASSET-NAME', width: 50, height: 50),
      Image.asset('YOUR-ASSET-NAME', width: 50, height: 50),
    ],
  ),
)

Use ListView if the images overflow the screen width.

3. Using Wrap for dynamic layout

Wrap(
  spacing: 10,
  children: [
    Image.asset('YOUR-ASSET-NAME', width: 50, height: 50),
    Image.asset('YOUR-ASSET-NAME', width: 50, height: 50),
    Image.asset('YOUR-ASSET-NAME', width: 50, height: 50),
  ],
)

Wrap ensures images wrap to the next line if needed.

4. Using Expanded for equal spacing

Row(
  children: [
    Expanded(child: Image.asset('YOUR-ASSET-NAME')),
    Expanded(child: Image.asset('YOUR-ASSET-NAME')),
    Expanded(child: Image.asset('YOUR-ASSET-NAME')),
  ],
)

Expanded makes each image take an equal portion of the row.

5. Using Flexible for proportional layout

Row(
  children: [
    Flexible(flex: 1, child: Image.asset('YOUR-ASSET-NAME')),
    Flexible(flex: 2, child: Image.asset('YOUR-ASSET-NAME')),
    Flexible(flex: 1, child: Image.asset('YOUR-ASSET-NAME')),
  ],
)

Flexible allows images to resize based on available space.