Partial Code demonstrating scope

SudokuBoardPresenter .dart

class SudokuBoardPresenter {
  TableCellElement activeElement;
  SudokuBoard _currentBoard;
  
  SudokuBoardPresenter(SudokuBoard currentBoard){
    _currentBoard = currentBoard;
  }
  TableElement renderSuduokuBoard(){
    //render grids first
    List<SudokuCell> allCells = _currentBoard.allCells;
    TableElement result = new Element.tag('table');
    result.cellSpacing = '0';
    result.cellPadding = '0';
    TableRowElement rowElement;
    TableCellElement cell;
    print('build rows, grids number is:: ' + allCells.length);
    num rowNumbers = Math.sqrt(allCells.length);
    int counter = 0;
    SudokuCell currentCell;
    DivElement notesDiv;
    DivElement selectionDiv;
    DivElement filledDiv;
    InputElement clearButton;
    for(var tr = 0 ; tr < rowNumbers; tr++){
        print('cell is ' + allCells[tr].name);
        rowElement = result.insertRow(tr);
      for(var td = 0 ; td < rowNumbers ; td++){
        currentCell = allCells[counter++];
        //get the current state of the sudokuCell, and decide how to render
        cell = rowElement.insertCell(td);
        notesDiv = cell.insertAdjacentElement('afterbegin', renderNotesDiv());
        selectionDiv = cell.insertAdjacentElement('afterbegin', renderSelectionDiv());
        filledDiv = cell.insertAdjacentElement('afterbegin', renderFilledDiv());
        clearButton = cell.insertAdjacentElement('afterbegin', renderClearButton());
        if(currentCell.filled){
          print('value found');  
          filledDiv.firstElementChild.text = currentCell.filledValue.toString();
          cell.classes.add('filled');
          cell.classes.add('static');
          cell.on.click.add((e){
            if(activeElement != null){
              activeElement.classes.remove('selection');
            }
            activeElement = e.srcElement;
          });
        }else{
          cell.on.click.add(onSelection(e){
            if(activeElement != null){
              activeElement.classes.remove('selection');
            }
            activeElement = e.srcElement;
            activeElement.classes.add('selection');
          });
        }
        cell.id = currentCell.id;
      }
    }
    return result;
  }
  DivElement renderNotesDiv(){
    DivElement result = new Element.tag('div');
    result.classes.add('notes');
    result.hidden = true;
    TableElement innerTable = new Element.tag('table');
    SpanElement currentSpan;
    result.insertAdjacentElement('afterbegin', innerTable);
    int counter = 1;
    for(var tr2 = 0 ; tr2 < 3; tr2++){
      TableRowElement rowElement2 = innerTable.insertRow(tr2);
      for( var td2=0; td2 < 3; td2++ ){
        TableCellElement cell2 = rowElement2.insertCell(td2);
        currentSpan = new Element.tag('span');
        currentSpan.text = counter.toString();
        cell2.insertAdjacentElement('afterbegin', currentSpan);
        cell2.on.click.add((e) {
        });
        counter++;
      }
    }
    return result;
  }
  DivElement renderSelectionDiv(){
    DivElement result = new Element.tag('div');
    result.classes.add('selection');
    result.hidden = true;
    TableElement innerTable = new Element.tag('table');
    SpanElement currentSpan;
    result.insertAdjacentElement('afterbegin', innerTable);
    int counter = 1;
    for(var tr2 = 0 ; tr2 < 3; tr2++){
      TableRowElement rowElement2 = innerTable.insertRow(tr2);
      for( var td2=0; td2 < 3; td2++ ){
        TableCellElement cell2 = rowElement2.insertCell(td2);
        currentSpan = new Element.tag('span');
        currentSpan.text = counter.toString();
        cell2.insertAdjacentElement('afterbegin', currentSpan);
        cell2.on.click.add((e) {
          //expose class level vartiable as a local variable so that it is available withjing the nested functions
          Element localActiveElement = activeElement;
          Event currentEvent = e;
          TableCellElement sourceCell = currentEvent.srcElement;
          String cellValue = sourceCell.text;
          print('cell value is :: ${cellValue}');
          activeElement.query('div.filled > span').text = cellValue;
          activeElement.classes.add('filled');
          print('testing scope1 :: ' + activeElement.id);
          activeElement.on.mouseOver.add(closeAppearHandler(Event e2){
            print('testing scope2 :: ' + activeElement.id);
            Element source = e2.srcElement;
            if(source.id != null)
              localActiveElement.classes.add('remove');
          });
          print('activeElement id is ${activeElement.id}');
          activeElement.on.mouseOut.add(closeDisappearHandler(MouseEvent e2){
            print('testing scope3 :: ' + activeElement.id);
            Element myTarget = e2.target;
            Element sample = e2.relatedTarget;
            Element source = e2.srcElement;
            Element related = e2.currentTarget;
            Element temp = e2.fromElement;
            bool isTd = myTarget.tagName == 'TD' && source.tagName == 'TD' && related.tagName == 'TD' && temp.tagName == 'TD';
            if(!isTd)
              return;
            Element currentParent = sample;
            for(int i = 0 ; i < 3 ; i++){
              currentParent = currentParent.parent;
              if(currentParent == null || currentParent.tagName == 'BODY')
                break;
              if(currentParent.id != null && currentParent.tagName == 'TD' && currentParent.id == localActiveElement.id)
                return;
            }

            localActiveElement.classes.remove('remove');
          });
        });
        counter++;
      }
    }
    return result;
  }
  DivElement renderFilledDiv(){
    DivElement result = new Element.tag('div');
    result.classes.add('filled');
    SpanElement currentSpan = new Element.tag('span');
    result.insertAdjacentElement('afterbegin', currentSpan);
    return result;
  }
  InputElement renderClearButton(){
    InputElement result = new Element.tag('button');
    result.title = 'Clear value';
    result.text = 'x';
    result.hidden = true;
    return result;
  }
  TableElement renderGrid(){
    TableElement innerTable = new Element.tag('table');
    innerTable.classes.add('box');
    for(var tr2 = 0 ; tr2 < 3; tr2++){
      TableRowElement rowElement2 = innerTable.insertRow(tr2);
      for( var td2=0; td2 < 3; td2++ ){
        TableCellElement cell2 = rowElement2.insertCell(td2);
        //TableElement innerTable = new Element.tag('table');
        cell2.classes.add('user');
        //cell2.insertAdjacentElement('afterbegin', getOuterDiv());
        cell2.on.click.add((e) {
          //showSelectionPanel(e);
        });
        //cell2.innerHTML = '2';
      }
    }
    return innerTable;
  }
}