【FlippableCard】クリックしたらクルって反転するカードを作ってみる。ノーコード開発会社の選び方｜開発実績127件の技術者が6つの必須確認項目を解説

こんにちは。今日はFlutterFlowで「クリックしたらクルって反転するカード」を作ってみます。
FlippableCardというWidgetを使えばすぐ簡単にできちゃいます。

今日はこのFlippableCardについて書いてみたいと思います。

FlippableCard：完成イメージ

こんな感じです。小気味良く動いて気持ちいいですね。

まずは以下のようにFlippableCardを選択します。

すると、以下のようにフロントとバックに分かれた構成になっています。

なので、単純にフロント側とバック側でコンテナの色を変えたり、テキストを変えたり、画像を入れたり好きな様にカスタマイズできます。

以下のように設定も変えられます。

Flip DirectionのところでHorizontalかVerticalを選択します。これにより横回転か縦回転かを変えられます。

また、Flip Animation Durationの数字を変えることで、回転速度がゆっくりだったり高速だったりに変化します。これにより心地よいアニメーションスピードを調整できます。

以上です。簡単ですね。

FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。