實戰Flutter程式開發 - Roulette Wheel Selection

　　輪盤賭選擇 ( Roulette Wheel Selection ) 策略是最基本的選擇策略之一，在群體中的個體被選中的概率與個體相應的適應度函式的值成正比，且此選擇方式常出現在賭場，而此範例程式主要是藉由下列三個部份來實作類似輪盤賭選擇 ( Roulette Wheel Selection )的功能。　

1. 　　繪製輪盤與指針畫面 　　
2. 　　建立隨機的指針旋轉動畫 　　　　 　
3. 　　動態顯示選擇結果

1. 　　繪製輪盤與指針畫面　　

　　主要是藉由繼承 (extends) CustomePainter 類別建立新的類別並透過 Canvas 內部封裝繪製圖形的 API 分別建立指針與輪盤組件。

　　1-1.　　建立指針組件　　　　　　

class DrawPointer extends CustomPainter {
　　...
　　@override
　　void paint(Canvas canvas, Size size) { 
　　　　// 1. Set the starting position of the drawing graphics on the canvas.
　　　　centerOffst = Offset(size.width / 2, size.height / 2);   
　　　　canvas.translate(centerOffst.dx, centerOffst.dy);
　　　　// 2. The angle by which the pointer is rotated before drawing.
　　　　canvas.rotate(getRadianFromAngle(angle));
　　　　// 3. Crate a rectangle object to define the range of the drawing arc.
　　　　centerSize = Size(size.width / 10, size.height / 5);
　　　　var rect = Rect.fromLTWH(0 - centerSize.width / 2, 0 - centerSize.width / 2, centerSize.width, centerSize.width); 
　　
　　　　// 4. Use Path object and Paint object to draw the shape and color of pointer
　　　　canvas.drawPath(
　　　　　　Path()
　　　　　　　　..arcTo(rect, getRadianFromAngle(30), getRadianFromAngle(300), false)
　　　　　　　　..relativeLineTo(centerSize.height, centerSize.width / 30)
　　　　　　　　..relativeLineTo(0, - 10 * centerSize.width / 30)
　　　　　　　　..relativeLineTo( centerSize.width, 17 * centerSize.width / 30)
　　　　　　　　..relativeLineTo(-centerSize.width, 17 * centerSize.width / 30 )
　　　　　　　　..relativeLineTo(0, -10 * centerSize.width / 30)
　　　　　　　　..close(),
　　　　　　Paint()
　　　　　　　　..isAntiAlias = true
　　　　　　　　..style = PaintingStyle.fill
　　　　　　　　..shader = LinearGradient(
　　　　　　　　　　begin: Alignment.bottomRight, 
　　　　　　　　　　end: Alignment.topLeft,
　　　　　　　　　　colors:  [Colors.blueGrey.withAlpha(200),  Colors.cyan.withAlpha(200)],
　　　　　　　　　　tileMode: TileMode.mirror,
　　　　　　　　).createShader(rect),
　　　　);
    
　　　　canvas.drawCircle(Offset.zero,  
　　　　　　　　　　centerSize.width * 0.2, 
　　　　　　　　　　Paint()
　　　　　　　　　　　　..color=Colors.black
　　　　　　　　　　　　..style = PaintingStyle.fill
　　　　　　　　);
　　　　canvas.drawCircle(Offset.zero,
　　　　　　　　　　centerSize.width * 0.15, 
　　　　　　　　　　Paint()
　　　　　　　　　　　　..color=Colors.red
　　　　　　　　　　　　..style = PaintingStyle.fill
　　　　　　　　);　　　
　　}
}

　　1-2.　　建立輪盤組件　　　　

void drawRouletteWheel(Canvas canvas, Size size) {
　　double startAngle = 0, sweepAngle = 0;   
　　// 1. Create a rectagle object to define the range and positio of the drawing pie chart.
　　Rect rect = Offset(wheelRectStartPointX, wheelRectStartPointY) & Size(diameter, diameter);
 
　　for(int repeat = 0; repeat < itemRepeat; repeat++){
　　　　itemPercent.keys.toList().forEach((element) {
　　　　　　defaultPaint.color = itemColor.containsKey(element) ?  itemColor[element]!:Colors.white; 
　　　　　　// 2. Draw an equal-scale pie chart according to the project scale.
　　　　　　sweepAngle = 360 * itemPercent[element]! / itemRepeat;
　　　　　　canvas.drawArc(rect, getRadianFromAngle(startAngle),  getRadianFromAngle(sweepAngle), true, defaultPaint);
        
　　　　　　// 3. Use List class to store the start and the end radian of each sector.
　　　　　　disPercent.add(WheelTextPosition(
　　　　　　　　title:element, 
　　　　　　　　startRadian:getRadianFromAngle(startAngle), 
　　　　　　　　endRadian:getRadianFromAngle(sweepAngle)
　　　　　　));　
        
　　　　　　startAngle = startAngle + sweepAngle;
　　　　　
　　　　});
　　}
}

void drawWheelText(Canvas canvas, List<WheelTextPosition> disText){
　　
　　// 1. Set the starting position of the title at an angle of 0 degrees.
　　canvas.translate(wheelRectStartPointX + radius , wheelRectStartPointY + radius);
　　double radian = 0.0;
　　for (var element in disText) {
　　　　// 2. calculate the starting radian of the title on the side of the wheel
　　　　radian = calculateStartRadianForString(element);
　　　　// 3. Add the calculated radian by 90 degrees 
　　　　radian += textRotateRadian;
　　　　for (int i = 0; i< element.title.length; i++){
　　　　　　canvas.save();
　　　　　　
　　　　　　// 4. Rotate each character of the title in order according to the starting radian. 
　　　　　　radian = drawWheelCharWithAngle(canvas,  element.title[i], radian, lastradian );
　　　　　 
　　　　　　canvas.restore();
　　　　}
　　}
}

 double calculateStartRadianForString( WheelTextPosition whellText ) {  
    
　　// 1. Generate title length.
　　var _textPainter = TextPainter(
　　　　　　　　textDirection: TextDirection.ltr,
　　　　　　　　text: TextSpan(text: whellText.title, style:textStyle,),
　　　　　　);
　　_textPainter.layout(minWidth: 0,  maxWidth: double.maxFinite);
 
　　// 2. Caculate arc length based on ratio of title to raidus.
　　double stringWidthForRadian =  math.asin( _textPainter.width / raduis); 
  
　　return whellText.startRadian + (whellText.sweepRadian - stringWidthForRadian) / 2 ;
 
}

double drawWheelCharWithAngle(Canvas canvas, String disChar, double curRadian){
　
　　// 1. Generate character length.
　　var _textPainter = TextPainter(
　　　　textDirection: TextDirection.ltr,
　　　　text: TextSpan(text: disChar, style:textStyle,),
　　);    
　　_textPainter.layout(minWidth: 0,  maxWidth: double.maxFinite);
　　// 2. Calculate character print position.
　　double radiusWithHeight = radius +_textPainter.height;
　　double shiftPointX = radiusWithHeight * math.sin(curRadian);  // sin(90):1
　　double shiftPointY = radiusWithHeight * math.cos(curRadian) ; // cos(90):0
　　// 3. adjust the print starting position of the canvas.
　　canvas.translate(shiftPointX,  -shiftPointY);
　　// 4. Caculate radian based on ratio of character to raidus.  
　　curRadian = (curRadian +  math.asin( _textPainter.width / radius));
　　
　　// 5. Rotate the canvas by arc
　　canvas.rotate(curRadian);
　　_textPainter.paint(canvas, Offset.zero);
　　return curRadian;
}

2.　　建立隨機的指針旋轉動畫 　　　　

　　　　為了讓指針組件能夠產生旋轉的動畫，因此需要建立可變組件 (State fullWidget) 並混入 (with) TickerProviderStateMixin 類別來建立包含計時器 (TickerProvider) 的可變狀態組件並運用 AnimationController 類別進行動畫控制及使用 CurvedAnimation 與 Tween 類別來定義旋轉動畫的行為；最後使用 Gesture Detector 類別來接收使用者點擊畫面中的位置並判斷點擊位置是否在指針的圓弧位置。

class _WheelPointerState extends State<WheelPointerWidget> with TickerProviderStateMixin {
　　Animation<double>? _animation;
　　AnimationController? _controller;
　　Tween<double>? _rotationTween;   
　　int pos = 0;
　　bool isSelection = false; 
  
　　@override
　　void initState() {
　　　　super.initState(); 
　　　　_controller = AnimationController(vsync: this, duration: widget.duration); 
　　　　_animation = CurvedAnimation(parent: _controller!, curve: Curves.fastLinearToSlowEaseIn);
　　　　_rotationTween = Tween<double>(begin:  0, end: 0);
　　　　_animation = _rotationTween!.animate(_animation!)
　　　　　　..addListener(() {
　　　　　　　　setState(() {});
　　　　　　})
　　　　　　..addStatusListener((status) {
　　　　　　　　if (status == AnimationStatus.completed){
　　　　　　　　　　isSelection = false;
　　　　　　　
　　　　　　　　　　// 1. Notify of selected radians when animation is done.
　　　　　　　　　　widget.notifyCallbackFunc(isSelection, getRadianFromAngle(pos.toDouble()));
　　　　　　}
　　　　});
　　}
 
　　@override 
　　void didUpdateWidget (WheelPointerWidget oldWidget){
　　　　super.didUpdateWidget(oldWidget);
　　　　_controller!.duration = widget.duration;    
　　}
　　@override
　　void dispose() {
　　　　_controller!.dispose();
　　　　super.dispose();
　　}
  
　　void startAnimation() {    
　　　　isSelection = true;
　　　　widget.notifyCallbackFunc(isSelection, 0);
　　　　_controller!.reset();
　　　　// 2. Set the last end of angle as the current starting angle.
　　　　_rotationTween!.begin = pos.toDouble();
　　　　// 3. Generate a random angle from 0 to 360 degrees.  
　　　　pos = math.Random().nextInt(360);
　　　　// 4. Multiply the preset number of rotations by 360 plus a random value.
　　　　_rotationTween!.end = widget.numberOfRevolutions * 360.0 + pos;
     
　　　　// 5. Starts running this animation forward 
　　　　_controller!.forward(); 
　　}
　　@override 
　　Widget build(BuildContext context) {   
　　　　var drawPointer = DrawPointer(_animation!.value);
　　　　return GestureDetector( 
　　　　　　child: CustomPaint(
　　　　　　　　size: widget.canvasSize,
　　　　　　　　painter: drawPointer
　　　　　　),
　　　　　　onTapDown: (tapDownDetails) {
       
　　　　　　　　// 6. if the animations has been completed and determine the click position.
　　　　　　　　if(!isSelection && drawPointer.isclick(tapDownDetails.localPosition)){               
　　　　　　　　　　startAnimation();                
　　　　　　　　}
　　　　　　},
　　　　);
　　}
}

3.　　動態顯示選擇結果

　　　　最後在指針動畫結束時需要依據指針的角度換算成弧度並以此確認選擇項目後顯示項目名稱，但由於完成上述行為需要將各組件態進行跨組件因此可使用 provider 套件來簡化實作流程。　　

　3-1.　　建立跨組件的共享數據類別

// 1. Build a generic InheritedWidget to hold state that needs to be shared across components.
class ShareDataInheritedWidget<T> extends InheritedWidget {
　　const ShareDataInheritedWidget({
　　　　　　　　Key? key,
　　　　　　　　required this.prvObj,
　　　　　　　　required Widget child
　　}) : super(key: key, child: child);
　　final T prvObj;
　　// 2. Define a convenience method to facilitate the widgets in the subtree to obtain shared data.
　　static ShareDataInheritedWidget? of<T>(BuildContext context){
　　　　final ShareDataInheritedWidget? inheritedObj = context.dependOnInheritedWidgetOfExactType<ShareDataInheritedWidget<T>>();
　　　　assert(inheritedObj != null, "No this object found in context!");
　　　　return inheritedObj;
　　}
　　@override
　　bool updateShouldNotify(ShareDataInheritedWidget<T> oldWidget) {
　　　　// 3. This callback determines whether to notify the datadependent widgets in the subtree to rebuild when the data changes.
　　　　return  prvObj != oldWidget.prvObj;
　　}
}

　　

　　3-2.　　建立跨組件的事件通知類別

class ChangeDataNotify<T> extends ChangeNotifier {　　
　　ChangeDataNotify(this.hookData);
　　late T hookData;
　　void changeDataFunc(T changeData ){
　　　　hookData = changeData;
　　　　// 1. Notify the listeners to rebuild the update state of the InheritedWidget.
　　　　notifyListeners();
　　}
　　T getDataFunc(){
　　　　return hookData;
　　}
}

　　　

　　3-3.　　建立 RouletteWheelWidget 組件

class DisplayTitleWidget extends StatelessWidget {
　　const DisplayTitleWidget ({Key? key}):super(key: key);
　　@override 
　　Widget build(BuildContext context) {
　　　　// 1. ChangeDataNotify is provided to widgets in our app through the ChangeNotifierProvider declaration at the top. 
　　　　return Consumer<ChangeDataNotify<String>>(
　　　　　　builder: (context, obj, child) {
　　　　　　　　// 2.  Use ChangeDataNotify widget  here, without rebuilding every time.
　　　　　　　　return Text(obj.getDataFunc(), 
　　　　　　　　　　style: const TextStyle(
　　　　　　　　　　　　color: Colors.brown, 
　　　　　　　　　　　　fontSize: 24, 
　　　　　　　　　　　　fontWeight: FontWeight.normal,
　　　　　　　　　　　　fontStyle: FontStyle.normal,
　　　　　　　　　　　　decoration: TextDecoration.none,
　　　　　　　　　　),
　　　　　　　　);
　　　　　　}
　　　　);
　　}
}

class RouletteWheelWidget extends StatefulWidget  {
　　const RouletteWheelWidget({
　　　　Key? key, 
　　　　required this.radius, 
　　　　required this.textStyle,
　　　　required this.itemRepeat,
　　　　required this.itemPercent, 
　　　　required this.itemColor,    
　　}) : super(key: key);
　　final double radius;
　　final TextStyle textStyle;
　　final int itemRepeat;   
　　final Map<String, double> itemPercent;
　　final Map<String, Color> itemColor;
　　@override 
　　State<RouletteWheelWidget> createState() => _RouletteWheelState();
}

class _RouletteWheelState extends State<RouletteWheelWidget> {
　　// 1. Create uniquely identify elements for access by other object associated with elements.
　　final GlobalKey <WheelWidgetState> _wheelWidgetKey = GlobalKey();
  
　　WheelWidget? wheelWidget;
　　String title = "未知"; 
　　void notifyResultFunc(bool isSelection ,double radian) { 
　　　　title = isSelection ? "選擇中" : _wheelWidgetKey.currentState!.getTitleFromRadian(radian);
　　　　// 2. Use Provider.of with the listen parameter set to false without rebuild ChangeDataNotify<String> wedget.
　　　　Provider.of<ChangeDataNotify<String>>(context, listen: false).changeDataFunc(title);   
　　}
　　@override
　　Widget build(BuildContext context) {
    
　　　　wheelWidget ??=  WheelWidget ( 
　　　　　　　　　　key: _wheelWidgetKey,
　　　　　　　　　　radius: widget.radius,
　　　　　　　　　　canvasSize: Size(widget.radius*2, widget.radius*2),
　　　　　　　　　　itemRepeat: widget.itemRepeat,
　　　　　　　　　　itemPercent: widget.itemPercent,
　　　　　　　　　　itemColor:  widget.itemColor,
　　　　　　　　　　textStyle:  widget.textStyle,
　　　　);  
　　　　return Column(
　　　　　　　　　　mainAxisAlignment: MainAxisAlignment.center,
　　　　　　　　　　mainAxisSize: MainAxisSize.min,
　　　　　　　　　　children:[ 
      
　　　　　　　　　　　　// 3. Use ShareDataInheritedWidget<String> to share title with DisplayTitleWidget widget.         
　　　　　　　　　　　　ShareDataInheritedWidget<String>(
　　　　　　　　　　　　　　prvObj: title,
　　　　　　　　　　　　　　child: const DisplayTitleWidget(),              
　　　　　　　　　　　　),
　　　　　　　　　　　　SizedBox(
　　　　　　　　　　　　　　height: widget.textStyle.fontSize! * 2,
　　　　　　　　　　　　),        
　　　　　　　　　　　　Stack (                
　　　　　　　　　　　　　　children:[                   
　　　　　　　　　　　　　　　　wheelWidget!,                           
　　　　　　　　　　　　　　　　WheelPointerWidget(
　　　　　　　　　　　　　　　　　　canvasSize: Size(widget.radius * 2, widget.radius * 2),
　　　　　　　　　　　　　　　　　　numberOfRevolutions: 3,
　　　　　　　　　　　　　　　　　　duration: const Duration(seconds: 7),
　　　　　　　　　　　　　　　　　　notifyCallbackFunc:notifyResultFunc,
　　　　　　　　　　　　　　] 
　　　　　　　　　　),
　　　　　　　　]
　　　　);
　　}
}

4.　　各平台的執行結果

void main() => runApp(const RoulettWheelSelectionApp());
class RoulettWheelSelectionApp extends StatelessWidget {
　　const RoulettWheelSelectionApp({Key? key}):super(key: key);
　　@override
　　Widget build (BuildContext context) {
　　　　return  MaterialApp(
　　　　　　home: Scaffold(
　　　　　　　　body: Center(
　　　　　　　　　　// 1. Use ChangeNotifierProvider widget of provider package to provides an instance of a ChangeNotifier. 
　　　　　　　　　　child: ChangeNotifierProvider(
　　　　　　　　　　　　// 2. Create ChangeDataNotify class to keep private state.
　　　　　　　　　　　　create: (context) =>  ChangeDataNotify<String>("未選擇"),      
　　　　　　　　　　　　// 3. Initialize RouletteWheelWidget class 
　　　　　　　　　　　　child:const RouletteWheelWidget(
　　　　　　　　　　　　　　radius: 150, 
　　　　　　　　　　　　　　textStyle: TextStyle(
　　　　　　　　　　　　　　　　fontSize: 20,
　　　　　　　　　　　　　　　　fontWeight: FontWeight.bold,
　　　　　　　　　　　　　　　　color: Colors.black45
　　　　　　　　　　　　　　),
　　　　　　　　　　　　　　itemRepeat: 2,
　　　　　　　　　　　　　　itemPercent: {"第一項":0.4, "第二項":0.3,"第三項": 0.2, "第四項":0.1}, 
　　　　　　　　　　　　　　itemColor: {"第一項":Colors.green, "第二項":Colors.yellow ,"第三項": Colors.red, "第四項":Colors.brown},
　　　　　　　　　　　　), 
　　　　　　　　　　),
　　　　　　　　),
　　　　　　),
　　　　);
　　}
} 

　　4-1.　　Windows Desktop

　　4-2.　　Chrome Web

　　4-3.　　Linux APP (Ubuntu)

　　4-4.　　Android APP

GitHub : https://github.com/crosscode-software/roulette_wheel_selection

Pub.dev : https://pub.dev/packages/roulette_wheel_selection