FlutterWebsite
2.0.0
flutter.dev網站，現在正在撲來！
查看Flutter網站
HTML版本
畫布版本
| 桌面 | 藥片 | 移動的 |
|---|---|---|
 |  |  |
該模板是為撲動的一周演示而創建的，內容涉及使用響應式響應框架構建響應式網站。
如果您喜歡這個項目或對您有所幫助，請留下電子郵件以進行更新。儘管不是必需的，但我非常感謝它！
輕鬆構建響應式響亮的網站 - 顫抖的一周演示文稿
29：45-在Flutter中重新創建Flutter網站。
選擇具有開發評論和響應框架使用的組件。
動畫旋轉木馬組件令人嘆為觀止且美麗。幸運的是，在顫抖中創建它非常容易。我們需要首先創建動畫腳手架！
動畫可以分解為carousel ， slide ， element和animation組件。每個組件都是我們的動畫腳手架中的一層，其職責和邏輯。
carousel - 有4張旋轉木馬。每張幻燈片顯示約6400毫秒。旋轉木馬的責任是保持兒童滑梯並協調他們的過渡。
carousel
slide - 每個幻燈片都包含出現並消失在入口和出口動畫中的圖像和文本。幻燈片的責任是定位其子元素並協調其動畫。
carousel_slide_1
carousel_slide_2
carousel_slide_3
carousel_slide_4
model_carousel_item_animation
element - 元素是幻燈片的內容。元素是普通的小部件，不知道它們將如何動畫。他們唯一的要求是支持動畫。動畫邏輯被抽象成單獨的層。
carousel_text
Image
animation - 動畫行為。動畫揭示了一個動畫儀（例如我們的幻燈片）可以用來控制動畫狀態的接口。
animation_slide_up_down_fade
通過創建動畫腳手架，創建動畫本身非常容易。
最後，整個動畫都包裹在ResponsiveWrapper中，並給出了參考MediaQuery寬度和高度。這允許旋轉木馬以任何屏幕尺寸正確顯示。
ResponsiveWrapper (
maxWidth : 1200 ,
minWidth : 1200 ,
defaultScale : true ,
mediaQueryData : MediaQueryData (size : Size ( 1200 , 640 )),
child : Carousel ()
)動畫腳手架是根據時間軸動畫模型構建的。所有動畫持續時間都是相對的，可以在將來輕鬆自定義和調整。希望有一天，有人會為Flutter創建一個拖放動畫編輯器，該編輯器將自動生成所有代碼。
功能部分是具有功能組件的簡單行。直到佈局變窄，沒有足夠的空間。然後，它需要成為一列！
ResponsiveRowColumn有助於在不同屏幕尺寸的行和列佈局之間過渡。當rowColumn為真時，佈局為行。當rowColumn為False時，佈局是列。
ResponsiveRowColumn (
rowColumn : ! ResponsiveWrapper . of (context). isSmallerThan ( DESKTOP ),
children : [
ResponsiveRowColumnItem (
child : Feature ()
)
]
)
功能詳細信息組件具有兩行內容，每個內容的寬度百分比不同。這裡的餘額是7：5，圖形佔用比文本略多的空間。可以通過為每一行設置flex值來創建此行為。但是，當佈局處於列模式時，需要刪除flex，以避免限制錯誤。
在行或色譜柱佈局中， ResponsiveRowColumnItem用於將孩子包裹在Flexible小部件中。設置rowFlex時，孩子將被包裹在Flexible值為5的柔性中。同樣， columnFlex為列佈局提供了相同的行為。佈局是從parent ResponsiveRowColumn的isRowColumn值繼承的。
ResponsiveRowColumnItem (
rowFlex : 5 ,
columnOrder : 1 ,
child : FeatureDetail (),
)另一個響應挑戰是項目排序。要控制行或列佈局中項目的特定順序，請設置rowOrder或columnOrder 。
令人驚嘆的，顫抖的顫音！它有效..有點。 Flutter Web中的嵌入式iFrame存在一些問題。
Flutter Web是驚人的，解決網絡響應能力的一些基本基本問題真的很有趣。儘管我一直在進行網絡開發，但該模板是我創建的最“完美”的網站。由於基礎框架的力量，我確切地知道佈局在各個尺寸上的外觀。
Flutter Web是革命性的，但仍有很多工作要做。在某些地區，Flutter已經領先，但在其他領域，生態系統實際上是落後的。對於未來的挑戰，讓我們正面解決他們並解決核心問題。
構建此撲朔迷離的網站也暴露了一些痛點。請讓我知道您是否正在研究或有興趣解決以下項目之一。
靈感：
發展：
贊助商：無編碼 - Flutter App UI和網站構建器
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/
