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:
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.
User contributions licensed under CC BY-SA 3.0