What is Baseline in Flutter

Baseline is a widget that positions its child according to the child widget’s baseline.

Does it not make any sense?

Well, truly it didn’t make any sense to me also, when I first encountered this widget.

In fact, the above statement doesn’t really make any sense if we don’t turn this abstraction into a concrete example.

Therefore, firstly, let’s see one screenshot of a simple Flutter app where we’ve used Baseline widget.

Secondly, we’ll look into the code and try to understand how this widget works.

In the above image we see three Baseline examples. The first one consists of two Container widgets.

Let’s see the code.

Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Baseline(
                baseline: 0,
                baselineType: TextBaseline.alphabetic,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.purple,
                ),
              ),
            ),

The Baseline widget has two required parameters. The baseline, and the baselineType. The second parameter means the type of the baseline.

As a result, we need to supply value to those parameters.

The baseline parameter plays the most important role, of course. It requires a double value.

In the above case, the baseline is zero.

So it sits on top of the parent Container.

How does it happen?

It happens because the Baseline widget tries to shift the Child Container’s bottom or baseline by calculating the distance from the top of the parent Container. Since it’s zero, it cannot shift it. So it sits on its top.

As a result, it cannot enter the parent Container.

In the second case, the Child Container’s baseline is 50.

 Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Baseline(
                baseline: 50,
                baselineType: TextBaseline.alphabetic,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.purple,
                ),
              ),
            ),

Therefore, the baseline logical pixels below the top of the parent Container is 50px. As a result, the bottom of the child Container shifts 50px inside the parent Container.

And the parent Container contains the child in the middle.

Take a look at the screenshot above, you’ll understand how it works.

How do you use baseline in flutter?

Most importantly, we use Baseline widget when we want to position the child widget’s bottom according to the distance from the top of the parent widget.

When the child Container’s baseline is 100px, it moves its bottom 100px exactly, from the top of the parent Container.

As a consequence, the child’s bottom merges with the parent’s bottom. The above screenshot displays the same thing.

Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Baseline(
                baseline: 100,
                baselineType: TextBaseline.alphabetic,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.purple,
                ),
              ),
            ),

If we start increasing the value of the baseline, and make it 110px, what happens?

The next screenshot shows that.

The child Container moves outside the parent Container.

Moreover, from the top of the parent Container’s to the bottom of the child Container, the distance is 110px exact.

Let’s take a look at the full code finally.

import 'package:flutter/material.dart';

class BaselineSample extends StatelessWidget {
  const BaselineSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Baseline Sample',
      debugShowCheckedModeBanner: false,
      home: BaselineSampleHomme(),
    );
  }
}

class BaselineSampleHomme extends StatelessWidget {
  const BaselineSampleHomme({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Baseline Sample'),
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(
              height: 100,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Baseline(
                baseline: 0,
                baselineType: TextBaseline.alphabetic,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.purple,
                ),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Baseline(
                baseline: 50,
                baselineType: TextBaseline.alphabetic,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.purple,
                ),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Baseline(
                baseline: 110,
                baselineType: TextBaseline.alphabetic,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.purple,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

We can provide a negative value to the baseline of the child Container. Try to make it -50.

At that instance, the bottom of the child Container moves away upward and goes out of the parent Container in the upward direction.

Try it. Happy fluttering.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter