FlutterWebsiteのダウンロード - FlutterWebsiteソースコードのダウンロード

FlutterWebsite

ウェブサイトデータ

2.0.0

ダウンロード

スクリーンショット

Flutter.Dev Webサイト - Flutterで再現されています

Flutter.devのWebサイト、今フラッター！

フラッターウェブサイトを表示します

HTMLバージョン

キャンバスバージョン

スクリーンショット

デスクトップ	錠剤	携帯

について

このテンプレートは、フラッターレスポンシブフレームワークを備えたレスポンシブWebサイトの構築に関するフラッターウィークのプレゼンテーション用に作成されました。

このプロジェクトが気に入っているか、役立った場合は、更新のためにメールを残してください。必須ではありませんが、とても感謝しています！

ビデオ

レスポンシブフラッターWebサイトを簡単に構築します - フラッターウィークプレゼンテーション

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 ()
    )

アニメーションの足場は、タイムラインアニメーションモデルに基づいて構築されました。すべてのアニメーション期間は相対的であり、将来のカスタマイズと調整を簡単にできるようにします。いつか、誰かがすべてのコードを自動的に生成するドラッグアンドドロップアニメーションエディターを作成します。

特徴

スクリーンショット

特徴セクションは、機能コンポーネントを備えたシンプルな行です。それは、レイアウトが狭くなり、列の余地が十分ではないまでです。その後、コラムになる必要があります！

ResponsiveRowColumn 、異なる画面サイズで行と列のレイアウト間の移行を支援します。 rowColumnが真の場合、レイアウトは行です。 rowColumnがfalseの場合、レイアウトは列です。

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

機能の詳細

スクリーンショット

特徴の詳細コンポーネントには、幅が異なる2つのコンテンツがあります。ここでのバランスは7：5で、グラフィックはテキストよりもわずかに多くのスペースを占めています。この動作は、各行のフレックス値を設定することで作成できます。ただし、無効な制約エラーを回避するために、レイアウトが列モードにあるときにフレックスを削除する必要があります。

ResponsiveRowColumnItemは、連続または列のレイアウトで子供をFlexibleウィジェットに包むために使用されます。 rowFlexが設定されると、子供は5のFlex値でFlexibleに包まれます。同様に、 columnFlex列レイアウトに同じ動作を提供します。レイアウトは、親ResponsiveRowColumnのisRowColumn値から継承されます。

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

別の応答性の課題は、アイテムの注文です。列または列のレイアウトでアイテムの特定の順序を制御するには、 rowOrderまたはcolumnOrderを設定します。

羽ばたきで羽ばたき

スクリーンショット

驚くべき、羽ばたきの中の羽ばたき！それは動作します..ある種。 Flutter Webに埋め込まれたiframesにはいくつかの問題があります。

最終的な考え

フラッターウェブは驚異的であり、ウェブ上の応答性の基本的な本質的な問題のいくつかを解決することは本当に楽しかったです。私はすべての年にウェブ開発を行ってきましたが、このテンプレートは私が今まで作成した中で最も「完璧な」ウェブサイトです。基礎となるフレームワークのパワーのおかげで、レイアウトがあらゆるサイズをどのように見るかを正確に知っています。

フラッターウェブは革新的ですが、まだやるべきことがたくさんあります。一部の地域では、フラッターはすでに先にありますが、他の地域では、生態系は文字通り何年も遅れています。今後の課題については、それらに真正面から取り組み、コアの問題を解決しましょう。

このフラッターウェブサイトを構築すると、いくつかの問題点も明らかになりました。あなたが取り組んでいるか、以下のアイテムの1つに取り組むことに興味があるかどうかを教えてください。

アニメーションエディター。
richtextジェネレーター。
フラッター分析フレームワーク。

謝辞❤️

インスピレーション：

発達：

レイ・リー

スポンサー： Codelesly -Flutter App UIおよびWebサイトビルダー

ライセンス

ウェブサイトテンプレート

 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/

拡大する

追加情報