1.

Internacionalização
2. Animações
3. Interligação com código nativo

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

 1. Internacionalização
•Tal como no desenvolvimento em Android nativo, com Flutter as
apps podem (e devem!) ter suporte para várias linguagens,
recorrendo à API de internacionalização.

•Tipicamente são extraídos os recursos para um cheiro à parte

( cheiro .arb) que tem os pares chave/valor das Strings a serem
usadas na app.

•O Flutter oferece suporte nativo para vários widgets Material/

Cupertino para várias linguagens. Para tal, é necessário incluir
essa dependência e associar os respetivos delegates no widget
MaterialApp.
Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

2
fi

fi
1. Internacionalização
• Adicionar a dependência no cheiro pubspec.yaml

• Permite ao Flutter saber que vai ter em

consideração a dependência dos delegates
provenientes da SDK para os widgets que oferece

• Se pretendermos suportar também os widgets

Cupertino (iOS), devemos adicionar o
flutter_cupertino_localizations também

• Guardar e correr o flutter pub get

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

3
fi

1. Internacionalização
• Para nos auxiliar no suporte à internacionalização,
podemos usar uma ferramenta chamada utter intl que
existe disponível tanto para Android Studio como Visual
Studio Code

• Para tal, devemos ir ao marketplace das extensões do

respetivo IDE, procurar por utter intl e instalar

• Toda a documentação sobre o plugin pode ser encontrada

na página do mesmo, porém, vamos ver os passos básicos

• Adicionar no pubspec.yaml a dependência do

flutter_intl e de nir o main_locale (neste caso será
en para inglês)

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

fi
fl
fl

1. Internacionalização
•Adicionar os delegates ao widget
MaterialApp na propriedade
localizationDelegates

•A partir deste momento, a app será

capaz de apresentar as diferentes
linguagens para os widgets oferecidos
pelo Flutter e pelos gerados por nós

•As linguagens suportadas pelos widgets

Flutter podem ser veri cadas aqui

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

5
fi

 1. Internacionalização
•Os cheiros de suporte à internacionalização
devem ser colocados dentro da pasta lib/l10n
que deve surgir automaticamente

•São de extensão .arb e devem estar no

formato json, contendo os pares chave/valor
de cada String

•Para acrescentar mais linguagens, basta

duplicar os cheiros e colocar os códigos dos
países que o utter intl trata do resto

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

6
fi
fi
fl

1. Internacionalização

•Para extrair uma String do código, basta

selecionar a mesma (incluindo as aspas ou
pelicas) e fazer CMD + . em MacOS ou CTRL
+ . no Windows para o VSC ou ALT/OPTION +
Enter no caso do Android Studio e escolher a
opção “Extract to ARB”

•Dar um nome à chave e a partir daí é só usar

através do S.of(context).nomeDaString

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

1. Internacionalização
•Também é oferecido o suporte para
Strings com parâmetros (interpolação),
porém, estes não funcionam tão bem Código em Dart

com a geração automática, visto que

assume que é uma String na íntegra

•Para estes casos, devemos colocar a

Ficheiro intl_en.arb

String manualmente no cheiro .arb e,

para cada parâmetro, colocar
{nomeDoParam} para que seja gerado
corretamente Depois de gerado

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

8
fi

 1. Internacionalização
•Também existe suporte para outro tipo de ferramentas, como plurais,
nome da localização, etc.

•Toda a documentação poderá ser encontrada na página o cial da

ferramenta

•O utter intl utiliza o intl do Flutter “under the hood” que permite o
suporte para a internacionalização na app, mas poderíamos usá-lo
diretamente sem recurso ao utter intl, o que acabaria por acrescentar
mais passos

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

9
fl

fl
fi
1. Internacionalização

Desa os

•Acrescentar o suporte para internacionalização à app já existente

• Fazer extract das diferentes Strings espalhadas pelo código, incluindo as com
parâmetros

• Adicionar uma linguagem nova (por exemplo, pt)

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

10
fi

2. Animações

•Com o Flutter é fácil criar animações, visto que oferece uma API rica para
animações

•As mais comuns são as animações implícitas e explícitas

•Podem ser feitas também animações mais avançadas, recorrendo a

físicas e/ou plugins de terceiros (por exemplo, Rive ou Fluttie packages)

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

11

2. Animações
Animação implícita

•A animação implícita é proveniente de widgets que implementam o

ImplicitlyAnimatedWidget

•Estes widgets acabam por ser responsáveis de animar de forma implícita

eventuais parâmetros que mudem

•Existem diversos widgets que o Flutter oferece que oferecem animações

implícitas, por exemplo, AnimatedContainer, AnimatedOpacity,
AnimatedPadding, etc.

•Ao mudarmos por exemplo a width ou color de um AnimatedContainer,

este irá interpolar entre o valor antigo e o novo, com base na propriedade da
duration e curve
Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

12

2. Animações
Animação implícita

•Já usámos um widget que tira vantagem de um AnimatedContainer, o

widget FlutterLogo, que, se virmos o seu código fonte, não é mais do
que um AnimatedContainer com uma decoration que usa o logotipo do
Flutter

•Mais informações de como podem ser usados os AnimatedWidgets e

alguns exemplos, pode ser consultado o codelab do Flutter relativo ao
mesmo: https://docs. utter.dev/codelabs/implicit-animations

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

13

fl
2. Animações
Animação explícita
•A animação explícita permite-nos um controlo granular das animações
que criamos e pressupõe a criação de um widget que irá animar com
base num controlador (AnimationController)

•São mais complexos no sentido em que existe mais código, porém,

permite-nos também agilizar melhor o que é pretendido executar com
base numa mudança de estado

•Mais informações sobre animações explícitas: https://docs. utter.dev/

codelabs/explicit-animations

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

14

fl
2. Animações
Animação explícita

• Para criar uma animação explícita tipicamente necessitamos de criar um AnimationController

e delegá-lo a uma animação que pode ser de vários tipos, podendo-se encadear várias animações

• Um tipo muito comum são as animações Tween<T> que permitem interpolar entre um valor
inicial e nal.

• As animações só funcionam no contexto de um estado de um widget, que deve ter o mixin de

TickerProvider. Os Tickers permitem às classes que os implementam, subscrever atualização
de frames, o que é importante para o controladores de animações. Para um estado que só gere
uma animação, pode ser usado o mixin SingleTickerProviderStateMixin

• Para adicionar um tipo de curva bezier para as animações, pode-se usar a CurvedAnimation

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

15
fi

 2. Animações
Passos para criação de uma animação explícita
1. Criar um StatefulWidget

2. Associar um mixin SingleTickerProviderStateMixin ao State desse widget

3. Declarar uma AnimationController e inicializa-lo no initState, por exemplo

4. Associar ao AnimationController uma qualquer animação, por exemplo, Tween<double> entre valores 0.0 e
1.0

5. Adicionar um listener para as atualizações do controlador ou usar um AnimatedWidget associado ao mesmo.

6. Fazer forward() do controlador.

7. Aceder ao valor animation.value a cada atualização.

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

16

 2. Animações
Desa os para animações

• Criar um AnimatedContainer e experimentar mudar diferentes propriedades para ver as

atualizações implícitas

• Criar um widget AnimatedBall que terá uma animação explícita para animar uma bola no
ecrã

• Adicionar botões para fazer aumentar em tamanho e diminuir

• Adicionar botão para fazer a bola “saltar”

• Experimentar encadear a animação com uma CurvedAnimation

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

17

fi

3. Interligação com código nativo

• Como visto anteriormente, os plugins permitem-nos criar uma ponte entre a
plataforma nativa (código nativo) e o Flutter

• O mecanismo é feito através de platform-channels que consistem em canais de

comunicação entre as duas camadas (Flutter <-> nativa) através de
serialização/desserialização de messagens. Isto é feito através um objeto
MethodChannel

• É possível também subscrever eventos nativos através de EventChannels

• Quando acedemos a serviços nativos (localização, sensores etc.) estamos na

maioria dos casos a usar plugins que implementam estas abstrações

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

18

3. Interligação com código nativo

• Para que seja possível comunicar entre as duas
plataformas, são utilizados codecs no processo de
serialização que convertem os dados suportados entre
as duas plataformas

• Esse mapeamento pode ser encontrado na

documentação o cial

• Na tabela apresentada, podemos ver a que cada tipo

de dados em Dart corresponde em Kotlin e vice versa,
para que possam ser tratados corretamente

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

19
fi

3. Interligação com código nativo

Criação de um plugin nativo para obter a % da bateria

No lado do Dart
1. Criar um novo StatefulWidget para tratar do plugin: battery_info.dart

2. Criar um objeto MethodChannel com o nome battery_channel

3. Criar um método para invocar um método nativo getBatteryLevel através

do método invokeMethod disponível no objeto MethodChannel

4. Utilizar um try-catch para tratar corretamente o erro da plataforma, caso

exista

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

20

3. Interligação com código nativo

Criação de um plugin nativo para obter a % da bateria
No lado do Dart

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

21
3. Interligação com código nativo
Criação de um plugin nativo para obter a % da bateria
No lado do Android (Kotlin)
1. Implementar o código nativo em Kotlin na MainActivity.kt em android/app/main/kotlin

2. Adicionar uma variável com o nome do canal battery_channel

3. No método já existente configureFlutterEngine adicionar um handler para um

MethodChannel com o nome indicado no passo anterior

4. Criar um método em Kotlin para obter o estado da bateria (tal e qual como se faz no
desenvolvimento nativo)

5. Adicionar a veri cação do método invocado dentro do MethodChannel para invocar o

método nativo criado e devolver o resultado.
Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

22
fi

3. Interligação com código nativo

Criação de um plugin nativo para obter a % da bateria
No lado do Android (Kotlin)

Arquitecturas Móveis (DEIS-ISEC, 2021/2022)

23