Pular para o conteúdo principal

Flutter para reTerminal

pir

Introdução​

Este wiki explica como criar sua própria interface de usuário usando Flutter. Flutter é um kit de desenvolvimento de software de interface de usuário de código aberto criado pelo Google. Ele é usado para desenvolver aplicativos multiplataforma para Android, iOS, Linux, Mac, Windows, Google Fuchsia e web a partir de uma única base de código. Isso significa que você pode usar uma linguagem de programação e uma base de código para criar aplicativos diferentes (para iOS, Android e mais).

Para desenvolver com Flutter, você precisa de uma linguagem de programação chamada Dart. Dart é uma linguagem de programação de código aberto, de uso geral, orientada a objetos, com sintaxe de estilo C desenvolvida pelo Google.

Aqui usaremos Flutter para desenvolver um aplicativo no PC e depois executar o aplicativo no reTerminal usando flutter-pi. flutter-pi é um incorporador leve do Flutter Engine para Raspberry Pi que roda sem X. Isso significa que você não precisa inicializar na área de trabalho do Raspberry Pi OS e carregar X11 e LXDE. Você só precisa inicializar na linha de comando e executar seu aplicativo.

Seguindo o guia abaixo, você conseguirá criar um aplicativo para controlar os pinos GPIO no reTerminal apenas clicando em botões no LCD. Então vamos começar!

Preparar Ambiente de Desenvolvimento​

No reTerminal​

Primeiro precisamos instalar o flutter-pi no reTerminal.

Clique aqui para acessar o repositório GitHub do flutter-pi

  • Passo 1. Faça login no reTerminal conforme explicado neste wiki e instale os binários do flutter engine no reTerminal
git clone --depth 1 https://github.com/ardera/flutter-engine-binaries-for-arm.git engine-binaries
cd engine-binaries
sudo ./install.sh
  • Passo 2. Instale cmake, bibliotecas gráficas, de sistema e fontes
sudo apt install cmake libgl1-mesa-dev libgles2-mesa-dev libegl1-mesa-dev libdrm-dev libgbm-dev ttf-mscorefonts-installer fontconfig libsystemd-dev libinput-dev libudev-dev  libxkbcommon-dev
  • Passo 3. Atualize as fontes do sistema
sudo fc-cache
  • Passo 4. Faça o clone do flutter-pi e entre no diretório clonado
git clone https://github.com/ardera/flutter-pi
cd flutter-pi
  • Passo 5. Compile o flutter-pi
mkdir build && cd build
cmake ..
make -j`nproc`
  • Passo 6. Instale o flutter-pi
sudo make install
  • Passo 7. Abra o raspi-config
sudo raspi-config

  • Passo 8. Altere para o modo console navegando até System Options > Boot / Auto Login e selecione Console ou Console (Autologin)

  • Passo 9. Habilite o driver gráfico V3D navegando até Advanced Options > GL Driver > GL (Fake KMS)

  • Passo 10. Configure a memória da GPU navegando até Performance Options -> GPU Memory e insira 64

  • Passo 11. Pressione ESC no teclado para sair da janela rasp-config

  • Passo 12. Dê ao reTerminal permissão para usar aceleração 3D. (NOTA: risco potencial de segurança. Se você não quiser fazer isso, inicie o flutter-pi usando sudo em vez disso.)

usermod -a -G render pi
  • Passo 13. Reinicie o reTerminal
sudo reboot

Agora terminamos de instalar as ferramentas necessárias no reTerminal

No PC Host​

Em seguida, precisamos preparar nosso PC host para o desenvolvimento. Aqui iremos instalar o Flutter SDK, que contém os pacotes necessários para o desenvolvimento com Flutter, o Android Studio para edição de código e o Android Emulator para executar e testar os códigos.

  • Passo 1. Baixe e instale o Flutter SDK de acordo com o seu sistema operacional

  • Passo 2. Digite o seguinte em uma janela de terminal para verificar se o Flutter SDK foi instalado com sucesso

flutter --version

pir

  • Passo 3. Baixe e instale o Android Studio de acordo com o seu sistema operacional

  • Passo 4. Abra o Android Studio e navegue até Configure > Plugins

pir

  • Passo 5. Em Marketplace, digite flutter na caixa de pesquisa e clique em Install

pir

  • Passo 6. Clique em Install na janela de prompt para instalar também o plugin Dart

pir

  • Passo 7. Clique em Restart IDE para reiniciar a IDE com os plugins instalados

pir

  • Passo 8. Quando a IDE abrir novamente, navegue até Configure > AVD Manager

pir

  • Passo 9. Clique em Create Virtual Device

pir

  • Passo 10. Clique em New Hardware Profile

pir

  • Passo 11. Configure as definições da seguinte forma

    • Device Name: reTerminal

    • Device Type: Phone/ Tablet

    • Screen:

      • Screen size: 5inch
      • Resolution: 1280 x 720

    • Memory: RAM: 2048MB

    • Input: [✓] Has Hardware Buttons (Back/Home/Menu)

    • Supported device states: [✓] Landscape

pir

  • Passo 12. Clique em Finish e depois clique em Next

  • Passo 13. Selecione a imagem Android mais recente e clique em Next

pir

  • Passo 14. Em Emulated Performance, selecione Hardware - GLES 2.0 para desempenho acelerado

pir

  • Passo 15. Finalmente clique em Finish

Agora concluímos com sucesso a preparação do ambiente de desenvolvimento

Aplicativo Flutter de Lâmpada Inteligente​

Conexões de Hardware​

Conectaremos um LED ao GPIO 24 do reTerminal para fins de teste. Depois você pode adicionar um relé e controlar eletrodomésticos usando o GPIO!

pir

Nota: É necessário um resistor entre o pino GPIO e o LED, caso contrário o LED queimará.

Criar e Inicializar o Aplicativo​

  • Passo 1. Abra o Android Studio e clique em Create New Flutter Project

pir

  • Passo 2. O caminho do Flutter SDK será configurado automaticamente

pir

Nota: Se o caminho do Flutter SDK não estiver listado nesta janela, você pode apontar manualmente para o local do Flutter SDK

  • Passo 3. Preencha os detalhes do projeto conforme indicado e clique em Finish

pir

Agora seu projeto de exemplo será aberto com main.dart

Criar o main.dart (aplicativo principal)​

Usaremos o arquivo main.dart dentro da pasta lib para criar o aplicativo Flutter

Abra o arquivo main.dart e copie os códigos a seguir

//library imports
import 'package:flutter/material.dart';
import 'package:flutter_gpiod/flutter_gpiod.dart';

//entry point for the app
void main() {
  runApp(MyApp());
}

// This is the main application widget.
class MyApp extends StatelessWidget {
  // Function for GPIO control
  void ledState(state) {
    // Retrieve the list of GPIO chips.
    final chips = FlutterGpiod.instance.chips;

    // Retrieve the line with index 24 of the first chip.
    // This is BCM pin 24 for the Raspberry Pi.
    final chip = chips.singleWhere(
          (chip) => chip.label == 'pinctrl-bcm2711',
      orElse: () =>
          chips.singleWhere((chip) => chip.label == 'pinctrl-bcm2835'),
    );

    final line2 = chip.lines[24];

    // Request BCM 24 as output.
    line2.requestOutput(consumer: "flutter_gpiod test", initialValue: false);
    line2.setValue(state);
    line2.release();
  }

  @override
  Widget build(BuildContext context) {
    // MaterialApp widget
    return MaterialApp(
      // Hide the debug banner at the top right corner
      debugShowCheckedModeBanner: false,
      // Scaffold widget
      home: Scaffold(
        // background color of the app.
        // Here after you type "Colors.", Android Studio will recommend the available colors. 
        // Also you can hover the mouse over to check the different color variations assigned 
        // by numbers enclosed by [ ].
        backgroundColor: Colors.grey[700],
        // AppBar widget
        appBar: AppBar(
          // background color of the appbar
          backgroundColor: Colors.black,
          // center align text inside appbar widget
          title: Center(
            child: Text(
              'LIVING ROOM',
            ),
          ),
        ),
        body: Center(
          // Row widge
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              // ON Button function
              ElevatedButton(
                child: Text('ON'),
                onPressed: () {
                  print('ON');
                  ledState(true);
                },
                // ON Button styling
                style: ElevatedButton.styleFrom(
                    primary: Colors.orange[700],
                    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                    textStyle:
                    TextStyle(fontSize: 40, fontWeight: FontWeight.normal)),
              ),
              // Google Material Icon of a Light Bulb
              Icon(
                Icons.lightbulb_outline,
                color: Colors.white,
                size: 200,
              ),
              // OFF Button function
              ElevatedButton(
                child: Text('OFF'),
                onPressed: () {
                  print('OFF');
                  ledState(false);
                },
                // OFF Button styling
                style: ElevatedButton.styleFrom(
                    primary: Colors.orange[300],
                    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                    textStyle:
                    TextStyle(fontSize: 40, fontWeight: FontWeight.normal)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Widgets Flutter Utilizados​

Os widgets do Flutter são construídos usando um framework moderno que se inspira no React. A ideia central é que você constrói sua interface de usuário a partir de widgets. Os widgets descrevem como a visualização deve parecer dada sua configuração e estado atuais.

StatelessWidget: Stateless widgets são úteis quando a parte da interface de usuário que você está descrevendo não depende de nada além das informações de configuração no próprio objeto e do BuildContext no qual o widget é inflado.

MaterialApp: O widget MaterialApp é um widget que encapsula vários widgets que são comumente necessários para aplicativos com Material Design.

Scaffold: Um widget Scaffold fornece uma estrutura que implementa o layout visual básico de Material Design do app Flutter. Ele fornece APIs para mostrar drawers, snack bars e bottom sheets

Appbar: Appbar é um widget que contém a barra de ferramentas em um aplicativo Flutter.

Row: O widget Row é usado para exibir seus filhos em um array horizontal. Usaremos os elementos de UI dentro deste widget

ElevatedButton: O widget ElevatedButton consiste em um botão que pode ser pressionado e reagir de forma correspondente

Ícones Google Material​

Nós usamos um ícone de lightbuilb dentro do app a partir dos Google Material Icons. Para explorar mais Google Material Icons, siga este link, pesquise por um botão, escolha o botão e veja o código Flutter para o botão

pir

Instalar a Biblioteca GPIO​

Em seguida, vamos prosseguir para instalar a biblioteca de controle GPIO em nosso aplicativo Flutter. Aqui usaremos uma biblioteca GPIO chamada flutter_gpiod

  • Passo 1. Para instalar a biblioteca GPIO, vá para o arquivo pubspec.yaml dentro do seu projeto Flutter e adicione o seguinte em dependencies:
dependencies:
  flutter_gpiod: ^0.4.0-nullsafety
  • Passo 2. Salve o arquivo e clique em Pub get

pir

Testar o App​

  • Passo 1. Abra o arquivo main.dart

  • Passo 2. clique no botão no device selected e selecione o dispositivo Android que criamos antes

pir

Agora você verá a seguinte saída

pir

  • Passo 3. Clique no play button para executar o aplicativo

pir

Agora você verá o seguinte aplicativo em execução no Emulador Android

pir

Criar o Aplicativo e Transferir para o reTerminal​

Em seguida, vamos criar nosso aplicativo Flutter e transferi-lo para o reTerminal

  • Passo 1. Abra uma janela de terminal dentro do Android Studio navegando até View > Tool Windows > Terminal

  • Passo 2. Digite o seguinte para preparar a compilação

flutter clean
  • Passo 3. Compile o projeto
flutter build bundle
  • Passo 4. Ligue o reTerminal

Nota: Você notará que o reTerminal é inicializado em modo de linha de comando

  • Passo 5. Transfira o projeto compilado para o reTerminal
scp -r ./build/flutter_assets pi@<ip_address_of_reTerminal>:/home/pi/testapp

Iniciar o Aplicativo no reTerminal​

  • Passo 1. Digite o seguinte na linha de comando do reTerminal
flutter-pi /home/pi/testapp

pir

Quando você pressionar os botões ON e OFF, você notará que o LED conectado ao GPIO 24 começará a reagir de acordo!

Você também pode estender isso adicionando um relé aos pinos GPIO e controlar eletrodomésticos e construir uma solução completa de casa inteligente no reTerminal!

Demo Bônus​

Se você quiser experimentar uma demo mais interessante com Flutter, você pode conferir este repositório GitHub

pir

Recursos​

Suporte Técnico & Discussão de Produto​

Obrigado por escolher nossos produtos! Estamos aqui para oferecer diferentes formas de suporte para garantir que sua experiência com nossos produtos seja o mais tranquila possível. Oferecemos vários canais de comunicação para atender a diferentes preferências e necessidades.

Loading Comments...