FlutterWebsite
2.0.0
Сайт Flutter.dev, теперь в Flutter!
Просмотреть сайт Flutter
HTML -версия
Холст
| Настольный компьютер | Планшет | Мобильный |
|---|---|---|
 |  |  |
Этот шаблон был создан для презентации недели трепетания о веб -сайтах с адаптивным зданием с рамки отзывчивого флаттера.
Если вам нравится этот проект или он помог вам, пожалуйста, оставьте свою электронную почту для обновлений. Хотя это не требуется, я бы очень ценил это!
Легко построить адаптивные веб -сайты Flutter - Презентация Flutter Week
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 является ложным, макет - это столбец.
ResponsiveRowColumn (
rowColumn : ! ResponsiveWrapper . of (context). isSmallerThan ( DESKTOP ),
children : [
ResponsiveRowColumnItem (
child : Feature ()
)
]
)
Компонент детализации функции имеет два ряда контента, каждый из которых с различным процентом ширины. Баланс здесь 7: 5 с графиком, занимающей немного больше места, чем текст. Это поведение может быть создано путем установки значения гибкой для каждой строки. Тем не менее, гибкость необходимо удалить, когда макет находится в режиме столбца, чтобы избежать ошибок с неверными ограничениями.
ResponsiveRowColumnItem используется для обертывания детей в Flexible виджет при макете строки или столбца. Когда rowFlex установлен, ребенок будет обернут Flexible с гибким значением 5. Аналогично, columnFlex обеспечивает такое же поведение для макетов столбцов. Макеты унаследованы от родительской ResponsiveRowColumn isRowColumn .
ResponsiveRowColumnItem (
rowFlex : 5 ,
columnOrder : 1 ,
child : FeatureDetail (),
) Еще одна проблема отзывчивости - это упорядочение предметов. Чтобы управлять конкретным порядком элементов в строке или макете столбца, установите rowOrder или columnOrder .
Удивительно, трепетание внутри Флаттера! Это работает .. вроде. Встроенные iframes в Flutter Web есть некоторые проблемы.
Flutter Web является феноменальной, и было действительно интересно решить некоторые основные основные проблемы реагирования в Интернете. Несмотря на все годы, когда я занимался веб -разработкой, этот шаблон является самым «идеальным» веб -сайтом, который я когда -либо создавал. Благодаря силе базовой структуры, я точно знаю, как выглядит макет.
Flutter Web - это революционная, но еще предстоит много работы. В некоторых областях Flutter уже впереди, но в других экосистема буквально отстает. Для предстоящих задач давайте возьмем их в лоб и решим их и решит основные проблемы.
Создание этого веб -сайта Flutter также выставил несколько болевых точек. Пожалуйста, дайте мне знать, если вы работаете или заинтересованы в решении одного из пунктов ниже.
Вдохновение:
Разработка:
Спонсор: Codeless - 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/
