Candy for You: Design of A Flutter Interaction Engine

Best practice of Flutter from Alibaba’s Xianyu tech team

Image for post
Image for post

What Is Candy?

Background

Thinking

Flame or Independent Design

Candy Engine Design

Framework Design

Image for post
Image for post
Image for post
Image for post

Game System

Image for post
Image for post

Lifecycle

Image for post
Image for post

Rendering System

Image for post
Image for post

GUI System

final GUIObject gui = IdleFishGame.createGUI(
'gui',
child: GestureDetector(
child: Container(
width: 100.0,
height: 60.0,
decoration: BoxDecoration(
color: const Color(0xFFA9CCE3),
borderRadius: const BorderRadius.all(
Radius.circular(10.0),
),
),
child: const Center(
child: Text(
'Flutter UI example',
style: TextStyle(
fontSize: 14.0,
),
),
),
),
behavior: HitTestBehavior.opaque,
onTap: () {
print('UI is clicked');
},
),
position: Position(100, 100),
);
game.scene.addChild(gui);

Event System

Image for post
Image for post

Other Subsystems

Image for post
Image for post

Conclusion

Alibaba Tech

First-hand & in-depth information about Alibaba's tech innovation in Artificial Intelligence, Big Data & Computer Engineering. Follow us on Facebook!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store