flutter/flame
1
0
Fork 0
mirror of https://github.com/flame-engine/flame.git synced 2025-10-30 08:27:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add advanced button component (#2742)

Browse Source 
New button with support for multiple states:
<img width="278" alt="image"
src="https://github.com/flame-engine/flame/assets/18004353/041c1105-8991-4976-b1a2-0553c149ec4e">
This commit is contained in:
Denis Gladky
2023-10-10 22:43:28 +03:00
committed by GitHub
parent cccae2e147
commit 97fff0ed2b
9 changed files with 1098 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
examples/lib/stories/input/advanced_button_example.dart Normal file
View File

@ -0,0 +1,125 @@
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame/palette.dart';
import 'package:flutter/painting.dart';
class AdvancedButtonExample extends FlameGame {
static const String description =
'''This example shows how you can use a button with different states''';
@override
Future<void> onLoad() async {
final defaultButton = DefaultButton();
defaultButton.position = Vector2(50, 50);
defaultButton.size = Vector2(250, 50);
add(defaultButton);
final disableButton = DisableButton();
disableButton.isDisabled = true;
disableButton.position = Vector2(400, 50);
disableButton.size = defaultButton.size;
add(disableButton);
final toggleButton = ToggleButton();
toggleButton.position = Vector2(50, 150);
toggleButton.size = defaultButton.size;
add(toggleButton);
}
}
class ToggleButton extends ToggleButtonComponent {
@override
Future<void> onLoad() async {
super.onLoad();
defaultLabel = TextComponent(
text: 'Toggle button',
textRenderer: TextPaint(
style: TextStyle(
fontSize: 24,
color: BasicPalette.white.color,
),
),
);
defaultSelectedLabel = TextComponent(
text: 'Toggle button',
textRenderer: TextPaint(
style: TextStyle(
fontSize: 24,
color: BasicPalette.red.color,
),
),
);
defaultSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(0, 200, 0, 1));
hoverSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(0, 180, 0, 1));
downSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(0, 100, 0, 1));
defaultSelectedSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(0, 0, 200, 1));
hoverAndSelectedSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(0, 0, 180, 1));
downAndSelectedSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(0, 0, 100, 1));
}
}
class DefaultButton extends AdvancedButtonComponent {
@override
Future<void> onLoad() async {
super.onLoad();
defaultLabel = TextComponent(text: 'Default button');
defaultSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(0, 200, 0, 1));
hoverSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(0, 180, 0, 1));
downSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(0, 100, 0, 1));
}
}
class DisableButton extends AdvancedButtonComponent {
@override
Future<void> onLoad() async {
super.onLoad();
disabledLabel = TextComponent(text: 'Disabled button');
defaultSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(0, 255, 0, 1));
disabledSkin = RoundedRectComponent()
..setColor(const Color.fromRGBO(100, 100, 100, 1));
}
}
class RoundedRectComponent extends PositionComponent with HasPaint {
@override
void render(Canvas canvas) {
canvas.drawRRect(
RRect.fromLTRBAndCorners(
0,
0,
width,
height,
topLeft: Radius.circular(height),
topRight: Radius.circular(height),
bottomRight: Radius.circular(height),
bottomLeft: Radius.circular(height),
),
paint,
);
}
}