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!
Top comments (1)
Why SDK does flutter need