Flutter & Dart Tips - Week In Review #11
Tags: dart, flutter, codenewbie, beginners
Published: 2021-08-21 21:09:07

Hello Reader,

In this 11th post of the Flutter & Dart Tips series, I will add six more tips to the 60+ tips I shared since June of this year.

![despicable-me-minions](https://i.imgur.com/oLh6dbX.gif)

1- The SlideTransition Widget animates the position of a widget relative to its normal position.

```dart

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

```

> Try it on DartPad <a href="https://dartpad.dev/?id=c6ebb51a3ddd21b0800d30b1c5d8ec34&null_safety=true">here</a> 

![SlideTransition](https://i.imgur.com/WOzxlkK.gif)



2- The FadeTransition Widget fades a widget in and out by animating its opacity.

```dart

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

```

> Try it on DartPad <a href="https://dartpad.dev/?id=20d74b6728c65c054c1a17826aa3c2cd&null_safety=true">here</a> 

![FadeTransition](https://i.imgur.com/e8smvQH.gif)

3- The AnimatedCrossFade Widget cross-fades between two given children and animates itself between their sizes.

```dart

        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 <a href="https://dartpad.dev/?id=1023012f302ebee99120e707791ff23c&null_safety=true">here</a> 

![AnimatedCrossFade](https://i.imgur.com/49bEbEO.gif)

4-  The CupertinoContextMenu Widget is a full-screen modal route that opens when the child is long-pressed.

```dart

        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 <a href="https://dartpad.dev/?id=b396a1f4ac24a0818992f62a159e4133&null_safety=true">here</a> 

![CupertinoContextMenu](https://i.imgur.com/N6VPRAy.gif)

5- The BackdropFilter Widget applies a filter to the existing painted content.

```dart

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

```

> Try it on DartPad <a href="https://dartpad.dev/?id=c06e654eff1605fa163490610767ee66&null_safety=true">here</a> 

![BackdropFilter](https://i.imgur.com/XDPid2q.gif)

6- The RotatedBox Widget rotates its child by an integral number of quarter turns.

```dart

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


```

> Try it on DartPad <a href="https://dartpad.dev/?id=0bf40d753a62ce589aca742c356d04af&null_safety=true">here</a> 

![RotatedBox](https://i.imgur.com/dh4d8qF.gif)

See you next week. 👋🏻

> Follow me on <a href="https://twitter.com/_Mo_Malaka_">Twitter</a> for more tips about #coding, #learning, #technology...etc.

> Check my Apps on <a href="https://bit.ly/3h05gQ7">Google Play</a> & <a href="https://apple.co/3hZXoBx">Apple Store</a>

<span>Cover image  <a href="https://unsplash.com/@mufidpwt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mufid Majnun</a> on <a href="https://unsplash.com/s/photos/vaccination?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>