Flutter & Dart Tips - Week In Review #13

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.

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

...

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

...

Try it on DartPad here

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

...

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

...

Try it on DartPad here

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

...

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

...

Try it on DartPad here

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

...

       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 here

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

...

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

Try it on DartPad here

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

...

        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 here

See you next week. 👋🏻

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

Check my Apps on Google Play & Apple Store

Cover image Clem Onojeghuo on Unsplash