Row and Column for Flame Components #1944

rivella50 · 2022-09-27T18:08:13Z

Problem to solve

With Row and Column classes children Components could be placed and layouted correctly without overlapping and without having to care about repeating size and position calculations.
In my games i often have Components (Sprites, buttons, etc.) which have to be placed either in rows or columns, where it's always quite an effort to calculate their positions and sizes.
The goal of the suggested two classes would be to make these calculations transparent for the developer.

Proposal

Flutter-like Row and Column classes with alignment options for both axes (i.e. mainAxisAlignment and crossAxisAlignment).
Some ideas:

the new classes could extend PositionComponent themselves
children can possibly be all PositionComponent extending classes (since getting their size is important)
adding a child dynamically to a Row or Column would need to re-layout the component
another new class for adding gaps would make sense too (like SizedBox) - ok this can be accomplished by just adding a PositionComponent with a size defined

The text was updated successfully, but these errors were encountered:

spydon · 2022-09-27T18:25:35Z

Sgtm, do you want to work on this?

rivella50 · 2022-09-27T19:26:53Z

@spydon I don't have that much spare time at the moment, therefore rather no, sorry.

erickzanardo · 2022-09-27T19:29:05Z

I've a few things on my queue, but I could try tackling this after clear some space on it

rivella50 · 2022-09-29T15:03:47Z

Here are my first attempts:

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/widgets.dart';

enum Direction { horizontal, vertical }

/// Super class for [ComponentRow] and [ComponentColumn]
abstract class LayoutComponent extends PositionComponent with HasGameRef {
  LayoutComponent(this.direction, this.mainAxisAlignment);
  final Direction direction;
  MainAxisAlignment mainAxisAlignment;
}

/// Allows laying out children in a row by defining an [MainAxisAlignment] type.
/// A relayout is performed when
///  - a new child is added
///  - an existing child changes its size
class ComponentRow extends LayoutComponent {
  ComponentRow({MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start})
      : super(Direction.horizontal, mainAxisAlignment);

  @override
  Future<void>? add(Component component) {
    assert(
      component is PositionComponent,
      "The added component has to be a child of PositionComponent",
    );
    (component as PositionComponent).size.addListener(() {
      _layoutChildren();
    });
    
    component.mounted.then((_) => _layoutChildren());
    return super.add(component);
  }

  @override
  void remove(Component component) {
    assert(
      contains(component),
      "This component is not a child of this class",
    );
    (component as PositionComponent).size.removeListener(_layoutChildren);
    
    super.remove(component);
    // hack which needs to be resolved
    Future.delayed(const Duration(milliseconds: 50), () {
      _layoutChildren();
    });
  }

  void _layoutChildren() {
    final list = children.whereType<PositionComponent>().toList();
    Vector2 currentPosition = Vector2.zero();
    double componentsWidth =
        list.fold(0, (previousValue, element) => previousValue + element.width);
    final widthAvailable = size.x != 0.0
        ? size.x - absoluteTopLeftPosition.x
        : gameRef.canvasSize.x - absoluteTopLeftPosition.x;

    if (mainAxisAlignment == MainAxisAlignment.start) {
      for (var child in list) {
        child.position = Vector2(currentPosition.x, currentPosition.y);
        currentPosition.x += child.width;
      }
    } else if (mainAxisAlignment == MainAxisAlignment.end) {
      for (var child in list.reversed) {
        currentPosition.x -= child.width;
        child.position = Vector2(currentPosition.x, currentPosition.y);
      }
    } else if (mainAxisAlignment == MainAxisAlignment.spaceBetween) {
      final freeSpacePerComponent =
          (widthAvailable - componentsWidth) / list.length;
      for (var child in list) {
        child.position = Vector2(currentPosition.x, currentPosition.y);
        currentPosition.x += (freeSpacePerComponent + child.width);
      }
    } else if (mainAxisAlignment == MainAxisAlignment.spaceEvenly) {
      final freeSpacePerComponent =
          (widthAvailable - componentsWidth) / (list.length + 2);
      currentPosition.x += freeSpacePerComponent;
      for (var child in list) {
        child.position = Vector2(currentPosition.x, currentPosition.y);
        currentPosition.x += (freeSpacePerComponent + child.width);
      }
    } else if (mainAxisAlignment == MainAxisAlignment.spaceAround) {
      final freeSpacePerComponent =
          (widthAvailable - componentsWidth) / (list.length + 1);
      currentPosition.x += freeSpacePerComponent / 2;
      for (var child in list) {
        child.position = Vector2(currentPosition.x, currentPosition.y);
        currentPosition.x += (freeSpacePerComponent + child.width);
      }
    } else if (mainAxisAlignment == MainAxisAlignment.center) {
      final freeSpace = widthAvailable - componentsWidth;
      currentPosition.x += freeSpace / 2;
      for (var child in list) {
        child.position = Vector2(currentPosition.x, currentPosition.y);
        currentPosition.x += child.width;
      }
    }
  }
}

It can be used like this:

final row = ComponentRow(mainAxisAlignment: MainAxisAlignment.start)
  //..size = Vector2(500, 200)
  ..position = Vector2(50,50);
add(row);
row.add(
  TextComponent(text: 'One',)
    ..textRenderer = TextPaint(
        style: const TextStyle(fontSize: 22, fontWeight: FontWeight.w600,
    ))
);
row.add(button);
row.add(PositionComponent(size: Vector2(20,0)));  // gap
row.add(TextComponent(text: 'Two',)
  ..textRenderer = TextPaint(
      style: const TextStyle(fontSize: 32, fontWeight: FontWeight.w800, color: Colors.yellow
      ))
);

I'm sure there are lots of things i didn't think of and which need to be considered.
But hopefully it's a start.

rivella50 · 2022-09-30T06:11:09Z

Now supports a constant gap between the children which can be changed dynamically.

/// Super class for [ComponentRow] and [ComponentColumn]
abstract class LayoutComponent extends PositionComponent with HasGameRef {
  LayoutComponent(this.direction, this.mainAxisAlignment, this._gap);
  final Direction direction;
  final MainAxisAlignment mainAxisAlignment;

  /// gap between components
  double _gap;

  set gap(double gap) {
    _gap = gap;
    layoutChildren();
  }

  double get gap => _gap;

  @override
  Future<void>? add(Component component) {
    assert(
    component is PositionComponent,
    "The added component has to be a child of PositionComponent",
    );
    (component as PositionComponent).size.addListener(() {
      layoutChildren();
    });

    component.mounted.then((_) => layoutChildren());
    return super.add(component);
  }

  @override
  void remove(Component component) {
    assert(
    contains(component),
    "This component is not a child of this class",
    );
    (component as PositionComponent).size.removeListener(layoutChildren);

    super.remove(component);
    // hack which needs to be resolved
    // https://github.com/flame-engine/flame/issues/1956
    Future.delayed(const Duration(milliseconds: 50), () {
      layoutChildren();
    });
  }

  @protected
  void layoutChildren();
}

/// Allows laying out children in a row by defining a [MainAxisAlignment] type.
/// A relayout is performed when
///  - a new child is added
///  - an existing child changes its size
///  - the [gap] parameter is changed
class ComponentRow extends LayoutComponent {
  ComponentRow({
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    double gap = 0.0,
  }) : super(Direction.horizontal, mainAxisAlignment, gap);

  @override
  void layoutChildren() {
    final list = children.whereType<PositionComponent>().toList();
    Vector2 currentPosition = Vector2.zero();
    double componentsWidth =
        list.fold(0, (previousValue, element) => previousValue + element.width);
    double gapWidth = gap * (list.length - 1);
    final widthAvailable = size.x != 0.0
        ? size.x - absoluteTopLeftPosition.x
        : gameRef.canvasSize.x - absoluteTopLeftPosition.x;

    if (mainAxisAlignment == MainAxisAlignment.start) {
      for (var child in list) {
        child.position = Vector2(currentPosition.x, currentPosition.y);
        currentPosition.x += (child.width + gap);
      }
    } else if (mainAxisAlignment == MainAxisAlignment.end) {
      for (var child in list.reversed) {
        currentPosition.x -= (child.width + gap);
        child.position = Vector2(currentPosition.x, currentPosition.y);
      }
    } else if (mainAxisAlignment == MainAxisAlignment.spaceBetween) {
      final freeSpacePerComponent =
          (widthAvailable - componentsWidth - gapWidth) / list.length;
      for (var child in list) {
        child.position = Vector2(currentPosition.x, currentPosition.y);
        currentPosition.x += (freeSpacePerComponent + child.width + gap);
      }
    } else if (mainAxisAlignment == MainAxisAlignment.spaceEvenly) {
      final freeSpacePerComponent =
          (widthAvailable - componentsWidth - gapWidth) / (list.length + 2);
      currentPosition.x += freeSpacePerComponent;
      for (var child in list) {
        child.position = Vector2(currentPosition.x, currentPosition.y);
        currentPosition.x += (freeSpacePerComponent + child.width + gap);
      }
    } else if (mainAxisAlignment == MainAxisAlignment.spaceAround) {
      final freeSpacePerComponent =
          (widthAvailable - componentsWidth - gapWidth) / (list.length + 1);
      currentPosition.x += freeSpacePerComponent / 2;
      for (var child in list) {
        child.position = Vector2(currentPosition.x, currentPosition.y);
        currentPosition.x += (freeSpacePerComponent + child.width + gap);
      }
    } else if (mainAxisAlignment == MainAxisAlignment.center) {
      final freeSpace = widthAvailable - componentsWidth - gapWidth;
      currentPosition.x += freeSpace / 2;
      for (var child in list) {
        child.position = Vector2(currentPosition.x, currentPosition.y);
        currentPosition.x += (child.width + gap);
      }
    }
  }
}

enum Direction { horizontal, vertical }

To be used like this:

row = ComponentRow(mainAxisAlignment: MainAxisAlignment.center, gap: 20.0)
  //..size = Vector2(500, 200)
  ..position = Vector2(50,50);
add(row);
row.add(
  TextComponent(text: 'One',)
    ..textRenderer = TextPaint(
        style: const TextStyle(fontSize: 22, fontWeight: FontWeight.w600,
    ))
);
row.add(button);
//row.add(PositionComponent(size: Vector2(20,0)));
row.add(TextComponent(text: 'Two',)
  ..textRenderer = TextPaint(
      style: const TextStyle(fontSize: 32, fontWeight: FontWeight.w800, color: Colors.yellow
      ))
);

Future.delayed(const Duration(milliseconds: 2200), () {
  row.gap = 50;
});

alestiago · 2022-10-01T14:09:58Z

Can we rename the Component to be RowComponent instead of ComponentRow?

That way it follows the current naming convention.

rivella50 · 2022-10-01T14:48:49Z

@alestiago Done

In order to get notified about a change in a parent's children this new function will be called now. This feature will help simplifying e.g. the implementation of issue #1944 (Row and Column components).

mrbeardad · 2023-07-15T04:30:43Z

Is this feature available?

rivella50 · 2023-07-15T05:24:24Z

@mrbeardad Not really. At the moment there's only AlignComponent available, where additional layout components shall be added later.

HaiboLee · 2023-08-01T03:22:16Z

Waiting for use now....

NashIlli · 2024-01-05T16:45:00Z

interesting... +1

livtanong · 2025-02-20T13:17:18Z

Hi all! I'd like take a crack at this if you don't mind. I'm taking a look at the old PR #1971

Before I start working on this, may I ask if @spydon and @st-pasha have changed their minds regarding the sizing question? Specifically this question: #1971 (review)

Especially considering the implementation part of #2302

LayoutComponent would rely on the onParentResize lifecycle method (#1421).

spydon · 2025-02-20T13:26:01Z

Hi all! I'd like take a crack at this if you don't mind. I'm taking a look at the old PR #1971

Of course!

Before I start working on this, may I ask if @spydon and @st-pasha have changed their minds regarding the sizing question? Specifically this question: #1971 (review)

I think that we can do like Pasha said, that the first version can just have a fixed size. What do you think?

livtanong · 2025-02-20T13:46:34Z

I've actually implemented something similar in the project I'm working on. Started out trying to make the size respond to the children's size. It got so messy, I gave up😅 I guess what I'm trying to say is: I agree that the initial version should have an explicitly defined size.

I do, however, think there is value in having a convenience method for returning the theoretical size of the component, if it were to grow (or shrink) to accommodate its children. i.e. the size of the rectangle if you called rect.expandToInclude() on all the PositionComponent children. This way, the user can still resize the component after the fact imperatively if needed. It just won't be automatic. What do you think?

spydon · 2025-02-23T23:30:21Z

@livtanong you can listen to the transforms of the children and size accordingly, I don't think it's worth providing a manual way for the user to do it. But as I said, we can implement this feature in a later PR and just have a static size to begin with. :)

livtanong · 2025-02-24T04:23:42Z

@spydon alrighty, I'll remove the convenience method. I'm not sure what you mean by listening to the transforms of the children, but we can discuss that when the time comes to implement shrink-wrapping the layout component.

spydon · 2025-02-24T05:09:07Z

@livtanong basically:

for (child in children) {
  child.transform.addListenener( // or child.size.addListener
    () => // Do changes
  );
}

rivella50 added the enhancement label Sep 27, 2022

erickzanardo moved this to Backlog in VGV Open Source 🦄 🧙🌟 Sep 28, 2022

erickzanardo added this to VGV Open Source 🦄 🧙🌟 Sep 28, 2022

This was referenced Sep 30, 2022

Add Component.removed #1956

Closed

feat: Draft for new Layout components Row and Column #1971

Closed

st-pasha assigned rivella50 Sep 30, 2022

st-pasha mentioned this issue Sep 30, 2022

Add Component.onChildrenChanged() lifecycle method #1973

Closed

rivella50 mentioned this issue Oct 1, 2022

feat: Adding onChildrenChanged #1976

Merged

6 tasks

tomarra removed this from VGV Open Source 🦄 🧙🌟 Oct 26, 2023

spydon assigned livtanong and unassigned rivella50 Feb 20, 2025

livtanong linked a pull request Feb 21, 2025 that will close this issue

feat: Layout Components #3507

Open

6 tasks

livtanong mentioned this issue Feb 25, 2025

LayoutComponent shrink wrapping #3509

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Row and Column for Flame Components #1944

Row and Column for Flame Components #1944

rivella50 commented Sep 27, 2022 •

edited

Loading

spydon commented Sep 27, 2022

rivella50 commented Sep 27, 2022

erickzanardo commented Sep 27, 2022

rivella50 commented Sep 29, 2022 •

edited

Loading

rivella50 commented Sep 30, 2022 •

edited

Loading

alestiago commented Oct 1, 2022

rivella50 commented Oct 1, 2022

mrbeardad commented Jul 15, 2023

rivella50 commented Jul 15, 2023

HaiboLee commented Aug 1, 2023

NashIlli commented Jan 5, 2024

livtanong commented Feb 20, 2025

spydon commented Feb 20, 2025

livtanong commented Feb 20, 2025

spydon commented Feb 23, 2025

livtanong commented Feb 24, 2025

spydon commented Feb 24, 2025

Row and Column for Flame Components #1944

Row and Column for Flame Components #1944

Comments

rivella50 commented Sep 27, 2022 • edited Loading

Problem to solve

Proposal

spydon commented Sep 27, 2022

rivella50 commented Sep 27, 2022

erickzanardo commented Sep 27, 2022

rivella50 commented Sep 29, 2022 • edited Loading

rivella50 commented Sep 30, 2022 • edited Loading

alestiago commented Oct 1, 2022

rivella50 commented Oct 1, 2022

mrbeardad commented Jul 15, 2023

rivella50 commented Jul 15, 2023

HaiboLee commented Aug 1, 2023

NashIlli commented Jan 5, 2024

livtanong commented Feb 20, 2025

spydon commented Feb 20, 2025

livtanong commented Feb 20, 2025

spydon commented Feb 23, 2025

livtanong commented Feb 24, 2025

spydon commented Feb 24, 2025

rivella50 commented Sep 27, 2022 •

edited

Loading

rivella50 commented Sep 29, 2022 •

edited

Loading

rivella50 commented Sep 30, 2022 •

edited

Loading