FlutterWebsite
2.0.0
Le site Web Flutter.Dev, maintenant à Flutter!
Voir le site Web de Flutter
Version html
Version sur toile
| Bureau | Comprimé | Mobile |
|---|---|---|
 |  |  |
Ce modèle a été créé pour une présentation de la semaine Flutter sur la création de sites Web réactifs avec le cadre réactif Flutter.
Si vous aimez ce projet ou si cela vous a aidé, veuillez laisser votre e-mail pour les mises à jour. Bien que ce ne soit pas nécessaire, je l'apprécierais beaucoup!
Construisez facilement les sites Web de flottement - présentation de la semaine Flutter
29:45 - Recréer le site Web de Flutter en Flutter.
Sélectionnez des composants avec des commentaires de développement et une procédure pas à pas d'usage du cadre réactif.
Le composant de carrousel animé est accrocheur et beau. Heureusement, le créer en flottement est très facile. Tout ce dont nous avons besoin est de créer d'abord un échafaudage d'animation!
L'animation peut être décomposée en composants carousel , slide , element et animation . Chaque composant est une couche de notre échafaudage d'animation avec ses propres responsabilités et logique.
carousel - Il y a 4 diapositives de carrousel. Chaque diapositive est affichée pour environ 6400 millisecondes. La responsabilité du carrousel est de tenir les diapositives des enfants et de coordonner leurs transitions.
carousel
slide - Chaque diapositive contient des images et du texte qui apparaissent et disparaissent avec des animations d'entrée et de sortie. La responsabilité de la diapositive est de positionner ses éléments enfants et de coordonner leurs animations.
carousel_slide_1
carousel_slide_2
carousel_slide_3
carousel_slide_4
model_carousel_item_animation
element - Les éléments sont le contenu des diapositives. Les éléments sont des widgets simples qui ne savent pas comment ils seront animés. Leur seule exigence est de soutenir l'animation. La logique d'animation est abstraite à une couche séparée.
carousel_text
Image
animation - comportements d'animation. Les animations exposent une interface que les animateurs tels que notre diapositive peuvent utiliser pour contrôler l'état d'animation.
animation_slide_up_down_fade
Avec l'échafaudage d'animation créé, la création de l'animation elle-même est très facile.
Enfin, l'animation entière est enveloppée dans ResponsiveWrapper et a reçu une largeur et une hauteur MediaQuery référence. Cela permet au carrousel de s'afficher correctement à n'importe quelle taille d'écran.
ResponsiveWrapper (
maxWidth : 1200 ,
minWidth : 1200 ,
defaultScale : true ,
mediaQueryData : MediaQueryData (size : Size ( 1200 , 640 )),
child : Carousel ()
)L'échafaudage d'animation a été construit sur la base d'un modèle d'animation chronologique. Toutes les durées d'animation sont relatives, ce qui permet une personnalisation et des ajustements faciles à l'avenir. Espérons qu'un jour, quelqu'un créera un éditeur d'animation Drag and Drop pour Flutter qui générera automatiquement tout le code.
La section des fonctionnalités est une ligne simple avec des composants de fonctionnalité. C'est jusqu'à ce que la disposition se rétrécit et qu'il n'y ait pas assez de place pour une rangée. Ensuite, il doit devenir une colonne!
ResponsiveRowColumn aide à la transition entre les dispositions de ligne et de colonnes à différentes tailles d'écran. Lorsque rowColumn est vrai, la disposition est une ligne. Lorsque rowColumn est faux, la disposition est une colonne.
ResponsiveRowColumn (
rowColumn : ! ResponsiveWrapper . of (context). isSmallerThan ( DESKTOP ),
children : [
ResponsiveRowColumnItem (
child : Feature ()
)
]
)
Le composant de détail de caractéristique a deux lignes de contenu, chacune avec un pourcentage de largeur différent. L'équilibre ici est de 7: 5 avec le graphique prenant un peu plus d'espace que le texte. Ce comportement peut être créé en définissant une valeur flexible pour chaque ligne. Cependant, le flex doit être supprimé lorsque la disposition est en mode colonne pour éviter les erreurs de contraintes non valides.
ResponsiveRowColumnItem est utilisé pour envelopper les enfants dans un widget Flexible lorsqu'il est en ligne ou une disposition de colonne. Lorsque rowFlex est défini, l'enfant sera enveloppé dans un Flexible avec une valeur flexible de 5. De même, columnFlex fournit le même comportement pour les dispositions de colonnes. Les dispositions sont héritées de la valeur isRowColumn de Parent ResponsiveRowColumn .
ResponsiveRowColumnItem (
rowFlex : 5 ,
columnOrder : 1 ,
child : FeatureDetail (),
) Un autre défi de réactivité est la commande des éléments. Pour contrôler l'ordre spécifique des éléments en ligne ou une disposition de colonne, définissez une rowOrder ou columnOrder .
Incroyable, flottement à l'intérieur de Flutter! Ça marche .. en quelque sorte. Les iframes intégrés dans Flutter Web ont des problèmes.
Flutter Web est phénoménal et c'était vraiment amusant de résoudre certains des problèmes essentiels de réactivité fondamentaux sur le Web. Malgré toutes les années où j'ai fait le développement Web, ce modèle est le site Web le plus "parfait" que j'ai jamais créé. Grâce à la puissance du cadre sous-jacent, je sais précisément comment la mise en page examine toutes les tailles.
Flutter Web est révolutionnaire, mais il y a encore beaucoup de travail à faire. Dans certaines régions, Flutter est déjà en avance, mais dans d'autres, l'écosystème a littéralement des années. Pour les défis à venir, abordons-les ensemble et résolvons les problèmes de base.
La construction de ce site Web Flutter a également exposé quelques points de douleur. Veuillez me faire savoir si vous travaillez ou si vous êtes intéressé à s'attaquer à l'un des éléments ci-dessous.
Inspiration:
Développement:
Commanditaire: sans code - Flutter App UI et Builder de site 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/
