No Flutter, usamos a linguagem de programação Dart para construir aplicativos de plataforma cruzada. Os pacotes Dart são como as bibliotecas que você está acostumado a instalar para, digamos, projetos Node.js usando npm ou yarn. Esses pacotes são construídos por Flutter devs para Flutter devs.
Neste tutorial, mostraremos como construir pacotes Dart e compartilhá-los com outros desenvolvedores Flutter ao redor do mundo.
Cobriremos o seguinte com exemplos práticos:
O que é um pacote Dart? Requisitos do projeto Flutter Tipos de pacote Dart Criação de um Pacote Flutter/Dart Inicializando um repositório Git Escrevendo um widget Flutter Testando seu pacote Flutter Publicando e compartilhando seu Pacote Flutter
O que é um pacote Dart?
Os pacotes Dart nos ajudam a resolver problemas e criar soluções alternativas para problemas sem ter que escrever o código do zero.
Por exemplo, digamos que estejamos construindo um aplicativo Flutter e descobrimos que precisamos fazer upload de uma imagem de nosso sistema de arquivos local e exibi-la no aplicativo. Implementar isso por conta própria seria tedioso e demorado.
Provavelmente, algum desenvolvedor em algum lugar já construiu um pacote Dart para Flutter para lidar com a seleção de imagens e as funcionalidades de exibição para nós. Tudo o que precisamos fazer é instalar o pacote e, em seguida, usar seus métodos e classes para localizar e exibir imagens. Isso nos dá mais tempo para nos concentrarmos na lógica de negócios principal de nosso aplicativo.
Requisitos do projeto Flutter
Para acompanhar este tutorial, certifique-se de ter o SDK do Flutter instalado em seu máquina.
O Flutter SDK é usado para construir, compilar e executar projetos Flutter. Para instalá-lo, acesse o site oficial do Flutter e baixe o SDK apropriado, dependendo de sua operação sistema:
Tipos de pacote Dart
Existem dois tipos de pacotes no Dart: pacotes Dart regulares e pacotes de plug-ins.
Pacotes Dart são pacotes gerais escritos em Dart. Eles são independentes de quaisquer plataformas nativas, como Android e iOS. Esses pacotes são específicos do Flutter e só podem ser usados na estrutura do Flutter. Os pacotes de plug-ins são específicos da plataforma e contêm APIs escritas em código Dart. Esses pacotes podem ser escritos para Android (usando Kotlin ou Java ), iOS (usando Swift ou Objective-C), web, macOS, Windows ou Linux
Neste tutorial, vamos demonstrar como criar um pacote Dart.
Criando um pacote Flutter/Dart
Para criar um pacote Flutter , execute o comando abaixo:
flutter create–template=pacote flutter_pkg O subcomando create é usado para criar um projeto ou pacote Flutter. Nesse caso, ele criará um pacote Flutter. O sinalizador–template=package informa para criar um pacote Flutter. O flutter_pkg é a pasta na qual o pacote Flutter será criado. Você pode nomeá-lo como quiser
O comando será executado assim:
Criando projeto flutter_pkg… flutter_pkg/LICENSE (criado) flutter_pkg/test/flutter_pkg_test.dart (criado) flutter_pkg/flutter_pkg.iml (criado ) flutter_pkg/.gitignore (criado) flutter_pkg/.metadata (criado) flutter_pkg/pubspec.yaml (criado) flutter_pkg/README.md (criado) flutter_pkg/lib/flutter_pkg.dart (criado) flutter_pkg/.idea/libraries/Dart_SDKkg. xml (criado) flutter_pkg/.idea/modules.xml (criado) flutter_pkg/.idea/workspace.xml (criado) flutter_pkg/CHANGELOG.md (criado) Executando”flutter pub get”em flutter_pkg… 5.3s Escreveu 12 arquivos. Tudo feito! O código do seu pacote está em flutter_pkg/lib/flutter_pkg.dart
O arquivo principal, ou o arquivo de entrada, deste pacote é lib/flutter_pkg.dart. O Flutter define o arquivo principal com o mesmo nome do pacote com a extensão.dart. Nosso nome de pacote é flutter_pkg, então o arquivo principal será flutter_pkg.dart. Se o nome do pacote for modalpicker, o arquivo principal será modalpicker.dart.
Vamos examinar alguns dos arquivos e pastas que geramos para saber o que cada um deles faz.
pubspec.yaml contém as informações sobre um pacote Flutter, bem como as dependências desse projeto. Também nos permite especificar os recursos que queremos adicionar ao nosso projeto Flutter, como imagens, fontes, etc..gitignore diz ao Git quais arquivos em nosso projeto Flutter ignorar ao enviar nosso código para um repositório README.md contém informações gerais sobre o projeto escrito em Markdown. Este arquivo descreve como instalar, executar e contribuir com o projeto, entre outras coisas CHANGELOG.md é onde adicionamos as alterações que foram feitas ao projeto. Este documento também está escrito em Markdown
Inicializando um repositório Git
Antes de prosseguirmos, precisamos inicializar um repositório Git em nosso projeto. Isso ajuda quando precisamos enviar nosso pacote para pub.dev.
Execute o código abaixo:
echo”# flutter_pkg”>> README.md git init git add README.md git commit-m”primeiro commit”git branch-M main git remote add origin [email protected]: flutter-prjs/flutter_pkg.git git push-u origin main
Incluiremos uma homepage ou campo de repositório em nosso pubspec.yaml. Na página inicial, adicionaremos a URL do repositório Git de nosso projeto de pacote. Também adicionaremos uma descrição para descrever claramente aos desenvolvedores o que este pacote faz.
name: flutter_pkg description: Um novo pacote Flutter com um TextButton personalizado. versão: 0.0.1 autor: Chidume Nnamdi homepage: https://github.com/flutter-prjs/flutter_pkg
Escrevendo um widget Flutter
A seguir, criaremos um botão personalizado com o estilo de nosso curtindo.
Limpe o código original gerado pelo Flutter em lib/flutter_pkg.dart. Em seguida, adicione o widget CustomButton:
library flutter_pkg; import’package: flutter/material.dart’; a classe CustomButton extends StatelessWidget {var onPressed; filho final do widget; var style; CustomButton ({Key key, @required this.onPressed, this.child, this.style}): super (key: key); @override Widget build (BuildContext context) {return TextButton (onPressed: onPressed, style: TextButton.styleFrom (padding: const EdgeInsets.all (16.0), primary: Colors.white, backgroundColor: Colors.blue, elevation: 9.0, textStyle: const TextStyle (fontSize: 20,),), child: child); }}
O código da biblioteca flutter_pkg define o nome do nosso pacote como flutter_pkg.
Primeiro, importamos o pacote Flutter Material-esta é a raiz de todos os aplicativos Flutter. Em seguida, criamos uma classe CustomButton que estende a classe StatelessWidget. Isso faz com que nosso widget CustomButton não mantenha ou gerencie nenhum estado local.
Temos três propriedades que o construtor do widget CustomButton receberá:
onPressed-Esta função será chamada quando o widget CustomButton for pressionado ou estilo clicado-esta propriedade manterá o estilo personalizado do botão de seus usuários. Os usuários podem decidir estilizar nosso widget CustomButton ao seu gosto, então eles codificam o estilo e passam para o widget CustomButton por meio da propriedade de estilo filho-Esta é uma árvore de widgets do widget CustomButton. Esta árvore é geralmente um widget de Texto que exibe o texto no botão
O método de construção renderiza um TextButton e estiliza o botão da seguinte maneira:
padding-O preenchimento é definido como 16,0 unidades todos os lados primários-A cor primária do botão é definido para azul backgroundColor-A cor de fundo do botão é definida para elevação azul-A sombra da caixa do botão é elevada para 9.0 unidades textStyle-O tamanho da fonte é definido para 20 unidades para fazer o botão parecer muito maior.-Esta propriedade renderiza a árvore de widgets do widget CustomButton
Nosso botão personalizado é algo como uma versão menor de TextButton . Este botão renderiza um TextButton personalizado. Dentro de nosso CustomButton, aumentamos o preenchimento, a elevação, a cor de fundo e o estilo de texto do TextButton.
Para usar este widget, insira o seguinte:
CustomButton (onPressed: _incrementCounter, child: const Text (“Click me”)),
Testando seu pacote Flutter
Precisamos testar nosso pacote para ver se está funcionando. Para fazer isso, temos que criar um projeto Flutter em nosso projeto:
flutter create example
Uma pasta de exemplo será criada em nosso projeto flutter_pkg.
Em seguida, temos que instalar nosso flutter_pkg no projeto de exemplo Flutter. Como o pacote ainda não foi publicado no pub.dev, vamos nos referir ao caminho localmente.
Abra o pubspec.yaml no projeto de exemplo e adicione esta linha:
dependencies: flutter: sdk: flutter flutter_pkg: path:../
O caminho:../diz ao Flutter para obter a dependência flutter_pkg do caminho../-isto é, de sua pasta pai.
Abrir lib/main.dart e adicione o seguinte código ao widget _MyHomePageState:
class _MyHomePageState extends State
Importamos o pacote flutter_pkg e, em seguida, definimos o widget CustomButton entre dois widgets de texto.
Execute o projeto de exemplo executando flutter run na linha de comando. Se você estiver usando o VS Code, clique com o botão direito do mouse no arquivo lib/main.dart e clique em Executar sem depuração .
Nosso aplicativo terá a seguinte aparência:
Ótimo! Nosso pacote está funcionando. Agora podemos publicá-lo em pub.dev para que outros desenvolvedores possam usar nosso pacote.
Publicação e compartilhando seu pacote Flutter
Agora que sabemos que nosso pacote Dart está funcionando, podemos publicá-lo em pub.dev para que outros desenvolvedores possam usar nosso pacote.
Antes de publicar nosso pacote, vamos adicionar uma licença ao arquivo de LICENÇA:
Copyright (c) 2021 Chidume Nnamdi A permissão é concedida a use este software conforme considerar adequado.
A seguir, enviaremos nossas mudanças para Git. Execute o código abaixo:
git add. && git commit-m”Fiz algumas alterações”&& git push
Agora é hora de publicar nosso pacote:
flutter packages pub publish
Algo como isto aparecerá:
Publishing flutter_pkg 0.0.1 para https://pub.flutter-io.cn: |-.gitignore |-.metadata |-CHANGELOG.md |-LICENÇA |-README.md |-exemplo…
Em na parte inferior, ele exigirá autorização se você ainda não estiver autorizado no pub.dev.
O Pub precisa da sua autorização para fazer upload de pacotes em seu nome. Em um navegador da web, acesse https://accounts.google.com/o/oauth2/auth?access_type=offline&…wpFwBAMgkc&code_challenge_method=S256&scope=openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email Em seguida, clique em”Permitir acesso”. Aguardando sua autorização…
Então você terá que clicar no link do terminal acima (Ctrl + Clique). Finalmente, você será solicitado a autorizar o acesso por meio de sua conta do Gmail selecionada.
Observação : Flutter diz que a publicação é para sempre, o que significa que os pacotes não podem ser cancelados.
Veja o pacote publicado associado a esta demonstração em pub.dev .
Conclusão
Cobrimos muito neste tutorial. Começamos apresentando pacotes no Dart, o que são e como são projetados para compartilhar código com outros desenvolvedores.
Mais tarde, aprendemos como criar um scaffold para um projeto de pacote Flutter e como escrever o código do pacote. Em seguida, aprendemos como testar nosso pacote Flutter localmente e, finalmente, como publicar nosso pacote Flutter no pub.dev.
