Flutter tips and tricks I use

Giorgio Bertolotti — Sun, 29 Sep 2019 16:58:47 +0000

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.

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!

Looking for online courses for mobile design

Giorgio Bertolotti — Thu, 25 Jul 2019 20:26:30 +0000

Hello everybody!
Can anyone suggest me some online platform where I can follow courses to design the UI for a mobile applications?

I just recently realized that in order to develop a good looking app I should first throw down a design that convinces me and then apply it instead of continuing to make small adjustments that I'm never satisfied with.

If anyone has any general advice about the ui/ux on mobile applications, any suggestions are appreciated!

Thanks a lot!

DEV Community: Giorgio Bertolotti