FlutterWebsite
2.0.0
O site Flutter.Dev, agora em Flutter!
Veja o site da Flutter
Versão HTML
Versão de tela
| Desktop | Comprimido | Móvel |
|---|---|---|
 |  |  |
Este modelo foi criado para uma apresentação da Flutter Week sobre a criação de sites responsivos com a estrutura responsiva da Flutter.
Se você gosta deste projeto ou o ajudou, deixe seu e -mail para atualizações. Embora não seja necessário, eu agradeço muito!
Construa sites de fleta responsiva facilmente - Flutter Week Apresentation
29:45 - recriando o site da Flutter em Flutter.
Selecione componentes com comentários de desenvolvimento e passo a passo responsivo.
O componente de carrossel animado é atraente e bonito. Felizmente, criá -lo em vibração é muito fácil. Tudo o que precisamos é primeiro criar um andaime de animação!
A animação pode ser dividida em componentes de carousel , slide , element e animation . Cada componente é uma camada em nosso andaime de animação com suas próprias responsabilidades e lógica.
carousel - Existem 4 lâminas de carrossel. Cada slide é exibido por aproximadamente 6400 milissegundos. A responsabilidade do carrossel é manter escorregadores de crianças e coordenar suas transições.
carousel
slide - Cada slide contém imagens e texto que aparecem e desaparecem com animações de entrada e saída. A responsabilidade do slide é posicionar seus elementos filhos e coordenar suas animações.
carousel_slide_1
carousel_slide_2
carousel_slide_3
carousel_slide_4
model_carousel_item_animation
element - elementos são o conteúdo dos slides. Os elementos são widgets simples que não sabem como serão animados. O único requisito deles é apoiar a animação. A lógica de animação é abstraída para uma camada separada.
carousel_text
Image
animation - comportamentos de animação. As animações expõem uma interface que os animadores como nosso slide podem usar para controlar o estado de animação.
animation_slide_up_down_fade
Com o andaime de animação criado, criar a animação em si é muito fácil.
Finalmente, toda a animação é envolvida em um ResponsiveWrapper e recebe uma largura e altura de referência MediaQuery . Isso permite que o carrossel seja exibido corretamente em qualquer tamanho de tela.
ResponsiveWrapper (
maxWidth : 1200 ,
minWidth : 1200 ,
defaultScale : true ,
mediaQueryData : MediaQueryData (size : Size ( 1200 , 640 )),
child : Carousel ()
)O andaime de animação foi construído com base em um modelo de animação da linha do tempo. Todas as durações de animação são relativas, o que permite fácil personalização e ajustes no futuro. Felizmente, um dia, alguém criará um editor de animação de arrastar e soltar para o Flutter que gerará todo o código automaticamente.
A seção Recursos é uma linha simples com componentes de recurso. Isso é até que o layout se estreite e não há espaço suficiente para uma fileira. Então ele precisa se tornar uma coluna!
ResponsiveRowColumn ajuda a fazer a transição entre os layouts de linha e coluna em diferentes tamanhos de tela. Quando rowColumn é verdadeiro, o layout é uma linha. Quando rowColumn é falso, o layout é uma coluna.
ResponsiveRowColumn (
rowColumn : ! ResponsiveWrapper . of (context). isSmallerThan ( DESKTOP ),
children : [
ResponsiveRowColumnItem (
child : Feature ()
)
]
)
O componente detalhado do recurso possui duas linhas de conteúdo, cada uma com uma porcentagem de largura diferente. O equilíbrio aqui é 7: 5, com o gráfico ocupando um pouco mais de espaço do que o texto. Esse comportamento pode ser criado definindo um valor flexível para cada linha. No entanto, o Flex precisa ser removido quando o layout estiver no modo de coluna para evitar erros de restrições inválidos.
ResponsiveRowColumnItem é usado para embrulhar crianças em um widget Flexible quando em um layout de linha ou coluna. Quando rowFlex é definido, a criança será embrulhada em um Flexible com um valor flexível de 5. Da mesma forma, columnFlex fornece o mesmo comportamento para os layouts da coluna. Os layouts são herdados do valor isRowColumn do ResponsiveRowColumn .
ResponsiveRowColumnItem (
rowFlex : 5 ,
columnOrder : 1 ,
child : FeatureDetail (),
) Outro desafio de capacidade de resposta é o pedido de itens. Para controlar a ordem específica dos itens em um layout de linha ou coluna, defina um rowOrder ou columnOrder .
Incrível, vibrar dentro de Flutter! Funciona .. mais ou menos. Os iframes incorporados na Web Flutter tem alguns problemas.
A Flutter Web é fenomenal e foi realmente divertido resolver alguns dos problemas essenciais básicos de capacidade de resposta na Web. Apesar de todos os anos em que tenho feito desenvolvimento na web, esse modelo é o site mais "perfeito" que já criei. Graças ao poder da estrutura subjacente, sei com precisão como o layout olha para todos os tamanhos.
A Flutter Web é revolucionária, mas ainda há muito trabalho a fazer. Em algumas áreas, Flutter já está à frente, mas em outras, o ecossistema está literalmente anos atrasado. Para os desafios pela frente, vamos enfrentá-los juntos de frente e resolver os problemas principais.
Construir este site da Flutter também expôs alguns pontos de dor. Informe -me se você estiver trabalhando ou estiver interessado em enfrentar um dos itens abaixo.
Inspiração:
Desenvolvimento:
Patrocinador: Codterly - Flutter App UI e Site Builder
BSD Zero Clause License
Copyright © 2020 Codelessly
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
Except as otherwise noted, the content of this repository is licensed under the
Creative Commons Attribution 3.0 License [1], and code samples are licensed
under the BSD License:
Copyright 2012, the project authors. All rights reserved. Redistribution and use
in source and binary forms, with or without modification, are permitted provided
that the following conditions are met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following
disclaimer in the documentation and/or other materials provided
with the distribution.
* Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived
from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
[1] http://creativecommons.org/licenses/by/3.0/
