Flutter tips and tricks I use
Tags: flutter, tricks, productivity
Published: 2019-09-29 16:58:47

# 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](https://thepracticaldev.s3.amazonaws.com/i/shl3r92eco5oon3ml1ck.png)

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!