ikbendewilliam / flutter_flame_architecture

flutter_flame_architecture

Use flutter(like) widgets inside Flame. Zoom, Scroll, Wrap, Grid, SafeArea, ... You can use them all in combination with flame thanks to this intuitive package!

Examples

Basics

Game development has some differences from normal Flutter development. A big difference is the build method is executed multiple times a second (fps). If you need to do calculations etc you can do this in the update function, that way if it takes longer, the UI is not interupted.

Another difference is the drawing on a canvas. Everything is drawn using a canvas with coordinates. Using the FlameWidget from this package you can use some helper methods like bounds, etc.

Contribution

Obviously contribution is encouraged, even if it's just by adding issues with ideas to further expand this package

Goal of the package

To support in the development of games using Flutter and Flame

Flame gives you the platform to develop games with Flutter, but it doesn't feel like Flutter anymore. The issue lies in the lack of widgets and existing structure.

This package attempts to fix this.

Next steps

To improve the game dev experience in Flutter/Flame, I'm planning on creating a template project. This would include admob, firebase, basic screens (main menu, etc), a clear folder structure, etc. The idea is to first develop a game with this package and then to strip the game to its essentials.

Progress

Redeveloping default Flutter widgets (with basic functionality) like:

• Center
• Column
• Container
• Expanded
• GestureDetector
• Padding
• Positioned
• Row
• SizedBox
• Spacer
• Stack
• Text
• Image (FlameSprite)
• SingleChildScrollView (note Both horizontal and vertical are supported at the same time!)
• Button (For now a simplistic implementation is added)
• GridView
• IsometricGridView
• SafeArea
• Builder
• ValueListenableBuilder
• Wrap
• ChangeNotifierProvider
• FlameScrollController

Extend Flame functionality with quality of life improvements

• Canvas widget (draw on the canvas)
• Zoom widget (child is zoomable using gestures or programmatically)
• Automate SpriteManager (Use the FlameSprite Widget with fileName)
• Navigation
• Dialogs

BackPress for navigator:

MaterialApp(
  home: WillPopScope(
    onWillPop: () async {
      FlameNavigator.pop();
      return false;
    },
    child: GameWidget(
      game: gameManager,
    ),
  ),
),

Examples

• Build and put on GitHub pages
• Basic example (pong)
• Navigation
• SingleChildScrollView
• GridView
• IsometricGridView
• Button
• Dialogs
• Zoom
• Wrap
• FlameValueListenableBuilder
• FlameCanvas(that updates)
• FlameChangeNotifierProvider with a viewmodel
• FlameScrollController

Code documentation

• Center
• Column
• Container
• Expanded
• GestureDetector
• Padding
• Positioned
• Row
• SizedBox
• Spacer
• Stack
• Text
• Image (FlameSprite)
• Button
• Canvas widget (draw on the canvas)
• Automate SpriteManager (Use the FlameSprite Widget with fileName)
• Navigation
• SingleChildScrollView
• Dialogs
• ValueListenableBuilder
• Wrap
• FlameChangeNotifierProvider
• FlameScrollController