title: how to make a blue translucent overlay on the square by flame lib
body: <p>I want to create a word search game. I'm working on a flame library to do that. I am having a problem how can I make a blue translucent overlay on the square.
  I tried:</p>
  <pre><code>class Box2 extends PositionComponent {
    static const speed = 0.25;
    static const squareSize = 50.0;
  
  
  
    Box2({double size = 50}){
      height =size;
      width = size;
    }
  
    @override
    void render(Canvas c) {
      prepareCanvas(c);
      c.drawRect(Rect.fromLTWH(2, 2, width - 4, height - 4), PaletteEntry(Colors.green.withOpacity(0.5)).paint());
  
    }
  
    @override
    void update(double t) {
      super.update(t);
    }
  
    @override
    void onMount() {
      super.onMount();
      size.setValues(squareSize, squareSize);
      anchor = Anchor.center;
    }
  }
  
  class MyGame extends BaseGame with  PanDetector {
  
    bool running = true;
  
  
    var display =[
      [&quot;S&quot;,&quot;T&quot;,&quot;A&quot;,&quot;R&quot;,&quot;T&quot;],
      [&quot;S&quot;,&quot;U&quot;,&quot;A&quot;,&quot;R&quot;,&quot;I&quot;],
      [&quot;C&quot;,&quot;H&quot;,&quot;N&quot;,&quot;P&quot;,&quot;T&quot;],
      [&quot;I&quot;,&quot;K&quot;,&quot;N&quot;,&quot;R&quot;,&quot;0&quot;],
      [&quot;S&quot;,&quot;H&quot;,&quot;L&quot;,&quot;R&quot;,&quot;U&quot;],
    ];
  
    @override
    // TODO: implement size
    Vector2 get size =&gt; super.size;
  
     void generateBox(){
       double initialWidth =  (size[0]*1.1-(50*display.length))/2;
       double initialHeight =  (size[1]*1.1-(50*display.length))/2;
      for(int i=0 ;i&lt; display.length;i++){
        for(int j=0 ;j&lt; display.length;j++){
          add(Box(text:display[i][j])..position=
          Vector2(initialWidth +i.toDouble()*50, initialHeight+ j.toDouble()*50));
        }
      }
  
    }
  
    Future&lt;void&gt; onLoad() async {
      generateBox();
    }
  
    @override
    void onPanStart(DragStartInfo info) {
      super.onPanStart(info);
    }
  
    @override
    void onPanUpdate(DragUpdateInfo info) {
  
      final touchArea = RectExtension.fromVector2Center(
        center: info.eventPosition.game,
        width: 0,
        height: 0,
      );
  
      final handled = components.any((c) {
        if (c is PositionComponent &amp;&amp; c.toRect().overlaps(touchArea)) {
          if (c is Box) {
            debugPrint(&quot;remove&quot;);
  
            add(Box2()..y= c.y
              ..x =c.x);
          }
        
          return true;
        }
        return false;
      });
      debugPrint(&quot;onPanUpdate  ${info.delta.game}&quot;);
      super.onPanUpdate(info);
    }
  
    void onPanDown(DragDownInfo info) {
       debugPrint(&quot;Pandown&quot;);
  
       final touchArea = RectExtension.fromVector2Center(
        center: info.eventPosition.game,
        width: 0,
        height: 0,
      );
  
      final handled = components.any((c) {
        if (c is PositionComponent &amp;&amp; c.toRect().overlaps(touchArea)) {
          if (c is Box) {
            
            add(Box2()..y= c.y
            ..x =c.x);
          }
          debugPrint(c.toString());
          return true;
        }
        return false;
      });
    }
  
    void onPanEnd(DragEndInfo info) {
      debugPrint(&quot;onPanEnd&quot;);
    }
    void onPanCancel() {
      debugPrint(&quot;onPanCancel&quot;);
    }
  }
  
  </code></pre>
  <p>I did not achieve what I hoped for. What I hope is as follows:
  <a href="https://i.stack.imgur.com/W0OKN.gif" rel="nofollow noreferrer">image</a></p>
  <p>but my code generates like this:
  <a href="https://i.stack.imgur.com/XSRP9.gif" rel="nofollow noreferrer">image 2</a>
  It completely obscured the letter below!!!</p>
  <p>I am looking for another idea that is less complicated and does what I want.</p>