My_Flutter_Learning_note

Vibrar

• introdução

o que

• Estrutura
• código aberto
• Aplicativo multi-placform da Base CodeBase (Cross Pateform).

Por que usar o fleto

Flutter transforma o processo de desenvolvimento de aplicativos. Construa, teste e implante aplicativos belos móveis, web, desktop e incorporados a partir de uma única base de código.

quem se desenvolve

• desenvolvido pelo Google.
• Introduzido em 2015.
• Lançado em 2017.

instalação

Configuração Envierement

• Abra a paleta de comando. .

• Shift+CMD+P no Mac OS.

• Shift+Ctrl+P nas janelas.

• Tipo NOVO PROJETO FLUTTER

• Selecione Selecione Flutter New Project

• Selecione Aplicativo

• Selecione o caminho do projeto onde deseja colocar seu projeto.

• Digite o nome do seu projeto

• pressione Enter

Ooooo ... está pronto

• Você pode fazer qualquer coisa aqui que deseja em seu projeto.
• Aqui está disponível Lib/Main.Dart ## na pasta Lib Main.Dart.

Primeiro aplicativo Flutter

Copie a pasta da documentação oficial segue o URL? https://codelabs.developers.google.com/codelabs/flutter-codelab-first#2

Adicionando botão

ElevatedButton (OnPressed: () {
imprimir ('Próximo botão pressionado'); }, criança: text ('próximo'),),

principal () ou função principal

É apenas dizer para executar o aplicativo Flutter. que é definido na função myfunction () ex. void main () {runApp (myfunction ()); }

Os widgets são os elementos dos quais você constrói todos os aplicativos de flutter.

Como você pode ver, até o próprio aplicativo é um widget.

Ex. 1.StatatelessWidget 2.STATILYWIDGET

classe myApp () {#O ponto de partida do seu aplicativo.

}

• MyAppstate # define o estado do seu aplicativo

• O MyAppState # define os dados que o aplicativo precisa para funcionar. No momento, ele contém apenas uma única variável com o par de palavras aleatório - - -Current. Você adicionará a isso mais tarde.

• ChangeNotifier

• maneira de gerenciar o estado do aplicativo em vibração. Também Maney Powefull Ways são nenhum anexo.

• A classe estadual estende o Choctornetifier, o que significa que pode notificar outras pessoas sobre suas próprias mudanças.

• Todo widget define um método Build () que é chamado automaticamente sempre que as circunstâncias do widget mudam para que o widget esteja sempre atualizado.

• O MyHomePage rastreia as alterações no estado atual do aplicativo usando o método de relógio.

• Scaffold (): # É um widget útil e é encontrado na grande maioria dos aplicativos de flutter do mundo real.

• Column (): # é um dos widgets de layout mais básicos no Flutter.

• O Wordlair # fornece vários getters úteis, como aspascalcase ou Assnakecase. Aqui, usamos aslowercase

Formatação do código de vibração

https://docs.flutter.dev/development/tools/formatting

O código de fleta geralmente envolve a criação de estruturas de dados em forma de árvore bastante profundas, por exemplo, em um método de construção. Para obter uma boa formatação automática, recomendamos que você adote as vírgulas opcionais. A diretriz para adicionar uma vírgula à direita é simples: sempre adicione uma vírgula à direita no final de uma lista de parâmetros em funções, métodos e construtores em que você se preocupa em manter a formatação que criou. Isso ajuda o formatador automático a inserir uma quantidade apropriada de quebras de linha para o código no estilo de vibração.

• getNext ()
• Tudo o que resta é chamar o método getNext do retorno de chamada do botão.
• Tornando o aplicativo mais bonito
• Extraia um widget
• A linha responsável por mostrar o par de palavras atual se parece com o seguinte: text (appstate.current.aslowercase). Para transformá -lo em algo mais complexo, é uma boa ideia extrair essa linha para um widget separado. Ter widgets separados para partes lógicas separadas da sua interface do usuário é uma maneira importante de gerenciar a complexidade no vibração.

Adicione um cartão

refattor

Extrair widget

• Selecione Texto Clique em Refactor
• Clique em Extrair Widget
• Insira o nome do widget
• Uma aula será criada como seus nomes inseridos

preenchimento

• Selecione texto
• Clique com o botão direito do mouse
• selecione RefActor
• Selecione embrulhar com estofamento
• Pressione Enter

// Nota: o fleto usa a composição sobre a herança sempre que pode. Aqui, em vez de preencher ser um atributo de texto, é um widget!

// Dessa forma, os widgets podem se concentrar em sua única responsabilidade, e você, o desenvolvedor, têm total liberdade em como compor sua interface do usuário. Por exemplo, você pode usar o widget de preenchimento para encaixar texto, imagens, botões, seus próprios widgets personalizados ou todo o aplicativo. O widget não se importa com o que está envolvido.

Tema e estilo

Funcionalidade

1. Selecione um widget de layout.
2. Widget visível (texto, imagem, ícones).
3. Adicione o widget visível ao widget de layout.
4. Aplicativos de materiais.
5. Aplicativos não materiais.

Tarefa realizada

• Crie um layout
• Adicione imagem
• Adicione o título
• Adicione a legenda
• Adicionar ícones de classificação
• Adicione o ícone de chamada
• Adicionar rótulo
• Adicione o ícone da rota
• Adicionar rótulo
• Adicione o ícone de compartilhamento
• Adicionar rótulo
• Adicionar texto (descrição)

Criando aplicativos responsivos e adaptáveis

• A classe LayoutBuilder 'cria uma árvore de widgets que pode depender do tamanho do widget pai.'

• Aspectratio ('Um widget que tenta dimensionar a criança para uma proporção específica.').

• AlfabearsingLechildLayout ('Um widget que adia o layout de seu único filho a um delegado.')

• SingleChildLayoutDelegate, ('que controla o layout da criança.')

• Custommultichildlayout ('que usa um delegado para posicionar vários filhos.')

• FittIlBox ('Escala e posiciona seu filho em si mesma, de acordo com o ajuste.')

• Caixa fracionária

• LayoutBuilder

• MediaQuery

• MediaQuerydata

• OrientationBuilder

Widgets de layout

Criança solteira

• Alinhe- alinhamentos- uma criança dentro de si. É preciso um valor duplo entre -1 e 1, para o alinhamento vertical e horizontal.

• Aspetratio tenta dimensionar a criança para uma proporção específica.

• A caixa restrita impõe restrições de tamanho ao seu filho, oferecendo controle sobre o tamanho mínimo ou máximo.

• AlfabearsingLechildLayout - usa uma função delegada para posicionar uma única criança. O delegado pode determinar as restrições de layout e o posicionamento para a criança.

• Expandido e flexível - permite que um filho de uma linha ou coluna encolher ou cresça para preencher qualquer espaço disponível.

• Caixa fracionária - tamanhos de seu filho em uma fração do espaço disponível.

• LayoutBuilder - constrói um widget que pode se refletir com base no tamanho dos pais.

• SingleChildScrollView - adiciona rolagem a uma única criança. Frequentemente usado com uma linha ou coluna.

Multicled

• Coluna, linha e flexão - elimina crianças em uma única execução horizontal ou vertical. A coluna e a linha estendem o widget flex.

• CustommultichildLayout - usa uma função delegada para posicionar várias crianças durante a fase de layout.

• Fluxo - semelhante a custommultichildlayout, mas mais eficiente porque é realizado durante a fase de tinta, em vez da fase de layout.

• ListView, GridView e CustomScrollView - Fornece listas roláveis ​​de crianças.

• Pilha - camadas e posições vários filhos em relação às bordas da pilha. Funções de maneira semelhante à posição-fixada no CSS.

• Tabela - usa um algoritmo de layout de tabela clássico para seus filhos, combinando várias linhas e colunas.

• Wrap - Exporta seus filhos em várias corridas horizontais ou verticais.

• Animação 'O principal bloco de construção do sistema de animação é a classe de animação. Uma animação representa um valor de um tipo específico que pode mudar ao longo da vida útil da animação. A maioria dos widgets que executam uma animação recebe um objeto de animação como um parâmetro, do qual eles lêem o valor atual da animação e para a qual ouvem as alterações nesse valor. '

• AddListener 'Sempre que o valor da animação muda, a animação notifica todos os ouvintes adicionados ao Addlistener. Normalmente, um objeto de estado que ouve uma animação chama o SetState em seu retorno de chamada do ouvinte para notificar o sistema de widgets de que ele precisa reconstruir com o novo valor da animação. '

• AnimatedWidget, 'é mais útil para widgets animados sem estado'

• AnimatedBuilder, 'é útil para widgets mais complexos que desejam incluir uma animação como parte de uma função de construção maior'.

• As animações da AddStatusListener também fornecem um animação, que indica como a animação evoluirá com o tempo. '

• AnimationController ''