Como utilizar o elemento toggle button no Thunkable/app Inventors

   Neste tutorial vamos utilizar o elemento Toggle Button(botão de alternância) , é um Botão que quando pressionado muda seu status, iniciando por default como OFF, quando pressionado alterna para On, pressionado novamente retorna a OFF.
   Neste tutorial, alem da opção ON, OFF iremos adicionar cores, sendo verde para ON e vermelho para OFF.


    Vamos iniciar nossa aplicação e para isso vamos usar a plataforma de desenvolvimento online Thunkable, sem a necessidade de instalar qualquer programa no computador apenas um pequeno aplicativo no celular para emular a aplicação, e pode ser encontrado neste link app Thunkable.. 

  Acessaremos a plataforma de desenvolvimento para PC neste link LINK Thunkable . .

  (Se você não conhece a plataforma de desenvolvimento ou quer ver um tutorial bem básico de como usar o Thunkable acesse esse link "Tutorial básico thunkable" ).

  

Selecione a opção Android e faça login com o Google.

     Clique em "create new app", e na janela que aparecer escreva Toggle_Button e aperte OK.

        Vai aparecer uma tela como essa, onde sera desenvolvida nossa aplicação.

      Agora vamos adicionar os itens da parte gráfica, vamos utilizar o elemento "Toggle Button"  clique e arraste para a Screen1.

  

  

  Pronto nossa parte gráfica já esta pronta, e partiremos agora para os blocos que é onde faremos com que o aplicativo funcione de fato.

 Clique em Blocks, e aparecera uma tela como esta abaixo.

      Em Variables selecione o elemento "initialize global" no menu lateral esquerdo e arraste para dentro do editor como na imagem abaixo, renomeie para ON como na figura abaixo. Esta variável vai armazenar o status do botão

     Em Logic selecione o elemento False, e encaixe na variável recém criada para que o botão inicie em OFF.

  

    

    Em Toggle Button selecione o elemento "Click" no menu lateral esquerdo e arraste para dentro do editor como na imagem abaixo. 

    Em Control escolha o bloco de decisão if then, adicione dentro do bloco Click e clique dentro da engrenagem do bloco if then e adicione uma else como ilustrado abaixo.

    

      Adicionaremos agora os blocos de variáveis onde são armazenados os dados do botão.

      Em Variable pegue get e dois set , coloque o get em if e o set em then e else .

      Vá em logic e pegue um elemento false e um true, o false encaixe no bloco set ligado a then e o true encaixe no bloco set ligado a else.

    

    

  Agora usaremos o bloco Background Color responsável por alterar a cor do botão.

  Vá em Toggle_button e pegue dois Background Color, encaixe um em then e o outro em else.

  Pra finalizar adicionaremos agora as cores para representar o status do botão.

  Em colors selecione um bloco de cor "vermelho" e um  "verde", encaixe o vermelho em Background ligado a then e o verde em Background ligado a else.

Neste momento sua aplicação já esta pronta, como pode observar, deverá ficar igual a ilustração abaixo.

  Iniciado como OFF.

Quando clicamos no botão seu status é alterado para ON.

  E se clicarmos novamente seu status retorna a OFF.

 É isso ai pessoal, um simples tutorial que nos mostra o funcionamento do elemento Toggle Button, agora usem a imaginação para criar uma infinidade de aplicações, e boa sorte.

 Duvidas deixem no comentário.

Tutorial em vídeo