FlutterWebsite
2.0.0
Die Flutter.dev -Website, jetzt in Flutter!
Flutter -Website anzeigen
HTML -Version
Leinwandversion
| Desktop | Tablette | Mobile |
|---|---|---|
 |  |  |
Diese Vorlage wurde für eine Präsentation der Flutterwoche über das Erstellen von reaktionsschnellen Websites mit dem Flutter Responsive Framework erstellt.
Wenn Ihnen dieses Projekt gefällt oder es Ihnen geholfen hat, hinterlassen Sie bitte Ihre E -Mails für Updates. Obwohl es nicht erforderlich ist, würde ich es sehr schätzen!
Bauen Sie leicht reaktionsschnelle Flutter -Websites auf - Flutterwoche Präsentation
29:45 - Die Flutter -Website in Flutter erstellen.
Wählen Sie Komponenten mit Entwicklungskommentar und Reaktionsframework -Verwendungswechsel.
Die animierte Karussellkomponente ist auffällig und schön. Glücklicherweise ist es sehr einfach, es in Flattern zu schaffen. Alles was wir brauchen ist, zuerst ein Animationsgerüst zu erstellen!
Die Animation kann in carousel , slide , element und animation unterteilt werden. Jede Komponente ist eine Ebene in unserem Animationsgerüst mit eigenen Verantwortlichkeiten und Logik.
carousel - Es gibt 4 Karussellrutschen. Jede Folie wird für ungefähr 6400 Millisekunden angezeigt. Die Verantwortung des Karussells besteht darin, Kinderrutschen zu halten und ihre Übergänge zu koordinieren.
carousel
slide - Jede Folie enthält Bilder und Text, die mit Eingangs- und Ausgangsanimationen erscheinen und verschwinden. Die Verantwortung der Folie besteht darin, seine Kinderelemente zu positionieren und ihre Animationen zu koordinieren.
carousel_slide_1
carousel_slide_2
carousel_slide_3
carousel_slide_4
model_carousel_item_animation
element - Elemente sind der Inhalt der Folien. Elemente sind einfache Widgets, die nicht wissen, wie sie animiert werden. Ihre einzige Anforderung ist es, zu unterstützen, animiert zu sein. Die Animationslogik wird auf eine separate Ebene abstrahiert.
carousel_text
Image
animation - Animationsverhalten. Animationen enthüllen eine Schnittstelle, mit der Animatoren wie unsere Folie den Animationsstatus steuern können.
animation_slide_up_down_fade
Mit dem erstellten Animationsgerüst ist das Erstellen der Animation selbst sehr einfach.
Schließlich ist die gesamte Animation in einen ResponsiveWrapper eingewickelt und erhält eine MediaQuery und -höhe. Auf diese Weise kann das Karussell bei jeder Bildschirmgröße korrekt angezeigt werden.
ResponsiveWrapper (
maxWidth : 1200 ,
minWidth : 1200 ,
defaultScale : true ,
mediaQueryData : MediaQueryData (size : Size ( 1200 , 640 )),
child : Carousel ()
)Das Animationsgerüst wurde basierend auf einem Timeline -Animationsmodell konstruiert. Alle Animationsdauern sind relativ, was in Zukunft eine einfache Anpassung und Anpassungen ermöglicht. Hoffentlich erstellt jemand eines Tages einen Drag & Drop -Animations -Editor für Flutter, der den gesamten Code automatisch generiert.
Der Features -Abschnitt ist eine einfache Zeile mit Funktionskomponenten. Das ist, bis sich das Layout verengt und nicht genug Platz für eine Reihe ist. Dann muss es eine Spalte werden!
ResponsiveRowColumn hilft dem Übergang zwischen Zeilen- und Spaltenlayouts in verschiedenen Bildschirmgrößen. Wenn rowColumn wahr ist, ist das Layout eine Reihe. Wenn rowColumn falsch ist, ist das Layout eine Spalte.
ResponsiveRowColumn (
rowColumn : ! ResponsiveWrapper . of (context). isSmallerThan ( DESKTOP ),
children : [
ResponsiveRowColumnItem (
child : Feature ()
)
]
)
Die Feature -Detail -Komponente verfügt über zwei Inhaltszeilen mit jeweils unterschiedlichem Prozentsatz. Das Gleichgewicht ist hier 7: 5, wobei die Grafik etwas mehr Platz einnimmt als der Text. Dieses Verhalten kann erstellt werden, indem ein Flex -Wert für jede Zeile festgelegt wird. Der Flex muss jedoch entfernt werden, wenn sich das Layout im Spaltenmodus befindet, um ungültige Einschränkungen Fehler zu vermeiden.
ResponsiveRowColumnItem wird verwendet, um Kinder in einem Zeilen- oder Spaltenlayout in ein Flexible Widget zu wickeln. Wenn rowFlex eingestellt ist, wird das Kind in einen Flexible Flexwert von 5 umwickelt. Ebenso sorgt columnFlex für Spaltenlayouts das gleiche Verhalten. Layouts werden vom isRowColumn -Wert des übergeordneten ResponsiveRowColumn geerbt.
ResponsiveRowColumnItem (
rowFlex : 5 ,
columnOrder : 1 ,
child : FeatureDetail (),
) Eine weitere Herausforderung für Reaktionsfähigkeit ist die Bestellung der Artikel. Stellen Sie die spezifische Reihenfolge der Elemente in einem Zeilen- oder Spaltenlayout ein, stellen Sie einen rowOrder oder columnOrder fest.
Erstaunlich, flattern in Flattern! Es funktioniert .. irgendwie. Eingebettete IFrames in Flutter Web hat einige Probleme.
Flutter Web ist phänomenal und es hat wirklich Spaß gemacht, einige der wesentlichen wichtigen Probleme der Reaktionsfähigkeit im Web zu lösen. Trotz all der Jahre, in denen ich Webentwicklung durchgeführt habe, ist diese Vorlage die "perfekteste" Website, die ich je erstellt habe. Dank der Macht des zugrunde liegenden Rahmens weiß ich genau, wie das Layout jede Größe aussieht.
Flutter Web ist revolutionär, aber es gibt noch viel zu tun. In einigen Bereichen liegt Flutter bereits vorne, aber in anderen ist das Ökosystem buchstäblich Jahre hinter sich. Lassen Sie uns für die bevorstehenden Herausforderungen sie direkt angehen und die Kernprobleme lösen.
Der Aufbau dieser Flutter -Website enthüllte auch einige Schmerzpunkte. Bitte lassen Sie mich wissen, ob Sie daran arbeiten oder daran interessiert sind, einen der Artikel unten anzugehen.
Inspiration:
Entwicklung:
Sponsor: Codellos - Flutter App UI und Website 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/
