フラッター＆ダーツのヒント-レビューの週11月11日

ハローリーダー
FlutterとDART Tipsシリーズのこの11回目のポストでは、私は今年6月から私が共有した60 +のヒントにさらに6つのヒントを追加します.

1 - SlideTransitionウィジェットは、その通常の位置に相対的なウィジェットの位置をアニメーション化します.

    SlideTransition(
      position: _offsetAnimation,
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: FlutterLogo(size: 150.0),
      ),
    )

Try it on DartPad here

2 - fadeTransitionウィジェットは、その不透明度をアニメーション化してウィジェットをフェードアウトします.

      FadeTransition(
        opacity: _animation,
        child: const Padding(padding: EdgeInsets.all(8), 
                             child: FlutterLogo(),),
      ),

Try it on DartPad here

3 - AnimatedCrossadeウィジェットクロス2つの与えられた子供の間にフェードし、自分のサイズ間のアニメーション自体.

        AnimatedCrossFade(
              crossFadeState: _isFirst
                  ? CrossFadeState.showFirst
                  : CrossFadeState.showSecond,
              duration: const Duration(seconds: 1),
              firstCurve: Curves.easeInCubic,
              secondCurve: Curves.easeInCirc,
              firstChild: const FlutterLogo(
                  style: FlutterLogoStyle.horizontal, size: 100.0),
              secondChild: const FlutterLogo(
                  style: FlutterLogoStyle.stacked, size: 100.0),
        )

Try it on DartPad here

4 - CupertinoContextMenuウィジェットは、子供が長い間押されたときに開くフルスクリーンのモーダルルートです.

        CupertinoContextMenu(
            child: Container(
              color: Colors.red,
            ),
            actions: <Widget>[
              CupertinoContextMenuAction(
                child: const Text('Action one'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              CupertinoContextMenuAction(
                child: const Text('Action two'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
        ),

Try it on DartPad here

5 - backdropfilterウィジェットは、既存の描画コンテンツにフィルタを適用します.

          BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: 10.0,
                sigmaY: 10.0,
              ),
              child: Container(
                color: Colors.black.withOpacity(0.2),
              ),
          ),

Try it on DartPad here

6 -回転ボックスウィジェットは、4分の1ターンの整数でその子を回転させます.

      RotatedBox(
        quarterTurns: 2,
        child: Text(
          'This is a Roated Text ',
          style: TextStyle(
            fontSize: 55,
            fontWeight: FontWeight.bold,
            letterSpacing: 0,
          ),
        ),
      )

Try it on DartPad here

では来週.👋🏻

Follow me on for more tips about #coding, #learning, #technology...etc.

Check my Apps on Google Play & Apple Store

カバー画像Mufid Majnun