DEV Community: Josué Martínez

Building a custom dropdown in Flutter

Josué Martínez — Mon, 09 Sep 2024 02:30:02 +0000

Is been almost 3 months since I started working as a Flutter developer in a small startup company and a been learning a lot. So, as usual, today I wanna share one of the things I learned in the past few months: dealing with custom dropdowns.

Since we don't use Flutter's stock dropdowns at work (either Material or Cupertino), I needed to figure out how to make a custom one at least 2 times in the past months and I'm pretty sure I'm not the only one. That said, let's move on.

First things first

In this post I'll use two key widgets to build the dropdown, so before going into the code, let's understand these widgets.

`CompositedTransformTarget`

This one is really important to simplify the task and the docs says:

When this widget is composited during the compositing phase (which comes after the paint phase, as described in WidgetsBinding.drawFrame), it updates the link object so that any CompositedTransformFollower widgets that are subsequently composited in the same frame and were given the same LayerLink can position themselves at the same screen location.

In short: this widget will hold the global position of any child widget and we can use the CompositedTransformFollower widget to position any other widget in the same place by using the same LayerLink. So, I assume you can image how we're gonna use it: to position the "attached" section of the dropdown right below the other one.

`OverlayPortal`

Right, so, we already solved a problem, but we have another one: working with the raw overlay API is a pain and I know that by experience 💀. So... There's a better and simpler way to put widgets on top of others? Of course: OverlayPortal, which is part of the overlay API, but way more simple and so we're gonna use it to build the dropdown.

Also, in case you think Stack would do the job too, please don't do that. I know Stack can also position widgets on top of others, but final code will look very "tricky" as you have to put the widgets in way that they will be for sure on top of the others, leading you to write an absolute mess of code, making it a bit hard to read and work on later.

The other problem with Stack is that it will lead you to use Positioned, forcing you to hardcode values, which isn't good if you want your app to (and it should) be responsive no matter if it will run only on smartphones. That method also doesn't take in consideration growable lists, which is a very common pattern in app designs.

Let's start already

Alright, so the process is pretty simple, first we need a LayerLink and a OverlayPortalController:



// This controller doesn't have a `dispose` method,
// so you can use an `StatelessWidget`
final _controller = OverlayPortalController();
final _link = LayerLink();

Then, we place our OverlayPortal widget anywhere we need it in our build method or somewhere else:



OverlayPortal(
  controller: _controller,
  overlayChildBuilder: (context) => const Placeholder(),
),

As you can imagine, the overlayChildBuilder in OverlayPortal takes a builder function that will be use to build the widget that will be on top of all our other widgets, allowing us to write a separated widget to keep this as clean as possible.

Alright, let's keep going and add a child to the OverlayPortal, which will be the interactive section, so we also need to wrap it with CompositedTransformTarget:



OverlayPortal(
  controller: _controller,
  overlayChildBuilder: (context) => const Placeholder(),
  child: CompositedTransformTarget(
    link: _link,
    child: ElevatedButton(
      onPressed: _controller.toggle,
      child: const Text('Toggle dropdown'),
    ),
  ),
),

Now, let's make the overlay child follow the same positioning as the button:



OverlayPortal(
  controller: _controller,
  overlayChildBuilder: (context) => CompositedTransformFollower(
    // Ensure to use the same `LayerLink`
    link: _link,
    child: const Placeholder(),
  ),
  child: CompositedTransformTarget(
    link: _link,
    child: ElevatedButton(
      onPressed: _controller.toggle,
      child: const Text('Toggle dropdown'),
    ),
  ),
),

And that's it, we have the base implementation, but if you try that right now, you will notice some issues:

The Placeholder is on top of the button
The Placeholder covers too much space

The first issue is actually pretty easy to fix: just set the targetAnchor property in CompositedTransformFollower to Alignment.bottomLeft. Like this:



OverlayPortal(
  controller: _controller,
  overlayChildBuilder: (context) => CompositedTransformFollower(
    // Ensure to use the same `LayerLink`
    link: _link,
    targetAnchor: Alignment.bottomLeft,
    child: const Placeholder(),
  ),
  child: CompositedTransformTarget(
    link: _link,
    child: ElevatedButton(
      onPressed: _controller.toggle,
      child: const Text('Toggle dropdown'),
    ),
  ),
),

Now the other issue is a bit more complicated to fix. But let's understand why does that happens: anything that belongs into an overlay in Flutter essentially uses a whole new BuildContext, which also means the very top widget in that widget tree will be enforced to be as the same size of the viewport and that cannot be changed.

So, to fix that, we need a widget that takes all that available space and allows it's child to be of any desired size. There are few widgets that fits that condition, but in this example we're gonna use UnconstrainedBox to fix this problem and then we can finally use any sizing widget, a SizedBox for example, to limit the size of the dropdown widget.



OverlayPortal(

  controller: _controller,

  overlayChildBuilder: (context) => UnconstrainedBox(

    child: CompositedTransformFollower(

      // Ensure to use the same LayerLink

      link: _link,

      targetAnchor: Alignment.bottomLeft,

      child: const SizedBox(

        width: 200,

        height: 200,

        child: Placeholder()

      ),

    ),

  ),

  child: CompositedTransformTarget(

    link: _link,

    child: ElevatedButton(

    onPressed: _controller.toggle,

      child: const Text('Toggle dropdown'),

    ),

  ),

),

Almost perfect

Despite this implementation for dropdowns is actually really good and simple, there's still one problem: what if there's insufficient space to show the dropdown?

Let's say you have a dynamic layout where things can change size or position. In that case, your dropdown might not have enough space to show and can clip out of bounds, like this:

This is an important problem because user then couldn't have access to the dropdown menu, leaving them with a really bad UX. And, to be honest, I haven't found an elegant solution to this yet either using external packages or not (maybe visibility_detector could help but, again, I haven't tried yet).

Final words

Well that's all for today, hope you enjoyed it all! If you liked this, let a comment or react in this post :)

And, of course, here's the entire (but slightly more elaborated) code of this article: https://gist.github.com/Miqueas/4d0b92a15c0cc24fee6ef389250ab027

Have a nice day and see you later!

Learning about CustomPaint in Flutter

Josué Martínez — Sun, 23 Jun 2024 23:09:54 +0000

Something like a week ago I started to research about "how I can manually draw things in the Flutter canvas" and found information about CustomPaint and CustomPainter, which seems to be the main Flutter mechanism to allow devs draw specific things.

I'm not sure if there're more options or alternatives to achieve that, so for now let's just talk about my experience with Flutter's CustomPaint widget.

The Flutter art workshop, an analog perspective

Since the very first moment I started to learn Flutter, I inmediately noticed that it is, essentially, just an OpenGL canvas with a bunch of abstractions. I personally don't like that, not because of the abstractions themselves, but because using an OpenGL canvas doesn't feel... Native... Like, it's really easy to notice that.

And you may think: "Well, yeah, but if you think about that, every user interface is just an intangible abstraction, so... Who cares?". And yeah, you're right and I also agree with that, it's just a personal opinion and I've been learning how that approach for making user interfaces brings some benefits.

With that in mind, I ended up to the conclusion that Flutter it's likely an art workshop: it gives you canvas and a bunch of different brushes and tools to draw interfaces in a fast, simple and easy way. With this perspective, using an OpenGL canvas makes much more sense and helps bit to understand how CustomPaint works and it's more easy to explain it.

Alright, let's move on a bit more

So, you are working on a Flutter project and there's something specific you want to do, but Flutter doesn't have a widget for that and there's only one solution: create it by yourself. Well, the way to do that is by using CustomPaint, a widget that gives you direct access to the canvas, allowing you to draw things, but with one requirement: you need to give it a CustomPainter, which is basically Flutter telling you "Fine, you can draw here, but you must give an specialized artist for this very specific job!".

Creating a `CustomPainter`

At this point, you may be wondering what's a CustomPainter and how to create them, because if you try giving a literal CustomPainter to a CustomPaint, you'll get an error. That's because CustomPainter is an abstract class and we have to create a class that extends from CustomPainter instead. So, let's make it:

final class WavePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Now, let me explain this:

Our class is named WavePainter because we're going to make a simple audio waveform widget (as in the banner of this article)
All classes that extends from CustomPainter must override 2 methods:
- paint: this one is where we're going to draw
- shouldRepaint: and this one handles if paint should be called again

Pretty simple, right? The paint methods recieves a Canvas and a Size object for the drawing stuff and shouldRepaint recieves an old version of our CustomPainter to check for changes and, if so, return true to tell Flutter to repaint the widget, but we usually do this only if our widget has mutable data that is expected to change during the lifetime of our app.

Starting to draw

Alright, so our CustomPainter looks good so far, we can already give it to a CustomPaint, however, it will not draw anything because we haven't code what to draw yet, so let's start by creating a brush for our drawing:

final class WavePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // The Paint class is essentially a brush, so...
    final brush = Paint()
      // We set the color,
      ..color = Color(0xFFFAFAFA)
      // the thickness of the line
      ..strokeWidth = 3
      // and how we want them to end
      ..strokeCap = StrokeCap.round;
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

At this point, you should check out the API reference for the Paint class to know what else you can do with it. Now, our brush is ready to use, so it's time to finish our drawing:

final class WavePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final brush = Paint()
      ..color = Colors.white
      ..strokeWidth = 3
      ..strokeCap = StrokeCap.round;

    var shift = 0.0;
    final verticalCenter = size.height / 2;
    final values = List<double>.generate(100, (_) {
      return Random().nextDouble() * verticalCenter;
    });

    for (var i = 0; i < values.length && shift < size.width; i++) {
      canvas.drawLine(
        Offset(shift, verticalCenter - values[i]),
        Offset(shift, verticalCenter + values[i]),
        brush
      );

      shift += 6;
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

If we put that inside of a CustomPaint, we should get something like this:

Understanding what's going on

Now, again, I'm gonna explain these changes a bit more, but first, we need to understand how exactly positioning works in this case, which is pretty simple because we can understand it by just looking at this image:

As you can see, we start drawing at the top left corner of the given canvas, so if we don't want to draw outside of it, we should use positive numbers. That said, we will want to find the vertical center of that canvas and that's exactly what we did with size.height / 2, we're gonna use that number for both: positioning our bars and limit it's size.

By default, all custom paints gets a canvas of 300x300, but we can change that by putting our custom paint into another widget that could help to set a different size. In this case, I created a canvas of 400x100 by putting my custom paint inside of a Container, so our vertical center is 50 (unless we change the height of the Container).

That said, how we're gonna use that number as the limit of our bars? Well, that's pretty simple and we already did it in this line:

return Random().nextDouble() * verticalCenter;

You see, since nextDouble will always return a number between 0.0 and 1.0, mutiplying that result by the vertical center will never exceed half the height of the canvas, so it's perfectly fine to do that. Now this section in the code we wrote makes more sense:

canvas.drawLine(
  Offset(shift, verticalCenter - values[i]),
  Offset(shift, verticalCenter + values[i]),
  brush
);

drawLine requires an starting point and an end point for drawing lines, so we're doing this:

Pretty simple, right? Now, you might be thinking: "What about shift? What it does?". Well, shift is even more easy: it controls the horizontal position of our bars. Since we're not only putting them side by side, but also leaving a small space between them, we set shift to the width of the line (3) + space we want to have between bars (also 3) and we just keep incrementing it after every use.

Finally, to prevent our drawing to go out of the size of the given canvas, we put an additional condition to our for loop: shift < size.width. With that simple condition, no matter the width of the given canvas or how much data we have.

Final words

To be honest, learning how to do this was a really cool thing, I enjoyed the process and had a fun moment so far, despite I wasn't able to implement it in the project I'm working on.

Here is the full code for this article: https://gist.github.com/Miqueas/b66297d8de4a29000e9cb4d3f9cdc3f5

Anyways, I hope you enjoyed this too, feel free to share, have a nice day and see you another day 👋.

OverflowBox and videos in Flutter

Josué Martínez — Fri, 14 Jun 2024 14:45:51 +0000

Recently I was working on something with Flutter when I encountered with a small problem: how can I make a video to fill up all the available space inside a Container widget?

Well, today I’m gonna explain how I did it and how the “Understanding constraints” Flutter docs article helped me in that.

The `OverflowBox` widget

I’m new in the Flutter world, so I usually have to deal with weird/strange/unexpected results while using it because I don’t have too much experience. But recently I found an article (mentioned earlier) about how constraints works in Flutter, written by the official Flutter development team. That article helped me a lot and was like a revelation, because it says a lot of important stuff to take in consideration while working with Flutter and since I didn’t learned Flutter by reading the documentation, it was really useful for me.

It was in that article where I found the OverflowBox widget, which as it’s name suggests, is a widget that allows it’s inner child to overflow without getting the typical “overflow error” in Flutter. In the moment, I didn’t pay too much attetion to it because it didn’t sound too interesting to me and wasn’t able to imagine a situation where I would need to use it. Except that… It didn’t take too much time for me to found a use case.

Videos and the `AspectRatio` widget

As I said at the start, I was making something in Flutter (a fixed size widget where to put a widget for playing videos) and everytthing was going good until I realized that the rounded corners I made for the widget weren’t working. I spent a while trying to figure out what the heck was going on, because not only the rounded corners weren’t working , but also the video had a different size. After a couple of long minutes, I started to suspect about what was going on: I saw the AspectRatio widget… And decided to put a background color to the Container where I was making all of that and… I saw the problem.

Look, when we put something into an AspectRatio widget, it will do pretty much what the name suggests: ensure the child widget keeps the given aspect ratio, so if we put that widget inside of another widget that has a different aspect ratio, it will do something like this:

The AspectRatio widget with the video is inside of a 200x200 Container, the yellow background helps to notice what’s going on.

As we can see, the widget does the job very well and the result is the expected… Which is kinda obvious by just looking at the name of the widget, but for me that wasn’t the case. And the code for that looks like this:

return Center(
  child: Container(
    width: 200,
    height: 200,
    decoration: const BoxDecoration(color: Colors.amber,),
    child: AspectRatio(
      aspectRatio: _controller.value.aspectRatio,
      child: VideoPlayer(_controller),
    ),
  ),
);

Now, using the AspectRatio widget with videos makes a lot of sense, but… I didn’t want this result… I wanted to fill the entire space with the video, no matter if that means that it will be cropped off.

The solution…?

So, I was thinking… “How can I solve this?”… And then, all of the sudden, I just remembered that I saw a widget in an article that I readed recently… That’s right, the OverflowBox widget I just saw a couple of days ago in the “Understanding constraints” article.

There was no time to think twice, I started to code and… It didn’t work. But, it was my fault, because it didn’t set how I wanted the child to overflow inside the OverflowBox widget, so I fixed that and there we go, problem… Solved?

As you can see, that video is definitely NOT an 200x200 box as it’s parent…

Well, what’s going on? It still looks to have the same aspect ratio, but bigger… And we can tell the OverflowBox is doing the job because we can’t see the yellow background… And the code is correct as we just wrapped the AspectRatio with the OverflowBox, that should do the job, right?

return Center(
  child: Container(
    width: 200,
    height: 200,
    decoration: const BoxDecoration(color: Colors.amber,),
    child: OverflowBox(
      maxWidth: double.infinity,
      maxHeight: 200,
      child: AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      ),
    ),
  ),
);

Well… No. This result is expected and should not be surprising if we pay attention to the Flutter API: almost all widgets does only 1 thing and almost all of them don’t crop other widgets unless we specifically tell them to do it.

Let’s fix this already!

Alright, now it’s more clear what we need to do, so let’s “fix” the code above by setting the clipBehavior property:

return Center(
  child: Container(
    width: 200,
    height: 200,
    clipBehavior: Clip.antiAlias,
    decoration: const BoxDecoration(color: Colors.amber,),
    child: OverflowBox(
      maxWidth: double.infinity,
      maxHeight: 200,
      child: AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      ),
    ),
  ),
);

And now, finally, there we go, problem solved:

As you can see, that video is definitely NOT in a 200x200 aspect ratio as it’s parent…

Now, this can also be done with ClipRect, but Containerlet’s us set the width, height, background color and we can even do the same thing of clipping the content… But also making nice rounded corners by just adding a single line of code!

So elegant!

And that’s just…

return Center(
  child: Container(
    width: 200,
    height: 200,
    clipBehavior: Clip.antiAlias,
    decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.circular(20),),
    child: OverflowBox(
      maxWidth: double.infinity,
      maxHeight: 200,
      child: AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      ),
    ),
  ),
);

“Nice, I’m gonna use it with images!”

Now, hold on right there… Sure, you can do that I guess, however, you may not need it. Why? Well, that’s pretty simple: the Image widget already has mechanisms to achieve either the same, similar or better results. So… There’s no need to do that, you can just try playing around with Image and other widgets.

Conclusion

There’s not so much to say, I love when I learn something new like that because is something that came from my mind: not asking, not googling, just straightforward knowledge that I already have but only pops out in the best moment where I need it.

I hope you enjoyed this pretty simple article, I just wanted to share a small experience in my path learning Flutter. This was originally posted on my personal Telegram channel in a more casual way, so if you want to read it, here it is where it started.

Also, if you want the full code, you can get it here.

Have a nice day :)

DEV Community: Josué Martínez

Building a custom dropdown in Flutter

First things first

CompositedTransformTarget

OverlayPortal

Let's start already

Almost perfect

Final words

Learning about CustomPaint in Flutter

The Flutter art workshop, an analog perspective

Alright, let's move on a bit more

Creating a CustomPainter

Starting to draw

Understanding what's going on

Final words

OverflowBox and videos in Flutter

The OverflowBox widget

Videos and the AspectRatio widget

The solution…?

Let’s fix this already!

“Nice, I’m gonna use it with images!”

Conclusion

`CompositedTransformTarget`

`OverlayPortal`

Creating a `CustomPainter`

The `OverflowBox` widget

Videos and the `AspectRatio` widget