Introdução ao uso do Dart no Flutter

O Flutter é uma das tecnologias de rápido crescimento quando se trata de desenvolvimento de plataforma cruzada, e o ingrediente secreto por trás da criação de um aplicativo Flutter é a linguagem Dart.

Embora você possa começar a desenvolver um aplicativo Flutter mesmo se não estiver familiarizado com o Dart, este tutorial cobrirá a sintaxe essencial e as informações que você precisa saber para se sentir confortável ao criar um aplicativo Flutter.

O que é Dart?

Dart é uma linguagem versátil e otimizada para o cliente para aplicativos de desenvolvimento rápido em qualquer web ou plataforma móvel e pode ser usado em dispositivos desktop e embutidos. O principal objetivo da linguagem Dart é fornecer a você um conjunto de ferramentas e uma linguagem de programação que o torna produtivo e evolui conforme os requisitos e necessidades dos desenvolvedores aumentam.

Dart é uma linguagem abrangente e oferece excelentes recursos de linguagem, como Future, Stream, Sound Null Safety, etc. .

O Dart foi projetado para ser familiar à maioria dos desenvolvedores com várias experiências em programação. Portanto, não importa se você tem experiência em JavaScript e TypeScript ou se já foi um programador orientado a objetos, trabalhará com o Dart é familiar.

E, por causa da arquitetura do Dart, o recurso matador, o hot reload e a programação declarativa são possíveis no Flutter.

Mais importante, o Dart também vem com muitas bibliotecas integradas, como dart: async, dart: convert, dart: html, dart: io, etc., bem como um ecossistema fantástico e excelente gerenciador de pacotes pub.dev .

Quer você queira usar o Flutter ou não, o Dart seria uma ótima escolha para aprender e usar em seu próximo aplicativo.

Se quiser experimentar rapidamente, você pode usar dartpad.dev online.

Como usar o Dart

Antes de começar a criar um aplicativo Flutter, você deve conhecer alguns conceitos do Dart:

1. Função principal ():

O ponto de entrada de cada aplicativo é a função a main () . Mesmo se você quiser imprimir algo no console, você deve ter uma parte main () .

 void main () { var list=['maçãs','bananas','laranjas']; list.forEach ((item) { print ('$ {list.indexOf (item)}: $ item'); });
} 

No Flutter, você iniciará seu aplicativo a partir da função main () em PROJCT_ROOT/lib/main.dart , onde você passa seu widget principal para runApp () que o anexará à tela. Esse é o primeiro ponto de entrada principal.

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

2. : (ponto e vírgula):

Você precisa de ; (ponto e vírgula) no Dart, como você pode ver no exemplo acima:

 runApp (MyApp ());

3. Tipos e segurança nula

Dart é uma linguagem segura de digitação. Ele usa verificação de tipo estático e verificações de tempo de execução. Quando você aprende a sintaxe, entende o código Flutter mais rápido. Aqui está a anatomia de uma variável simples:

[MODIFICADOR] [TIPO] [VARIABLE_NAME]=[VALOR];

//por exemplo:
nome da string final="Majid Hajian";

Embora os tipos sejam obrigatórios, as anotações de tipo são opcionais devido à inferência de tipo. Então, você pode encontrar isto:

 var name="Majid Hajian";//a partir de agora `nome` é uma String;

Os modificadores de variáveis ​​de inicialização mais comuns no Dart são var , final , const e late , mas lembre-se de que você pode usar todos os modificadores, exceto var , ao usar o tipo antes do nome da variável.

 var name="Majid Hajian";
Nome da string="Majid Hajian";
nome da string final="Majid Hajian";
const String name="Majid Hajian";

Usar var ou nenhum modificador cria uma variável flexível, o que significa que você pode alterar o valor a qualquer momento. Se você nunca pretende modificar a variável, você deve usar final , que define a variável apenas uma vez, ou const , que forma uma constante de tempo de compilação.

Mas existem situações mais complexas. Vamos dar uma olhada na definição de tipo Mapa e Lista :

//Tipo de lista (matriz): Lista 
//por exemplo:
Listar  nomes=['Majid','Hajian']; //Tipo de mapa (valores-chave): Mapa 
//por exemplo:
Map  age={'sara': 35,'susan: 20};

Em muitos casos, você pode não fornecer informações suficientes ao analisador Dart e pode enfrentar um erro de fundição de tipo. Vejamos um exemplo:

 var nomes=[];

Os tipos de variáveis ​​inferem que List e dynamic podem ser de qualquer tipo porque não fornecemos o tipo possível da matriz quando inicializamos a variável. Portanto, o Dart lança o tipo em List onde poderia ser qualquer coisa. Ao adicionar uma anotação ao valor ao inicializar ou lançar a variável, podemos evitar esse tipo de erro.

 nomes finais=<> [];
//Ou
Lista final <> nomes=[];

A partir do Dart 2.12, o Dart é uma linguagem segura e nula, o que significa que os tipos em seu código não são anuláveis ​​por padrão, e isso indica que uma variável não pode conter null a menos que você diga que podem.

 final String name=null;
//ou
nome final da string;

Observe que a variável acima não é mais válida porque inicializamos uma variável com um valor null . Como não especificamos isso ainda, os erros de desreferência nula de tempo de execução se transformam em erros de análise de tempo de edição.

É aqui que ? é útil. Para atribuir a variável com o valor null , podemos usar ? para sua declaração de tipo.

String

 final? nome=nulo;

Você verá essa sintaxe com frequência no Flutter 2.0.0+ junto com o Dart 2.12.0+.

Finalmente, os tipos integrados mais comuns no Dart que você encontrará em um aplicativo Flutter são os seguintes:

• Números (int, double)
• Strings (String)
• Booleanos (bool)
• Listas (lista, também conhecida como matrizes )
• Conjuntos (conjunto)
• Mapas (Mapa)
• Símbolos (símbolo)
• O valor nulo (nulo)

4. Aulas

Dart é uma linguagem orientada a objetos com classes e herança de base combinada. Isso significa que você pode criar tipos abstratos , classe , usar implementar e extends . Você também pode ver com onde deseja usar um mix-in.

Em classes Dart, o nome do construtor é igual a className , assim:

 classe MyApp { MyApp ();//construtor
}

Você não precisa ter um construtor se não precisar inicializar a variável de instância ou criar um objeto. Caso seja necessário, você deve passá-los por meio de parâmetros do construtor.

 classe MyApp {
MyApp (this.title); String final? título;
}

No Dart 2, você não precisa usar a palavra-chave new para instanciar uma classe.

 final myapp=MyApp ('Majid Hajian');
imprimir (meuaplicativo.title);

Todos os widgets em Flutter são uma classe estendida de StatelessWidget ou StatefullWidget . Portanto, você pode criar seu widget (classe):

 class MyApp extends StatelessWidget { }

Ambos StatelessWidget e StatefullWidget têm o método build () para construir suas telas. Portanto, para implementar seus widgets a serem construídos, você deve @override o método build () .

 class MyApp extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return Container (); }
}

A convenção é iniciar className com uma letra maiúscula.

5. Parâmetros no Dart

É fundamental aprender como você pode definir parâmetros, seja em uma classe ou em uma função, pois é uma das partes cruciais do desenvolvimento do Flutter.

• obrigatório

No Dart, se você deseja definir um parâmetro obrigatório, pode passá-lo para um construtor ou função.

 String getUrl (String prefix, String host) { Retorna'';
}
//OU
class MyApp { MyApp (this.title); String final? título;
}

Em ambos os casos, você precisa passar os parâmetros corretamente para a posição esperada. Isso também é o que chamamos de parâmetros posicionais.

• opcional

Em muitas situações, você descobrirá que deseja tornar um parâmetro opcional. Por exemplo, para alterar o código acima, podemos codificar assim:

 String getUrl ({String? prefix, String? host}) { Retorna'';
}
//OU
class MyApp { MyApp ({this.title}); String final? título;
}

Usamos {} para definir nossos parâmetros opcionais que são nomeados conforme descrevemos. Agora, para usar os parâmetros nomeados, use o nome dos parâmetros e atribua o valor.

 getUrl (host:'', prefixo:'');
//Ou
MyApp (título:'Majid');

Como você pode ver, a principal vantagem de usar essa abordagem é que você não precisa passar o valor para a posição exata do parâmetro.

Mais importante, suas funções e parâmetros de classe são autodocumentados. Em outras palavras, você pode simplesmente definir o nome do parâmetro e passar o valor. Definir parâmetros de nome é útil quando você deseja especificar muitos parâmetros para um método ou classe.

Você encontrará parâmetros nomeados no Flutter com frequência. Aqui está um exemplo do widget Texto no Flutter:

 Texto ( this.data, { Chave chave, esse estilo, this.strutStyle, this.textAlign, this.textDirection, this.locale, this.softWrap, this.overflow, this.textScaleFactor, this.maxLines, this.semanticsLabel, this.textWidthBasis, this.textHeightBehavior,
})

O this.data é posicional, o que significa que o primeiro argumento é obrigatório para passar, mas o resto dos parâmetros são opcionais, pois são definidos em {} .

Você não pode perguntar como um parâmetro nomeado pode ser necessário em vez de opcional. No Dart 2.12+, agora você tem a palavra-chave required que torna um argumento obrigatório para ser transmitido. Vejamos o exemplo acima.

 classe MyApp { MyApp ({this.title});//parâmetro nomeado opcional String final? título;
}

Mas se você usar a palavra-chave required antes do argumento, tornaremos obrigatório transmiti-la, mesmo que seja um parâmetro nomeado.

 classe MyApp { MyApp ({obrigatório this.title}); String final? título;
}

Se agora você instanciar a classe MyApp () , você também deve passar o title ; caso contrário, o compilador gerará um erro.

 print (MyApp (title:'Majid'));

6. Formatação de Dart

O Dart vem com uma ferramenta de formatação que ajuda a tornar seu código mais legível. Aqui está uma dica que o ajudará a formatar seu código muito melhor, especialmente no Flutter, onde você terá muitos widgets aninhados. Use , onde puder!

 Coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos:  [ Texto ('Você pressionou o botão tantas vezes:'), Texto ('$ _ counter', estilo: Theme.of (context).textTheme.headline4), ],
),

Aqui está um widget de Coluna que tem dois filhos Texto . Nenhum dos filhos usa , onde passam argumentos. O texto é apertado e não é facilmente legível, mas se você usar , no final do último parâmetro em cada widget de Texto , ele será formatado e mais amigável.

 Coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos:  [ Texto( 'Você pressionou o botão tantas vezes:', ), Texto( '$ _counter', style: Theme.of (context).textTheme.headline4, ), ],
),

Você obterá a formatação pronta para uso gratuitamente com a ferramenta de formatação na linha de comando ou o editor de sua escolha junto com o plug-in Dart.

7. Funções

Você pode definir uma função dentro de uma classe-ou seja, métodos-ou no nível superior. Criação de uma função tão simples quanto a sintaxe abaixo.

//nível superior
getMyname () {
//lógica
} //OU class MyClass () { getMyName () { }
}

7. Async/Await

O Dart fornece programação assíncrona via Future ou Stream. Para definir um Futuro , você pode usar a palavra-chave async .

 Futuro  getUrl ({String? prefix, String? host}) async { return'd';
}

E para esperar até que o valor seja resolvido, você pode usar a palavra-chave await .

 main () async { url final=espera getUrl (prefixo:'', host:'');
}

Você deve usar a palavra-chave await envolvida em uma função/método com a palavra-chave async .

Para criar um Stream , você usará a palavra-chave async . Agora, você pode se inscrever no stream e obter o valor sempre que for emitido, até cancelar a inscrição.

 getUrl (prefixo:'', host:'').listen ( (Valor da string) { imprimir (valor); }, );

Observe que a função listen () aceita uma função, ou seja, um retorno de chamada, e como tudo é um objeto no Dart, você pode transmiti-los até mesmo em funções. Isso é comumente usado no Flutter quando eventos estão ocorrendo, como onPress .

 TextButton ( onPressed: () { //pressionado //lógica }, filho: Texto ('Enviar'),
)

Compreendendo uma árvore de widgets Flutter

Agora, você deve ser capaz de ler, entender e escrever o código Flutter. Para provar isso, vamos dar um exemplo:

 class MyCustomWidget extends StatelessWidget { MyCustomWidget ({this.counter}); String final? balcão; @sobrepor Construção de widget (contexto BuildContext) { Centro de retorno ( filho: coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos:  [ Texto( 'Você pressionou o botão tantas vezes:', ), Texto( '$ counter', style: Theme.of (context).textTheme.headline4, ), ], ), ); }
}

Primeiro, você criará seu widget personalizado onde usa extends . Em seguida, você @override o método build () . Você retornará Center , um widget predefinido do Flutter com vários parâmetros de nome, incluindo o child onde você atribui Column .

Coluna tem vários parâmetros de nome onde você usa apenas mainAxisAlignment e children . Você terá dois widgets Texto onde eles têm parâmetros posicionais e nomeados e assim por diante.

Você verá agora como é fácil entender este código e agora pode até escrever o seu!

Conclusão

Flutter é uma tecnologia fantástica que ajuda você a criar um aplicativo de plataforma cruzada e o Dart é sua base. O Dart é fácil de aprender quando você sabe por onde começar e o que aprender primeiro.

Neste artigo, revisamos os fundamentos mais amplamente usados ​​no Flutter para que você possa abrir um aplicativo Flutter e não apenas entender a sintaxe inicial, mas também escrever seu código Dart.

A postagem Introdução ao uso do Dart no Flutter apareceu primeiro no LogRocket Blog .

Source link