Forem: Dev Journey

Are You Doing Your Part On Stackoverflow?

Dev Journey — Mon, 12 Jul 2021 15:21:51 +0000

Stackoverflow was created in 2008 and has been the de-facto go-to knowledge base for any developer.

I can't imagine coding without it anymore, and I'm sure that anyone who calls themself a developer can't either.

At the beginning, questions and answers would come from experts and enthusiasts in their field, mainly due to the site not yet being as popular as it is today. Quality of posts was closely monitored by the small community.

I'm sure by know it's obvious where I'm going with this narrative. The site's increasing popularity has shown an influx of questions and answers, which made the task of moderating their quality that much harder.

It is not uncommon, that while looking for an answer to a particular problem, we dive through many questions-answers that are either irrelevant or poorly edited. Eventually either finding what we were looking for, or giving up.

But by now, this is not news.

So why am I telling you this?

Because there is something we can do.

Yes, down voting a bad question is helpful to signal future users that the question or answer isn't great, but that alone won't usually convince the author to make it any better, and won't help to shape any future posts.

Leaving a good comment though, might. But why stop there? Voting to close bad or duplicate posts can help good questions stand out and bad ones disappear.

"Hey we're all busy people", you might say, and you would be right.

So here are a couple of ways you can contribute. Remember, there is no obligation, but you might enjoy being helpful and learn a thing or two about those "soft skills" that everyone keep mentioning in job interviews 😉.

Comment appropriately

If you take anything from this post, let it be this. Make a habit that whenever you down vote a post you leave a comment that can help a well-meaning user to improve their post. At best, they edit their post and to become future pillars of the community. At worst, they'll ignore you. If enough of us will do just this one action, we'll have much better posts.
Here is my go-to comments when I see a completely awful post:

Check out [ask] to improve this question

Check out [answer] to improve this answer

These will appear as: "Check out How to Ask to improve this question" and "Checkout How to Answer to improve this answer".

And there are loads of useful markup "shorthands" like [repro], [help/dont-ask].

Visit review queues

Review queues are tools for experienced Stackoverflow users to improve the posts quality on the site, by focusing their attention to posts that might need some moderation.

Once you get to 500 reputation you can start reviewing the First Post queue, which is posts by new users. This is a great place to give a hand with a helpful advice in the form of a comment (or maybe even an edit).

Flutter ListView Expand And Flip Animation

Dev Journey — Tue, 30 Mar 2021 19:36:38 +0000

After doing a fade-in and expand animation I wanted to have something that is really unique to Flutter's tool-set.
The animation was mainly inspired by this great talk Marcin Szałek | Flutter Europe

Flip and Expand animation

The code is available in the same GitHub project under expand_with_flip branch

Here is the main class for convenience
ExpandListTile

import 'package:flutter/material.dart';
import 'dart:math' as math;

class ExpandListTile extends StatefulWidget {
  const ExpandListTile(
      {Key key,
      this.expandedChild,
      this.collapsedChild,
      this.expandedHeight = 300.0,
      this.collapsedHeight = 70.0,
      this.duration = const Duration(milliseconds: 500),
      this.curve = Curves.ease})
      : super(key: key);

  final Widget expandedChild;
  final Widget collapsedChild;
  final double expandedHeight;
  final double collapsedHeight;
  final Duration duration;
  final Curve curve;

  @override
  _ExpandListTileState createState() => _ExpandListTileState();
}

class _ExpandListTileState extends State<ExpandListTile>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _flipAnimation;
  Animation _expandAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: widget.duration);
    _flipAnimation = CurvedAnimation(
        parent: _controller, curve: Interval(0.5, 1.0, curve: Curves.ease));
    _expandAnimation = CurvedAnimation(
        parent: _controller, curve: Interval(0.0, 0.5, curve: Curves.ease));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior
          .translucent, //IMPORTANT: allows "empty" spaces to respond to events
      onTap: (() => setState(() {
            _toggle();
            // _isExpanded = !_isExpanded;
          })),
      child: AnimatedBuilder(
        animation: _flipAnimation,
        builder: (context, child) {
          var currentHeight = widget.collapsedHeight +
              (widget.expandedHeight - widget.collapsedHeight) *
                  _expandAnimation.value;
          return SizedBox(
            // height: widget.expandedHeight,
            height: currentHeight,
            child: Stack(
              children: [
                Transform.translate(
                  offset: Offset(
                      0, -widget.collapsedHeight * (_flipAnimation.value)),
                  child: Transform(
                    alignment: Alignment.bottomCenter,
                    transform: Matrix4.identity()
                      ..setEntry(2, 3, 0.001)
                      ..rotateX(-math.pi / 2 * _flipAnimation.value),
                    child: widget.collapsedChild,
                  ),
                ),
                Transform.translate(
                  offset: Offset(
                      0, -widget.collapsedHeight * (_flipAnimation.value - 1)),
                  child: Transform(
                    alignment: Alignment.topCenter,
                    transform: Matrix4.identity()
                      ..setEntry(2, 3, 0.001)
                      ..rotateX(math.pi * (1 - _flipAnimation.value) / 2),
                    child: OverflowBox(
                      maxHeight: widget.expandedHeight,
                      child: widget.expandedChild,
                    ),
                  ),
                )
              ],
            ),
          );
        },
      ),
    );
  }

  void _toggle() {
    if (_controller.status == AnimationStatus.completed ||
        _controller.status == AnimationStatus.forward) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }
}

I'm keeping this post short but I can add more details on the implementation if this brings up some interest in people.

Flutter How To - Expandable List Tile

Dev Journey — Mon, 29 Mar 2021 16:35:51 +0000

TL;DR here is the GitHub project with the implementation and a demo.

Why?

Showing information in a list is a very common pattern and often enough the list item will only show the most prominent details to save screen real-estate. Most apps will then show any extra details in a new screen. This decision has mostly been influenced by the difficulty to implement another approach, which is to show extra details still in context with the list. Flutter enables these animations in a way that is far easier to implement.

What?

This is what it will look like

How?

Well first we need to break it all down to the main components.
The way I see it we have our ExpandListTile widget which will need to receive the widget the is shown when it's collapsed and the widget that's shown when it's expanded.
So we will be switching between those two on a tap on ExpandListTile.
Now to add the animation we have the size animation where the container grows from collapsed to expanded and shrinks when reversed. The last animation to take care of would be cross-fading between the collapsed and the expanded widgets.

So to sum it up:

switch between collapsed and expanded on tap
animate the size between collapsed and expanded
animate the cross-fade between collapsed and expanded

While there are different way to implement this effect, I'll demonstrate the simpler way using implicit animations, using AnimatedContainer and AnimatedSwitcher.

switch between collapsed and expanded on tap

Making our ExpandListTile statefull where each tap sets a new state, expanded or collapsed.

animate the size between collapsed and expanded

AnimatedContainer's height parameter which is also tied to our state will trigger the container's animation

animate the cross-fade between collapsed and expanded

AnimatedSwitcher will animate new children

ExpandListTile

import 'package:flutter/material.dart';

class ExpandListTile extends StatefulWidget {
  const ExpandListTile(
      {Key key,
      this.expandedChild,
      this.collapsedChild,
      this.expandedHeight = 300.0,
      this.collapsedHeight = 70.0,
      this.duration = const Duration(milliseconds: 200),
      this.curve = Curves.ease})
      : super(key: key);

  final Widget expandedChild;
  final Widget collapsedChild;
  final double expandedHeight;
  final double collapsedHeight;
  final Duration duration;
  final Curve curve;

  @override
  _ExpandListTileState createState() => _ExpandListTileState();
}

class _ExpandListTileState extends State<ExpandListTile> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    final child = _isExpanded ? widget.expandedChild : widget.collapsedChild;
    return GestureDetector(
      behavior: HitTestBehavior
          .translucent, //IMPORTANT: allows "empty" spaces to respond to events
      onTap: (() => setState(() => _isExpanded = !_isExpanded)),
      child: AnimatedContainer(
        curve: widget.curve,
        height: _isExpanded ? widget.expandedHeight : widget.collapsedHeight,
        duration: widget.duration,
        child: AnimatedSwitcher(
          duration: widget.duration,
          child: OverflowBox(
            key: ValueKey(_isExpanded),
            alignment: Alignment.topLeft,
            maxHeight:
                _isExpanded ? widget.expandedHeight : widget.collapsedHeight,
            child: child,
          ),
        ),
      ),
    );
  }
}

FAQ

Why not just use `ExpansionPanelList`

While it is definitely one way to go about it, I don't like the fact that the title is always visible and that there is a dropdown icon.

Why `GestureDetector` has `behavior: HitTestBehavior.translucent`?

This ensures that when tapping on an empty space will still be intercepted.

Why is there an `OverflowBox`?

while changing the size of the container we want the height of the expanded and collapsed children to be their final size, to avoid widgets changing layout. I find this have a more intuitive look.

If you have a different way or any thoughts on this implementation, leave me a comment, I'd like to hear what you think.