3 Dパン効果

少し前に、私はこれを見つけましたsuper cool devcard 驚くべき人々からdaily.dev .
私は本当にカード上の超クールな3 Dパン効果に触発され、どのようにフラッターでこの効果を得るために見つけたかった.
この記事の最終結果は、この超クールな効果になります.

あなたがフォローしたいならば、私は私を利用していますFlutter hello world application 出発点として.

基本ウィジェットの作成

私たちのHello World Appはステートレスウィジェットをレンダリングしているので、我々はその部分を変更し、これをstatentウィジェットにする必要があります.
ステイタスウィジェットは、我々は再パンニング効果を作成する必要がある新しい状態をレンダリングすることができます.
ステイタスウィジェットになるには、既存のMyAppを変更します.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

状態については、現在この基本的な状態を作成できます.

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 3D Card'), // changed
      ),
      body: Center(
        child: Image(image: AssetImage('DailyDevTips.png')),
      ),
    );
  }
}

これは、我々のスクリーンにローカルイメージを返す単純な状態を設定します.
しかし、我々はそれがこの特定のイメージをレンダリングすることができるフラッターを伝える必要があります.

フラッタに局所画像資産の追加

フラッターでローカル画像を追加するには、先に行くと、それのためのローカルフォルダーを作成します.私はassets 私のプロジェクトのルートのフォルダ.
その中で私は自分のイメージをDailyDevTips.png .
次に、あなたの編集する必要がありますpubspec.yml ファイルとフラッタの設定の下でこの資産を追加します.

flutter:
  assets:
    - assets/DailyDevTips.png

これで画像を読み込むことができますAssetImage ウィジェットは、上記を見た.

しかし、これは少し窮屈に見えるか.
我々がすることができることは、分数サイズの箱ウィジェットでイメージをラップすることです.このウィジェットは、ページの一部を取ることができますし、制限として使用します.これについての涼しい部分は、それがそこのすべての異なるスクリーンに適応するということです.

body: Center(
    child: FractionallySizedBox(
      widthFactor: 0.7,
      heightFactor: 0.9,
      child: Image(image: AssetImage('DailyDevTips.png')),
    ),
),

分数は、幅の70 %と高さの90 %を意味するパーセントとして読むことができます.
この場合、これは次のようになります.

フラッタの3 Dパン効果を作成する

今私たちは基本的な画像のセットアップを持っている、それは我々の3 Dパン効果を追加する時間です.
最初にやるべきことは、基本的なオフセット変数を状態に追加することです.このオフセットを使用してカードの動きを定義します.

Offset _offset = Offset.zero;

次に、3 Dプロパティを変更できるように変換ウィジェットを挿入できます.

body: Center(
    child: Transform(
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001) // perspective
        ..rotateX(0.01 * _offset.dy) // changed
        ..rotateY(-0.01 * _offset.dx), // changed
      alignment: FractionalOffset.center,
      child: (
            // TODO
      ),
    ),
),

これは私たちの主要な3 Dオブジェクトを設定します.しかし、それはこの時点で何もしないで、すべての軸にゼロをレンダリングします.
行列アイデンティティは4行4列を含む4次元配列である.あなたがコンセプトとオプションについてもっと読みたいならば、私はこの記事を見つけましたadvanced matrix 4 in Flutter 超便利
すべての作業を行うには、この変換の子としてジェスチャ検出器をレンダリングする必要があります.
この検出器は、我々のオフセットを更新し、子供としてのイメージを含んでいます.

child: GestureDetector(
    onPanUpdate: (details) => setState(() => _offset += details.delta),
    onDoubleTap: () => setState(() => _offset = Offset.zero),
    child: FractionallySizedBox(
      widthFactor: 0.7,
      heightFactor: 0.9,
      child: Image(image: AssetImage('DailyDevTips.png')),
    ),
),

ご覧のように、パンの更新効果は、私たちの状態を再レンダリングし、オフセットを新しい変更オフセット値を与えます.
その後、我々は再びゼロに我々のイメージをリセットするためにダブルタップを追加します.
そして、これは我々が以前持っていたイメージである子供を包みます.
我々は今我々のコードを再読み込みする場合、我々は周りのイメージを移動することができますし、アクションでクールな3 D効果を参照してください!
私はこの記事を楽しんで、フラッターで3 D効果の基本を学んだことを望みます.
私はこれを試して楽しんだし、私の心はすでにこの効果を行うことができると野生になっている.
あなたが完全なコードを探しているならば、あなたはそれの上でそれを見つけることができますGitHub branch .

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or