loading...
Cover image for Flutter tips and tricks I use

Flutter tips and tricks I use

giorgiobertolotti profile image Giorgio Bertolotti ・3 min read

A little intro

Hello everybody!

My name is Giorgio Bertolotti and I'm a 20yo software developer.

I'm currently enrolled in a BS degree in computer science and in my free time I love playing with Flutter. And that's the reason I'm writing this article, just wanted to share some tricks and tips I've found very useful about Flutter programming.

Tips and tricks

1: SizedBox

I know it may sound obvious to some of you, but it happens that I see people spacing widgets inside Columns using Paddings, so what I want to suggest you now is to try out SizedBox.

Let's say you want to put a space between two Text widgets using the SizedBox, what you've to do is simply:

Column(
  children: [
    Text("Text1"),
    SizedBox(height: 20.0),
    Text("Text1"),
  ],
)

Easy, right?

And now let's say you want that space to become the 20% of the column height, let's see how with FractionallySizedBox:

Column(
  children: [
    Text("Text1"),
    FractionallySizedBox(heightFactor: 0.2),
    Text("Text1"),
  ],
)

2: InkWell and Container

Okay, this is a trick that often happens that I use... We want to achieve something like this in the picture, but at the same time we want the material touch ripples we get from InkWell.

Image

How do we do that?

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(30.0),
    color: Colors.yellow,
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 2.0,
        offset: Offset(0.0, 4.0),
      )
    ],
  ),
  child: Material(
    color: Colors.transparent,
    child: InkWell(
      onTap: () {},
      borderRadius: BorderRadius.circular(30.0),
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 15.0),
        child: Center(
          child: Text(
              "Text",
              style: TextStyle(
                color: Colors.black,
                fontSize: 30.0,
                fontWeight: FontWeight.w900,
              ),
            ),
        ),
      ),
    ),
  ),
);

The trick stays all in the Material widget wrapping InkWell, without that nothing will work.

3: Line height

The next tip is something I use when I want a multi-line text to be as "condensed" as possible. This is how to reduce the line height in Flutter:

RichText(
  text: TextSpan(
    style: TextStyle(color: textColor),
    children: [
      TextSpan(
          text: "Text1\n",
          style: TextStyle(height: 0.9)),
      TextSpan(
          text: "Text2",
          style: TextStyle(height: 0.9)),
    ],
  ),
),

The "height" argument for TextStyle is a multiplier you apply to the base height of the Text widget you're creating, so setting the factor to 0.9 scales the height to the 90% of the default one.

4: Dismissible

This is something very useful if you want to achieve a "vertical swipe to close" effect, like when you open a profile image in Whatsapp.

Dismissible(
  key: Key('dismissible'),
  direction: DismissDirection.vertical,
  onDismissed: (direction) {
    Navigator.pop(context);
  },
  background: Container(
    color: Colors.black,
  ),
  movementDuration: Duration(milliseconds: 100),
  resizeDuration: Duration(milliseconds: 100),
  child: ...
);

5: Blink effect

I understand this is something that doesn't often happen to use, but I needed it recently and that's how I achieved it:

Timer _blinkTimer;
Duration _halfSec = const Duration(milliseconds: 500);
bool _visibility = true;

@override
void dispose() {
  if (_blinkTimer != null) _blinkTimer.cancel();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  ...
  Opacity(
    opacity: _visibility ? 1 : 0,
    child: ...
  ),
  ...
}

_startBlink() {
  _blinkTimer = Timer.periodic(
    _halfSec,
    (Timer timer) => setState(() {
      _visibility = !_visibility;
    }),
  );
}

_stopBlink() {
  _blinkTimer.cancel();
  setState(() {
    _visibility = true;
  });
}

Conclusion

If you have any tip or trick you want to share or you have any better way to achieve what I've done above, please take a moment to comment down here!

Thanks a lot for reading, I hope you've found something interesting!

Posted on Sep 29 '19 by:

Discussion

markdown guide