The Container Widget | 3 Things I’ve Learnt

Over the past week or so, I have been following an online tutorial for an end-to-end Flutter application. I am barely halfway through it but I have picked up a few things about containers that I’d like to share.

Photo by Paul Teysen on Unsplash

The Container widget, just as the name suggests is like a ‘box’ which is used to store other widgets e.g. Text through its child property. (Everything in Flutter is a Widget). The Container is a very flexible widget with a lot of useful properties in the development of any Flutter Application. Now onto the 3 things I’ve learnt…

Height and Width Properties

Based on one’s requirements, the height and width of a Container can be specified using the height and width properties. If unspecified, a Container with no child will fill the given area on the screen. However, if the Container has a child, it will take the space of the child i.e., it’s height and width will be that of the child element.

With that said, at some point in the tutorial, we came across this error: horizontal viewport was given unbounded height.

This error occurs when there is a container that doesn’t have any size set and in most cases that size is the height — similar to the code snippet below.

@override
Widget build(BuildContext context) {
  return Container(
      child: PageView.builder(
          itemCount: 5,
          itemBuilder: (context, position) {
            return _buildPageItem(position);
         },
       ),
     );

The error can simply be resolved by adding a height property to the returned Container e.g. height: 320.0

Stacking Containers

If you put a Container inside another Container in Flutter, the child Container takes up the size of the parent Container. This might not be the desired behaviour though. Let’s say you want to achieve the UI below.

This UI consists of two containers, one sitting on top of the other. Therefore, to best achieve this, firstly we’ll need to wrap the two containers in a Stack widget.

The Stack is a widget in Flutter which allows layering and overlapping of widgets. The Stack prints its children in the order given with the first child being at the bottom of the screen (the yellow Container in the Mock-up above) and the last child appearing at the top (the green Container). Hence, you will see 100% of the last child, while the first child will be overlapped.

Secondly, we’ll wrap the second Container is an Align widget. The Align widget aligns its child within itself. It is flexible and it can also change its size based on the size of its child. With this widget, you can tell the child where to sit.

return Stack(
  children: [
    Container (...), // yellow Container
    Align (
      alignment: Alignment.bottomCenter,
      child: Container (...), // green Container
   ),
  ],  
);

Using both the Stack and Align widgets, we’ll be able to achieve the UI above.

Transforming Containers

Take an example of a UI containing a slider/slideshow — a carousel of containers with e.g. images which can be scrolled from left or right.

An aesthetic feature you might want to consider is how the slides are presented. It looks really nice when the slides to the left and right of the middle slide appear smaller and only seem to increase in size when one scrolls horizontally and they become the middle/focused slide. Perhaps the below demonstration explains it better.

Note the change in scale when the sides are scrolled

To achieve this, we can make use of the Matrix4 Flutter class and the Transform widget.

The Transform widget is a class that applies a type of transformation to its child. It allows us to alter how the widgets look, behave and to even animate. Within the Transform widget, we make use of the Matrix4 class which does the actual transformation e.g. scaling — the transformation we need to achieve the above UI.

Widget _buildPageItem(int index) {
  Matrix4 matrix = Matrix4.identity();
  
  //insert matrix scaling and requirements 
  //this will based on the page value of the slider
  return Transform (
     transform: matrix,
     child: Stack (
        children: [
        Container (...), // yellow Container
        Align (
           alignment: Alignment.bottomCenter,
           child: Container (...), // green Container
        ),
       ], 
     ),
   );
}

If you’re interested to read more about the full power of the Matrix4 and the Transform widget, there are more in-depth write-ups on them such as this and this both by Deven Joshi

There’s still a lot to learn, and we’re getting there. But that’s it for the article, I hope you enjoyed it.

Thank you for reading ❤