FlutterWebsite 다운로드 - FlutterWebsite 소스 코드 다운로드

FlutterWebsite

웹사이트 데이터

2.0.0

다운로드

스크린 샷

Flutter.dev 웹 사이트 - Flutter에서 재현

Flutter.dev 웹 사이트, 이제 Flutter!

Flutter 웹 사이트를 봅니다

HTML 버전

캔버스 버전

스크린 샷

데스크탑	태블릿	이동하는

에 대한

이 템플릿은 Flut

이 프로젝트가 마음에 들거나 도움이된다면 이메일을 남겨 두십시오. 그것이 필요하지는 않지만, 나는 그것을 대단히 감사합니다!

동영상

반응 형 플러터 웹 사이트를 쉽게 구축합니다 - Flutter Week 프레젠테이션

29:45- 플러터에서 플러터 웹 사이트를 재현합니다.

구성 요소

개발 주석 및 반응 형 프레임 워크 사용 연습으로 구성 요소를 선택하십시오.

애니메이션 회전 목마

스크린 샷

애니메이션 회전 목마 구성 요소는 눈길을 끄고 아름답습니다. 다행히도 플러터로 만드는 것은 매우 쉽습니다. 우리가 필요한 것은 먼저 애니메이션 스캐 폴드를 만드는 것입니다!

애니메이션은 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 이 True 일 때 레이아웃은 행입니다. rowColumn 이 False 일 때 레이아웃은 열입니다.

 ResponsiveRowColumn (
        rowColumn : ! ResponsiveWrapper . of (context). isSmallerThan ( DESKTOP ),
        children : [
          ResponsiveRowColumnItem (
            child : Feature ()
            )
        ]
    )

기능 세부 사항

스크린 샷

기능 세부 구성 요소에는 각각 두 줄의 컨텐츠가 있으며 각각은 너비 비율이 다릅니다. 여기의 균형은 7 : 5입니다. 그래픽은 텍스트보다 약간 더 많은 공간을 차지합니다. 이 동작은 각 행에 플렉스 값을 설정하여 만들 수 있습니다. 그러나 유효하지 않은 제약 오류를 피하기 위해 레이아웃이 열 모드에있을 때 플렉스를 제거해야합니다.

ResponsiveRowColumnItem 행이나 열 레이아웃이있을 때 어린이를 Flexible 위젯으로 감싸는 데 사용됩니다. rowFlex 설정되면 어린이는 5의 Flex 값으로 Flexible 로 감싸게됩니다. 마찬가지로 columnFlex 열 레이아웃에 대해 동일한 동작을 제공합니다. 레이아웃은 부모의 ResponsiveRowColumn 의 isRowColumn 값에서 상속됩니다.

 ResponsiveRowColumnItem (
        rowFlex : 5 ,
        columnOrder : 1 ,
        child : FeatureDetail (),
    )

또 다른 응답 성 도전은 항목 주문입니다. 행 또는 열 레이아웃의 특정 항목 순서를 제어하려면 rowOrder 또는 columnOrder 설정하십시오.

플러터에 펄럭입니다

스크린 샷

플러터 안에 놀랍고 펄럭입니다! 작동합니다 .. 일종의. Flutter Web에 내장 된 iframes에는 몇 가지 문제가 있습니다.

최종 생각

Flut 내가 웹 개발을해온 모든 년에도 불구 하고이 템플릿은 내가 만든 가장 "완벽한"웹 사이트입니다. 기본 프레임 워크의 힘 덕분에 레이아웃이 모든 크기를 어떻게 보는지 정확히 알고 있습니다.

플러터 웹은 혁명적이지만 여전히해야 할 일이 여전히 많습니다. 일부 지역에서는 Flut 앞으로의 도전에 대해서도 정면으로 함께 해결하고 핵심 문제를 해결해 봅시다.

이 플러터 웹 사이트를 구축하면 몇 가지 고통이 발생했습니다. 아래에 작업중 인이 있거나 아래 항목 중 하나를 다루는 데 관심이 있는지 알려주십시오.

애니메이션 편집기.
RichText 생성기.
플러터 분석 프레임 워크.

감사의 말 ❤️

영감:

개발:

레이 리

스폰서 : Codelessly -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://creativecommons.org/licenses/by/3.0/

확장하다

추가 정보