Component class

Components are the basic building blocks for a FlameGame.

Components are quite similar to widgets in Flutter, or to GameObjects in Unity. Any entity within the game can be represented as a Component, especially if that entity has some visual appearance, or if it changes over time. For example, the player, the enemies, flying bullets, clouds in the sky, buildings, rocks, etc -- all can be represented as components. Some components may also represent more abstract entities: effects, behaviors, data stores, groups.

Components are designed to be organized into a component tree, where every component belongs to a single parent and owns any number of children components. A Component must be added to the component tree in order for it to become fully operational. Typically, the FlameGame is the root of the component tree.

The components are added into the component tree using the add method, or addToParent; and then later can be removed using remove or removeFromParent. Note that neither adding nor removing are immediate, typically these operations complete by the next game tick.

Each component goes through several lifecycle stages during its lifetime, at each stage invoking certain user-defined "lifecycle methods":

  • onLoad when the component is first added into the tree;
  • onGameResize + onMount when done loading, or when the component is re-added to the component tree after having been removed;
  • onRemove if the component is later removed from the component tree.

The onLoad is only invoked once during the lifetime of the component, which means you can treat it as "async constructor". When onLoad is invoked, we guarantee that the game instance can be found via findGame, and that this game instance already has layout (i.e. knows the size of the canvas).

The onMount is invoked when the component is done loading, and when its parent is properly mounted. If a component is removed from the tree and later added to another component, the onMount will be called again. For every call to onMount there will be a corresponding call to onRemove.

While the component is mounted, the following user-overridable methods are invoked:

  • update on every game tick;
  • render after all components are done updating;
  • updateTree and renderTree are more advanced versions of the update and render callbacks, but they rarely need to be overridden by the user;
  • onGameResize every time the size game's Flutter widget changes.

The update and render are two most important methods of the component's lifecycle. On every game tick, first the entire component tree will be updated, and then all the components will be rendered.

You may also need to override containsLocalPoint if the component needs to respond to tap events or similar; the componentsAtLocation may also need to be overridden if you have reimplemented renderTree.



Component({Iterable<Component>? children, int? priority, ComponentKey? key})


children ComponentSet
The children components of this component.
no setter
debugColor Color
The color that the debug output should be rendered with.
getter/setter pair
debugCoordinatesPrecision int?
How many decimal digits to print when displaying coordinates in the debug mode. Setting this to null will suppress all coordinates from the output.
getter/setter pair
debugMode bool
Returns whether this Component is in debug mode or not. When a child is added to the Component it gets the same debugMode as its parent has when it is prepared.
getter/setter pair
debugPaint Paint
The debugColor represented as a Paint object.
no setter
debugTextPaint TextPaint
Returns a TextPaint object with the debugColor set as color for the text.
no setter
hasChildren bool
no setter
hashCode int
The hash code for this object.
no setterinherited
isLoaded bool
Whether this component has completed its onLoad step.
no setter
isLoading bool
Whether the component is currently executing its onLoad step.
no setter
isMounted bool
Whether this component is currently added to a component tree.
no setter
isMounting bool
no setter
isRemoved bool
Whether the component has been removed. Originally this flag is false, but it becomes true after the component was mounted and then removed from its parent. The flag becomes false again when the component is mounted to a new parent.
no setter
isRemoving bool
Whether the component is scheduled to be removed.
no setter
key ComponentKey?
A key that can be used to identify this component in the tree.
loaded Future<void>
A future that completes when this component finishes loading.
no setter
mounted Future<void>
A future that will complete once the component is mounted on its parent.
no setter
parent Component?
Who owns this component in the component tree.
getter/setter pair
priority int
Render priority of this component. This allows you to control the order in which your components are rendered.
getter/setter pair
removed Future<void>
A future that completes when this component is removed from its parent.
no setter
runtimeType Type
A representation of the runtime type of the object.
no setterinherited


add(Component component) FutureOr<void>
Schedules component to be added as a child to this component.
addAll(Iterable<Component> components) Future<void>
A convenience method to add multiple children at once.
addToParent(Component parent) FutureOr<void>
Adds this component as a child of parent (see add for details).
ancestors({bool includeSelf = false}) Iterable<Component>
An iterator producing this component's parent, then its parent's parent, then the great-grand-parent, and so on, until it reaches a component without a parent.
componentsAtLocation<T>(T locationContext, List<T>? nestedContexts, T? transformContext(CoordinateTransform, T), bool checkContains(Component, T)) Iterable<Component>
This is a generic implementation of componentsAtPoint; refer to those docs for context.
componentsAtPoint(Vector2 point, [List<Vector2>? nestedPoints]) Iterable<Component>
An iterable of descendant components intersecting the given point. The point is in the local coordinate space.
contains(Component c) bool
Whether the children list contains the given component.
containsLocalPoint(Vector2 point) bool
Checks whether the point is within this component's bounds.
containsPoint(Vector2 point) bool
Same as containsLocalPoint, but for a "global" point.
createComponentSet() ComponentSet
This method creates the children container for the current component. Override this method if you need to have a custom ComponentSet within a particular class.
descendants({bool includeSelf = false, bool reversed = false}) Iterable<Component>
Recursively enumerates all nested children.
findGame() FlameGame<World>?
Fetches the nearest FlameGame ancestor to the component.
findParent<T extends Component>({bool includeSelf = false}) → T?
Returns the closest parent further up the hierarchy that satisfies type=T, or null if no such parent can be found.
findRootGame() FlameGame<World>?
Fetches the root FlameGame ancestor to the component.
firstChild<T extends Component>() → T?
Returns the first child that matches the given type T, or null if there are no such children.
handleLifecycleEventAdd(Component parent) → LifecycleEventStatus
handleLifecycleEventMove(Component newParent) → LifecycleEventStatus
handleLifecycleEventRemove(Component parent) → LifecycleEventStatus
handleResize(Vector2 size) → void
lastChild<T extends Component>() → T?
Returns the last child that matches the given type T, or null if there are no such children.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
onChildrenChanged(Component child, ChildrenChangeType type) → void
This method will be invoked from lifecycle if child has been added to or removed from its parent children list.
onGameResize(Vector2 size) → void
Called whenever the size of the top-level Canvas changes.
onLoad() FutureOr<void>
Late initialization method for Component.
onMount() → void
Called when the component is added to its parent.
onParentResize(Vector2 maxSize) → void
Called whenever the parent of this component changes size; and also once before onMount.
onRemove() → void
Called right before the component is removed from the game.
propagateToChildren<T extends Component>(bool handler(T), {bool includeSelf = false}) bool
This method first calls the passed handler on the leaves in the tree, the children without any children of their own. Then it continues through all other children. The propagation continues until the handler returns false, which means "do not continue", or when the handler has been called with all children.
remove(Component component) → void
Removes a component from the component tree.
removeAll(Iterable<Component> components) → void
Removes all the children in the list and calls onRemove for all of them and their children.
removeFromParent() → void
Remove the component from its parent in the next tick.
removeWhere(bool test(Component component)) → void
Removes all the children for which the test function returns true.
render(Canvas canvas) → void
renderDebugMode(Canvas canvas) → void
renderTree(Canvas canvas) → void
setLoaded() → void
Used by the FlameGame to set the loaded state of the component, since the game isn't going through the whole normal component life cycle.
setMounted() → void
Used by the FlameGame to set the mounted state of the component, since the game isn't going through the whole normal component life cycle.
setRemoved() → void
Used by the FlameGame to set the removed state of the component, since the game isn't going through the whole normal component life cycle.
toString() String
A string representation of this object.
update(double dt) → void
This method is called periodically by the game engine to request that your component updates itself.
updateTree(double dt) → void
This method traverses the component tree and calls update on all its children according to their priority order, relative to the priority of the direct siblings, not the children or the ancestors.


operator ==(Object other) bool
The equality operator.

Static Properties

childrenFactory ComponentSetFactory
Component.childrenFactory is the default method for creating children containers within all components. Replace this method if you want to have customized (non-default) ComponentSet instances in your project.
getter/setter pair
staticGameInstance Game?
getter/setter pair