Construa aplicativos móveis de plataforma cruzada com flutter do Google

Houve inúmeras estruturas móveis de plataforma cruzada ao longo dos anos, com melhorias constantes na experiência e desempenho do desenvolvedor por toda parte. Flutter do Google. É uma nova adição ao pacote, e é particularmente interessante, porque em vez de usar uma "ponte" de JavaScript, quantas estruturas (como reagir nativas), compila-se ao verdadeiro código nativo.

Você pode descobrir um pouco sobre como funciona no vídeo introdutório abaixo ou lido para um guia passo a passo para começar a flutter. Para mais conselhos, dê uma olhada em nossa coleção de tutoriais explicando Como construir um aplicativo . Ou, se você estiver construindo um site, escolha um Construtor de sites e hospedagem na web. serviço de nossos guias. Não feliz com o seu armazenamento? Aqui estão alguns armazenamento na núvem opções.

Neste tutorial, veremos como configurar flutter e explorar os fundamentos dos aplicativos de construção usando a estrutura, usando macos para o nosso desenvolvimento. Suponamos que você tenha programado antes e saiba como usar o Bash Shell, mas pode não ter se desenvolvido para celular.

01. Prepare-se

Você precisará baixar e instalar algumas coisas antes de poder fazer uso de flutter:

• Xcode para suporte iOS
• Android Studio para suporte para Android
• Android SDK (Download via Android Studio Depois de criar um novo projeto)

Depois de ter tudo isso, execute o Xcode e o Android Studio, instale os componentes adicionais que oferecem e crie um novo projeto para se certificar de que eles são executados.

Agora você está pronto para começar a flutuar. Faça o download do Flutter sdk. . Extrai-o para onde quer que você queira ser instalado. Precisamos atualizar nosso caminho para que os macos possam encontrar flutter onde você invocar. Aberto (ou criar) $ Home / .bash_profile :

sudo atom $HOME/.bash_profile

Agora adicione o diretório Flutter / Bin ao seu $ Caminho :

export PATH=/Users/simon/dev/flutter/bin:$PATH

Execute um comando shell para atualizar o perfil de bash:

source $HOME/.bash_profile

Agora podemos começar a usar o flutter cli. A primeira coisa a fazer é ter certeza de que você tem a versão mais recente:

flutter upgrade

02. Corrigir quaisquer problemas

Quando isso é feito, Flutter oferece uma ferramenta diagnóstica útil, que irá verificar se tudo o que você precisa é instalado e configurado corretamente. É realmente útil:

flutter doctor

Tome nota do que o médico lhe diz e responde a quaisquer problemas que surjam. Você pode ter que executar o médico algumas vezes para obter feedback adicionais e agir sobre ele.

Uma vez que a ferramenta é feliz com flutter, Toolchain do Toolchain do Android, iOS Toolchain e Android Studio, você é bom para ir. Não se preocupe com dispositivos conectados por enquanto.

Xcode pode exigir algumas etapas extras no shell para obtê-lo totalmente configurado:

 sudo Xcode-Select - Switch /Applications/XCode.app/Contents/developer
BREW INSTALAÇÃO DE INSTALAÇÃO DE INSTALAÇÃO
Brew instalar ideviceinstaller.
BREW INSTALAR COCOAPODS.
Configuração do pod 

E o estúdio Android geralmente precisa do contrato de licença aceitando:

 Flutter Doctor --android-Licenses 

03. Encontre um IDE e inicie um novo projeto

Agora, flutter está configurado, você vai querer que um IDE funcione. Há plugins disponíveis para o Android Studio e Intellij. Vamos ir com o código vs, que também tem seu próprio plugin de flutter.

Inicie o código vs e clique em Visualizar & GT; Paleta de comando. Digite 'install' e selecione as extensões: instale a ação de extensão. Procure por 'flutter' e instale o plugin flutter. Uma vez feito, reinicie o código vs.

Agora estamos prontos para começar a desenvolver. Inicie um novo projeto através da paleta de comando selecionando a vibração: nova opção de projeto. Nomeie seu projeto, selecione onde salvá-lo e o código VS invocará flutuar para gerar o novo projeto.

04. Configurar dispositivos virtuais

Para testar nosso projeto, vamos querer que um simulador de dispositivo nos permita na área de trabalho. No canto inferior direito do código vs (na barra azul), você verá algo que não tem dispositivos. Se você desenvolveu para o celular antes, quando você clica nisso, verá seus simuladores disponíveis na paleta de comando.

Se você não tiver simuladores, execute o seguinte no terminal para abrir o simulador do iOS pela primeira vez:

 Abra -a simulador 

Você deve então ver um simulador do IOS disponível quando você reiniciar o código vs.

O Android é mais complexo. Carregue o Android Studio e dentro de um projeto Android, clique em Ferramentas e GT; Android & GT; Manager AVD. Selecione Criar dispositivo virtual.

Selecione o dispositivo para emular - por exemplo, um Google Pixel 2. Clique em Avançar e também pode escolher uma imagem do sistema (i.e. OS versão) para baixar. Na próxima página sob desempenho emulado, selecione Hardware - Gles 2.0 para ativar a aceleração de gráficos de hardware no emulador. Termine o processo.

Depois de criar o dispositivo virtual no Android Studio, reinicie o código VS e você verá seu emulador Android aparecer ao lado do simulador do iOS na lista de dispositivos do código vs.

Agora, se você clicar em nenhum dispositivo, poderá selecionar um dispositivo iOS ou Android e um telefone virtual será atingido em sua área de trabalho. Experimente com um simulador iPhone x.

04. Teste o aplicativo de partida

Agora o simulador está sendo executado, você pode testar o aplicativo inicial. Bata F5 ou clique em Debug & GT; Comece a depuração. O aplicativo irá carregar no simulador e você poderá tentar interagir com ele. Seja paciente se isso não acontecer imediatamente, pois pode levar algum tempo para construir.

Antes que possamos fazer o mesmo no Android, precisamos instalar dependências de gradúcia para o nosso projeto (uma pequena nuance de flutter agora). Navegue até o diretório raiz do projeto e execute:

 Android / Gradlew 

Então você pode abrir um emulador Android e executar o projeto no modo de depuração como você fez para iOS.

Uma ótima característica de flutter é que ele suporta o 'hot recarregamento' - isto é, você pode modificar sua fonte e ver as alterações refletidas no simulador imediatamente. No main.dart. , vamos fazer algumas alterações na classe MyApp enquanto o simulador do iPhone X é executado:

 PrimarySwatch: cores.Green,
Home: New Myhomepage (Título: 'Livro de Receita'), = 

Você deve ver as alterações entrarem em vigor assim que você economizar.

06. Explore o sistema de widget de Flutter

O que ainda não conversamos é a linguagem de programação de dardo que flututaria usa. Dart é uma linguagem orientada a objetos com sintaxe de estilo C, desenvolvida pelo Google e todo o desenvolvimento de flutters usa. Se você já tem alguma experiência de desenvolvimento web ou móvel, então não deve ser totalmente estranha para você.

Tudo em flutter é baseado em widgets, que são os blocos de construção de um aplicativo. Se você usou reagir antes, a abordagem da Flutter é muito semelhante e os widgets são análogos aos componentes. Essencialmente todo o seu aplicativo pode ser decomposto em uma hierarquia de widgets.

Isso é facilmente visto dentro do Myapp aula. Myapp é um WelfelessWidget. (Isso significa que é imutável). O Construir() método que estamos primordiais dizia a flutuação como o widget deve ser renderizado. Isso é semelhante ao reagir render () função.

O método retorna um MaterialApp Widget, que representa um aplicativo que usa o design do material do Google. Isso, por sua vez, tem várias propriedades, que são próprios widgets: Temedata Define o estilo visual a ser usado e Minha página inicial é um widget personalizado definido mais abaixo main.dart. arquivo que contém o corpo do aplicativo.

07. Edite seu conteúdo

Ao contrário do apátrial Myapp , Minha página inicial é um widget estado. Isso significa que seu comportamento é definido pelo _Myhomepagestate. Classe, permitindo armazenar informações e alterar em conformidade, como quando você pressiona o botão no aplicativo.

Você pode ver que está atualmente usando muitos widgets internos flutter fornece para lidar com coisas comuns, como layout, botões e exibição de texto. Vamos fazer algumas alterações nessa classe para modificar o que nosso aplicativo apresenta.

 Classe _MyhomePagestate estende o estado & lt; myhomepage & gt; {
 @sobrepor
 Construção de Widget (Contexto BuildContext) {
   retornar novo andaime (
     Appbar: novo Appbar (
       Título: Novo texto (widget.title),
     ),
     corpo: novo contêiner (
       Decoração: Nova BoxDecoração (Cor: Cores.Brown 
),
       Criança: novo recease ()
     )
   );
 }
} 

Displicamos o conteúdo existente e o substituímos por um widget de contêineres marrom, mas também precisamos criar um widget personalizado, recibo, que será colocado no contêiner.

 Classe ReceberewiDget Estende-se sem estado sem estado {
 @sobrepor
 Construção de Widget (Contexto BuildContext) {
   List & Lt; Widget & GT; widgets = nova lista e lt; widget & gt; ();
   Devolva o novo ListView (crianças: widgets);
 }
} 

08. Carregue alguns ativos

Em seguida, vamos carregar alguns ativos com o aplicativo para que possamos adicioná-los ao Exibição de lista widget dentro de. Receaso . Ativos estáticos para um aplicativo são especificados em Pubspec.yaml. Sob a seção "flutter":

 Ativos:
   - img / breakfast.jpg
   - img / curry.jpg
   - img / massas.jpg 

Também criaremos uma estrutura de dados simples no Main.Dart, emparelhando imagens com strings para atuar como uma miniatura e resumo para receitas.

 var receitas = {
   'café da manhã.jpg': 'Comece o dia certo com este café da manhã nutritivo.',
   'massas.jpg': 'Uau seus amigos fazendo sua própria massa fresca.',
   'Curry.jpg': 'Mostre suas habilidades culinárias com um curry rico.',
}; 

09. Termine acima

Finalmente, vamos atualizar Receaso Para construir uma lista de widgets exibindo as receitas. Nós usamos Image.asset. Para carregar os ativos estáticos que incluídos em Pubspec.yaml. .

 Recipes.Forach ((polegar, legenda) = & gt; widgets.add (
       Novo contêiner (criança:
         Novo preenchimento (preenchimento:
           New Edgeinsets.Todos (16.0), criança:
             novo listtilte (
               Líder: image.asset ('img /' + polegar, largura: 80.0),
               Título: Texto (legenda)
             )
           ),
           decoração:
             Nova caixa de caixa (
                 fronteira: nova fronteira (
                     Inferior: Novo Borderside (cor: cores.brown)
                 ),
                 Cor: cores.Brown 

             )
       )
     )
); 

Espero que você esteja começando a sentir como Flutter usa widgets para construir aplicativos. Tente usar o simulador para girar o dispositivo. O layout de flutuação acomoda automaticamente as alterações. Para comparação, tente o aplicativo no emulador Android.

Este artigo foi originalmente publicado em internet , a revista mais vendida do mundo para web designers e desenvolvedores. Comprar Edição 310. ou se inscrever .

Consulte Mais informação:

• Pegue sua cabeça reaja com esses cinco fatores
• 11 aplicativos criativos para iPhone gratuito para designers
• Como projetar ícones do aplicativo