Flutter Custom Draggable Grid

0

The goal of the application is to create a little game where the player can change from a grid position to another dragging.

This are the widgets that I'm using until now:

class Game extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sub Page'),
        backgroundColor: Colors.redAccent,
      ),
      body: new GridView.count(
        crossAxisCount: 5,
        children: new List<Widget>.generate(20, (index) {
          return new GridTile(
            child: new Card(
                color: Colors.blue.shade200,
                child: new Center(
                  //child: new Text('tile $index'),
                  child: Player(index),
                )
            ),
          );
        }),
      ),
    );
  }
} 


class Player extends StatelessWidget{


 int index = 0;

  Player(int index){
    this.index = index;

  }

  BoxDecoration _getBoxDecoration(){
    if(this.index == 0){
      return BoxDecoration(
        // lighter gradient effect
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors:  [
            Color(0x00000000),
            Color(0x00000000),
          ],
        ),
      );
    } else {
      return BoxDecoration(
        // lighter gradient effect
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors:  [
            Color(0x40068FFA),
            Color(0x4089ED91),
          ],
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4.0,
      child: Container(
        decoration: _getBoxDecoration(),
        // TODO: add child
      ),
    );
  }
}

And the result is:

enter image description here

The player must move, starting from the first position (index=0), must be able to move down or right. I don't know how to implement it, I should implement it using Drag & Drop or simply changing the grid position color?

The player must see the movement and receive some feedback when the movement ends. I don't know if is possible to implement it only catching the movement and changing the grid position color.

flutter
drag-and-drop
grid
draggable
asked on Stack Overflow Apr 22, 2020 by notarealgreal

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0