Flutter & Dart Tips - Week In Review #13
Tags: dart, flutter, beginners, codenewbie
Published: 2021-09-05 03:37:30


Hello Reader,

This is the 13th post in the "Week In Review" series, where I share the Flutter\Dart tips I tweeted last week. My goal is to have at least 100 tips in this series. 

![13](https://media.giphy.com/media/QwnA7gaEJXbLjEmIuB/giphy.gif?cid=ecf05e47u82lk9be8yw2hjkue4h49mdwy6n0bct2w2fxs194&rid=giphy.gif&ct=g)

1- Use GestureDetector to detect gestures like tap, double Tap, press, LongPress, pan, drag, zoom etc.

```dart

...

Container(
  color: _color,
  height: 200.0,
  width: 200.0,
  child: GestureDetector(
    onTap: () {
      setState(() {
        _color = Colors.yellow;
      });
    },
  ),
)

...

```

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

![Spacer](https://i.imgur.com/GavXFV9.gif)



2- The AnimatedDefaultTextStyle will transitions the default text style over a given duration whenever the given style changes.

```dart

...

    AnimatedDefaultTextStyle(
      duration: Duration(milliseconds: 300),
      child: Text("Flutter"),
      style: newStyle,
    )

...

```

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

![FractionallySizedBox](https://i.imgur.com/mqJ0IE0.gif)

3- Use Future.delayed() to pause program flow for a certain duration.

```dart

...
  
  await Future.delayed(const Duration(seconds: 1));

...

```


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

![AnimatedSwitcher](https://i.imgur.com/mUBHUoA.gif)

4- Use DecoratedBoxTransition to animates the different properties of DecoratedBox.

```dart

...
  
       DecoratedBoxTransition(
        position: DecorationPosition.background,
        decoration: decorationTween.animate(_controller),
        child: Container(
          child: Container(
            width: 200,
            height: 200,
            padding: EdgeInsets.all(20),
            child: FlutterLogo(),
          ),
        ),
      ),

...

```

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

![CupertinoAlertDialog](https://i.imgur.com/MAVv5vD.gif)

5- Use Divider widget to create a one pixel thick horizontal line, with padding on either side.

```dart

...
  
    ListTile(
      title: Text('Item1')
    ),
    Divider(),
    ListTile(
      title: Text('Item2'),
    ),
...

```

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

![CupertinoButton](https://i.imgur.com/ELlBoye.gif)

6- Use DropdownButton widget to create a button for selecting from a list of items.

```dart

...
  
        DropdownButton<String>(
          value: dropdownValue,
          onChanged: (String? newValue) {
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: <String>['One', 'Two', 'Free', 'Four']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
...

```

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

![CupertinoActionSheet](https://i.imgur.com/CoOeGLg.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/@clemono?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Clem Onojeghuo</a> on <a href="https://unsplash.com/t/back-to-school?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </span>