flutter.dev网站 – 在颤音中重新创建
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时，孩子将被包裹在柔性值为5的Flexible中。同样， columnFlex为列布局提供了相同的行为。布局是从parent ResponsiveRowColumn的isRowColumn值继承的。
ResponsiveRowColumnItem ( rowFlex : 5 , columnOrder : 1 , child : FeatureDetail (), )
另一个响应挑战是项目排序。要控制行或列布局中项目的特定顺序，请设置rowOrder或columnOrder 。
颤抖的颤动
令人惊叹的，颤抖的颤音！它有效..有点。 Flutter Web中的嵌入式iFrame存在一些问题。
最后的想法
Flutter Web是惊人的，解决网络响应能力的一些基本基本问题真的很有趣。尽管我一直在进行网络开发，但该模板是我创建的最“完美”的网站。由于基础框架的力量，我确切地知道布局在各个尺寸上的外观。
Flutter Web是革命性的，但仍有很多工作要做。在某些地区，Flutter已经领先，但在其他领域，生态系统实际上是落后的。对于未来的挑战，让我们正面解决他们并解决核心问题。
构建此扑朔迷离的网站也暴露了一些痛点。请让我知道您是否正在研究或有兴趣解决以下项目之一。
- 动画编辑器。
- RichText Generator。
- 颤抖的分析框架。
致谢❤️
灵感：
发展：
- 雷·李
赞助商：无编码 – 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.
flutter.dev
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://crea**ti*vecommons.org/licenses/by/3.0/
