FlutterWebsite
2.0.0
El sitio web Flutter.dev, ahora en Flutter!
Ver el sitio web de Flutter
Versión html
Versión de lona
| De oficina | Tableta | Móvil |
|---|---|---|
 |  |  |
Esta plantilla fue creada para una presentación de la semana de Flutter sobre la creación de sitios web receptivos con el marco receptivo de Flutter.
Si le gusta este proyecto o le ayudó, deje su correo electrónico para obtener actualizaciones. Aunque no es necesario, ¡lo agradecería mucho!
Cree sitios web de Flutter receptivos fácilmente - Presentación de Flutter Week
29:45 - Recreando el sitio web de Flutter en Flutter.
Seleccione componentes con comentarios de desarrollo y tutorial de uso del marco receptivo.
El componente animado del carrusel es llamativo y hermoso. Afortunadamente, crearlo en Flutter es muy fácil. ¡Todo lo que necesitamos es crear primero un andamio de animación!
La animación se puede dividir en componentes carousel , slide , element y animation . Cada componente es una capa en nuestro andamio de animación con sus propias responsabilidades y lógica.
carousel : hay 4 toboganes de carrusel. Cada diapositiva se muestra durante aproximadamente 6400 milisegundos. La responsabilidad del carrusel es contener los portaobjetos y coordinar sus transiciones.
carousel
slide : cada diapositiva contiene imágenes y texto que aparecen y desaparecen con animaciones de entrada y salida. La responsabilidad de la diapositiva es posicionar a sus elementos infantiles y coordinar sus animaciones.
carousel_slide_1
carousel_slide_2
carousel_slide_3
carousel_slide_4
model_carousel_item_animation
element : los elementos son el contenido de las diapositivas. Los elementos son widgets simples que no saben cómo serán animados. Su único requisito es apoyar ser animado. La lógica de animación se abstrae a una capa separada.
carousel_text
Image
animation - Comportamientos de animación. Las animaciones exponen una interfaz que los animadores como nuestra diapositiva pueden usar para controlar el estado de animación.
animation_slide_up_down_fade
Con el andamio de animación creado, crear la animación en sí es muy fácil.
Finalmente, toda la animación está envuelta en un ResponsiveWrapper y se le da un ancho y altura de referencia MediaQuery . Esto permite que el carrusel se muestre correctamente en cualquier tamaño de pantalla.
ResponsiveWrapper (
maxWidth : 1200 ,
minWidth : 1200 ,
defaultScale : true ,
mediaQueryData : MediaQueryData (size : Size ( 1200 , 640 )),
child : Carousel ()
)El andamio de animación se construyó en base a un modelo de animación de línea de tiempo. Todas las duraciones de animación son relativas, lo que permite una fácil personalización y ajustes en el futuro. Esperemos que algún día, alguien cree un editor de animación de arrastrar y soltar para Flutter que generará todo el código automáticamente.
La sección de características es una fila simple con componentes de características. Eso es hasta que el diseño se estrecha y no hay suficiente espacio para una fila. ¡Entonces debe convertirse en una columna!
ResponsiveRowColumn ayuda a la transición entre los diseños de fila y columna en diferentes tamaños de pantalla. Cuando rowColumn es verdadero, el diseño es una fila. Cuando rowColumn es falso, el diseño es una columna.
ResponsiveRowColumn (
rowColumn : ! ResponsiveWrapper . of (context). isSmallerThan ( DESKTOP ),
children : [
ResponsiveRowColumnItem (
child : Feature ()
)
]
)
El componente de detalle de la función tiene dos filas de contenido, cada una con un porcentaje de ancho diferente. El equilibrio aquí es 7: 5 con el gráfico que ocupa un poco más de espacio que el texto. Este comportamiento se puede crear estableciendo un valor flexible para cada fila. Sin embargo, el Flex debe eliminarse cuando el diseño está en modo de columna para evitar restricciones no válidas.
ResponsiveRowColumnItem se usa para envolver a los niños en un widget Flexible cuando está en un diseño de fila o columna. Cuando se establece rowFlex , el niño se envolverá en un Flexible con un valor flexible de 5. Del mismo modo, columnFlex proporciona el mismo comportamiento para los diseños de columnas. Los diseños se heredan del valor de isRowColumn de la ResponsiveRowColumn de los padres.
ResponsiveRowColumnItem (
rowFlex : 5 ,
columnOrder : 1 ,
child : FeatureDetail (),
) Otro desafío de capacidad de respuesta es el pedido de elementos. Para controlar el orden específico de los elementos en un diseño de fila o columna, establezca una rowOrder o columnOrder .
¡Increíble, Flutter dentro de Flutter! Funciona .. más o menos. Iframes integrados en Flutter Web tiene algunos problemas.
Flutter Web es fenomenal y fue muy divertido resolver algunos de los problemas esenciales básicos de capacidad de respuesta en la web. A pesar de todos los años que he estado haciendo desarrollo web, esta plantilla es el sitio web más "perfecto" que he creado. Gracias al poder del marco subyacente, sé precisamente cómo se ve el diseño en todos los tamaños.
Flutter Web es revolucionaria, pero todavía hay mucho trabajo por hacer. En algunas áreas, Flutter ya está por delante, pero en otras, el ecosistema está literalmente años atrás. Para los desafíos por delante, abordemos los juntos y resolvamos los problemas centrales.
Construir este sitio web de Flutter también expuso algunos puntos de dolor. Avíseme si está trabajando o está interesado en abordar uno de los artículos a continuación.
Inspiración:
Desarrollo:
Patrocinador: sin codificación - Flutter App UI y Builder de sitios web
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/
