Como fazer seu primeiro aplicativo Linux com Flutter

Muitos aplicativos populares, como Adobe Photoshop, Microsoft Office e WhatsApp, não possuem equivalentes no desktop Linux. No entanto, graças às plataformas de desenvolvimento de aplicativos multiplataforma, como Elétron, vibrar e Taurio número de aplicativos Linux está aumentando.

Se você estiver interessado em experimentar o desenvolvimento, este tutorial mostra como criar um aplicativo muito simples usando o Flutter e pode ser útil para quem deseja descobrir como criar aplicativos para Linux e obter alguma experiência em programação.

Por que o Linux precisa de mais aplicativos

O Linux tem uma base de usuários de desktop menor em comparação com Windows e Mac, que é uma das razões pelas quais os desenvolvedores de aplicativos relutam em publicar seus aplicativos no Linux. Infelizmente, a escassez de aplicativos populares compatíveis com Linux afeta a adoção pela população em geral, criando assim um ciclo vicioso. Não ajuda que o Linux seja frequentemente considerado uma alternativa para indivíduos mais experientes em tecnologia.

Para mudar essa narrativa, a comunidade Linux precisa se concentrar em portar mais aplicativos com foco em utilitários para seu ecossistema. Com uma base de usuários cada vez maior, os principais desenvolvedores finalmente serão encorajados a lançar seus aplicativos no Linux. Se você quiser fazer parte desse esforço, o Flutter é uma ótima maneira de iniciar sua jornada de desenvolvimento de aplicativos Linux.

O que é Flutter?

Flutter é uma estrutura de desenvolvimento de aplicativos de plataforma cruzada do Google que usa Dart, uma linguagem de programação orientada a objetos. A maior vantagem do Flutter é que ele permite que os desenvolvedores criem aplicativos compilados nativamente para dispositivos móveis, Web e desktop a partir de uma única base de código.

Atualmente, o Flutter oferece suporte a todas as plataformas de desktop, incluindo Windows, Mac e Linux, bem como Android e iOS em dispositivos móveis. O Flutter não usa elementos de interface do usuário específicos da plataforma e, em vez disso, implementa uma tela em branco com widgets adicionados. Portanto, o Flutter é chamado de framework declarativo.

Por que escolher o Flutter para o desenvolvimento de aplicativos Linux?

O Flutter é muito rápido em comparação com alternativas como o Electron. O último usa tecnologias da web para criar aplicativos de desktop e agrupa um mecanismo Chromium para obter desempenho consistente em todas as plataformas de desktop. Portanto, os aplicativos desenvolvidos na plataforma são muito pesados ​​e consomem mais memória RAM.

O Flutter adota uma abordagem diferente, compilando o código-fonte do Dart em pacotes C/C++ específicos da plataforma. Os aplicativos resultantes são consideravelmente mais leves do que os aplicativos Electron, o que significa que eles também têm mais desempenho e consomem menos recursos.

O Flutter vem com suporte para os mais recentes widgets de estilo Gnome Libadwaita e permite que os desenvolvedores personalizem seus aplicativos usando o tema Yaru do Ubuntu. Além disso, a Canonical publicou vários pacotes fáceis de usar para ajudar os usuários a criar aplicativos Linux com eficiência e sem se aprofundar muito nas APIs do sistema Linux.

1. Instalando o Flutter em sua máquina

Abaixo estão descritas três maneiras de instalar o Flutter em sua área de trabalho Linux.

Instalar o Flutter usando o Snap

Antes de instalar o Flutter via Snap, você deve ter o Snap instalado em seu computador. O Snap faz parte das distribuições do Ubuntu, mas você também pode instalá-lo facilmente em outros ambientes de desktop.

Se você estiver usando uma distribuição baseada em Debian, primeiro instale “snapd” usando seu gerenciador de pacotes.

sudo apt update
sudo apt install snapd

Reinicie seu dispositivo para garantir que todos os caminhos de Snaps estejam configurados corretamente. Para obter a versão mais recente do “snapd”, instale o pacote principal do Snap.

sudo snap install core

Para distribuições Linux baseadas em Fedora ou Red Hat, você pode usar o gerenciador de pacotes DNF para instalar o “snapd”.

sudo dnf install snapd

O Flutter é um Snap clássico, por isso se comporta como um sistema tradicionalmente instalado. Ele tem acesso total ao seu sistema ao contrário dos Snaps normais, que estão confinados a um ambiente de sandbox. Para ativar o Snap clássico no Fedora, execute o seguinte comando.

sudo ln -s /var/lib/snapd/snap /snap

Depois que o Snap estiver integrado ao seu computador, instale o Flutter com o Snap.

sudo snap install flutter --classic

Execute o flutter doctor -v comando para ver se tudo está configurado no seu dispositivo. Se não for esse o caso, o Flutter CLI (Command Line Interface) fornece as instruções adequadas para configurar todos os componentes necessários para desenvolver aplicativos Linux em seu dispositivo.

Instalar o Flutter manualmente

Se você não quiser usar o Snap, você pode baixar o última versão estável do Flutter do site oficial e instale-o manualmente a partir daí. Como alternativa, execute o wget comando para baixar o Flutter diretamente sem sair do seu Terminal.

Você precisará substituir a versão 3.3.2 pela última versão estável do Flutter usando este comando:

wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.tar.xz

Em seguida, extraia os arquivos no diretório atual.

tar xf ~/Downloads/flutter_linux_3.3.2-stable.tar.xz

Copie o diretório Flutter extraído para sua pasta Home e defina o caminho binário do Flutter em seu ambiente bash.

cp flutter/ ~ 
export PATH="$PATH:`pwd`/flutter/bin"

Execute o flutter doctor -v comando para ver se o Flutter foi instalado com sucesso. Se você deseja definir as variáveis ​​de ambiente do Flutter permanentemente e tornar os comandos do Flutter acessíveis em seu ambiente, defina a variável de ambiente do Flutter em seu arquivo “.rc”.

Se você estiver usando o shell bash, abra seu arquivo “.bashrc” e cole a seguinte linha de código no final dele.

export PATH="$PATH:[PATH_OF_FLUTTER_DIRECTORY]/bin"

Observação: mudar o [PATH_OF_FLUTTER_DIRECTORY] ao seu próprio caminho de diretório do Flutter.

Clique em salvar e crie seu arquivo “.bashrc” ou use uma nova janela do Terminal para atualizar suas variáveis ​​de ambiente presentes no arquivo “.bashrc”.

source .bashrc

Por fim, execute o flutter doctor -v comando novamente para ver se todos os componentes do Flutter estão instalados corretamente em seu dispositivo. Como alternativa, siga as saídas do Terminal para instalar todas as bibliotecas Flutter necessárias.

Instalar usando o Git

A instalação do Flutter usando o Git é semelhante aos processos acima. A principal diferença é que, em vez de baixar uma versão específica do Flutter, você pode alternar a versão do Flutter simplesmente adicionando um argumento Terminal.

É possível instalar o Git usando seu gerenciador de pacotes.

sudo apt update
sudo apt install git

Clone o repositório GitHub para o diretório de trabalho atual. Você deve usar seu diretório inicial em vez de um diretório aleatório.

cd ~
git clone https://github.com/flutter/flutter.git

O comando acima clonou a ramificação principal do repositório GitHub. Se você quiser mudar para o ramo estável, adicione um -b flag para o comando git clone.

git clone https://github.com/flutter/flutter.git -b stable

Adicione o caminho do Flutter ao seu arquivo “.bashrc” para concluir a instalação do Flutter.

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

2. Gerando um projeto Flutter

Se você acabou de começar a trabalhar no projeto e ainda não escreveu muito código, criar um projeto com um novo nome de pacote (identificador exclusivo) é a solução mais limpa. Cada aplicativo Flutter tem um nome de pacote que identifica exclusivamente seu aplicativo e você pode defini-lo usando o flutter create comando.

Se você tiver um nome de domínio chamado “example.com”, o nome do seu pacote deve ser “com.example Nome do Projeto“. Você pode definir este nome de pacote usando um --org bandeira no flutter create comando.

flutter create --org com.example counter

Isso criará um novo projeto Flutter no diretório atual, onde o nome do projeto é “counter” e o nome do pacote é “com.example.counter”.

Ao criar um aplicativo Flutter, o arquivo “main.dart” encontrado na pasta “counter/lib” do seu projeto será preenchido com um aplicativo de demonstração (seu código pode ser modificado, conforme mostrado abaixo), que você pode executar imediatamente!

3. Executando seu primeiro aplicativo Flutter

Depois de gerar seu projeto Flutter, abra o diretório do projeto em seu editor de código favorito. Por exemplo, se você estiver usando o Visual Studio Code, execute code counter no Terminal para abrir o diretório do seu projeto (“contador” no nosso caso) no VSCode.

Use o CTRL + ` comando para abrir um Terminal dentro do editor, que você usará para executar seu primeiro aplicativo Flutter digitando:

flutter run -d linux

Se você fez tudo corretamente, deve estar executando seu aplicativo Linux em sua área de trabalho. É um aplicativo simples que permite pressionar um “+” (Adicionar) para aumentar o contador centralizado.

Conceitos básicos de aplicativos Flutter

Antes de começar a editar partes deste código de demonstração, você precisará entender alguns conceitos exclusivos do Flutter. Abra o arquivo “counter/lib/main.dart” em seu editor de código para observar alguns aspectos:

void main() {
  runApp(const MyApp());
}

• a Principal() – esta é uma função que representa o ponto inicial da aplicação.
• MeuAplicativo() – este é um widget Flutter. Pense nos widgets como blocos de construção básicos do Flutter. Eles vêm em dois tipos: Stateless e Stateful.

1. Widgets sem estado no Flutter

Widgets sem estado são widgets básicos, que contêm outros widgets e não podem ser alterados depois de construídos. Como o nome sugere, os widgets Stateless não possuem nenhum estado por conta própria. MyApp() é um exemplo de um widget Stateless. Ele contém o widget MaterialApp(), mas não possui nenhuma reatividade, pois é visível no próprio código:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

2. Widgets com estado no Flutter

Por outro lado, os widgets Stateful podem ser alterados depois de construídos. No aplicativo de demonstração, você viu uma mudança no valor do “contador” quando pressionamos o botão. Isso é obtido por meio do uso de widgets Stateful, conforme visto no código em que:

• MyHomePage é um widget com estado.
• Dentro _MyHomePageState classe, observe a variável chamada _counterque é inicialmente definido como 0.
• Clicar no botão na demonstração fará com que o _incrementCounter() função para executar e aumentar o valor em 1.
• o setState() função dentro _incrementCounter() renderiza novamente o MyHomePage widget e um atualizado _counter valor é exibido na tela.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  final String title;
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
 
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Personalizando seu aplicativo

Dentro do widget MyApp, você pode, por exemplo, alterar a string do título de “Flutter Demo Home Page” para “Make Tech Easier”:

home: const MyHomePage(title: 'Make Tech Easier'),

Você também pode alterar o tema do aplicativo usando o primarySwatch propriedade do widget MaterialApp. Por padrão, você obtém um tema de cor azul. Para mudar esta cor para verde, basta substituir “Colors.blue” por “Colors.green”:

primarySwatch: Colors.green,

Para ver as alterações, vá ao seu Terminal e clique em r no teclado para recarregar o aplicativo. Você pode ver instantaneamente que a cor e o título do aplicativo foram alterados.

Este é um tutorial muito básico para lhe dar uma ideia de como o Flutter funciona e como você pode começar a desenvolver aplicativos Linux usando-o. Se você se interessou e quer saber mais, siga este Guia de Introdução no site do Flutter.

perguntas frequentes

Hrishikesh Pathak

Desenvolvedor e escritor. Escreva sobre linux e web.