flutter 九宫格菜单_Flutter : 一个简单的九宫格抽奖实现

写在前面

用Flutter实现一个简单的九宫格抽奖

步骤

实现一个九宫格的页面

实现一个控制器用于控制抽奖开始

实现抽奖的动画

过程

定义数据类型

class SimpleLotteryValue {

SimpleLotteryValue(

{this.target = 0, this.isFinish = false, this.isPlaying = false});

/// 中奖目标

int target = 0;

bool isPlaying = false;

bool isFinish = false;

SimpleLotteryValue copyWith({

int target = 0,

bool isPlaying = false,

bool isFinish = false,

}) {

return SimpleLotteryValue(

target: target, isFinish: isFinish, isPlaying: isPlaying);

}

@override

String toString() {

return "target : $target , isPlaying : $isPlaying , isFinish : $isFinish";

}

}

定义控制器

class SimpleLotteryController extends ValueNotifier{

SimpleLotteryController() : super(SimpleLotteryValue());

/// 开启抽奖

///

/// [target] 中奖目标

void start(int target) {

// 九宫格抽奖里范围为0~8

assert(target >= 0 && target <= 8);

if (value.isPlaying) {

return;

}

value = value.copyWith(target: target, isPlaying: true);

}

void finish() {

value = value.copyWith(isFinish: true);

}

}

实现九宫格页面

class SimpleLotteryWidget extends Stateful