Baseline Widget – Flutter Widget Guide By Flutter Agency

Baseline Widget – Flutter Widget Guide By Flutter Agency

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

What is Baseline Widget?

Baseline Widget shifts the child down such that the child’s baseline is baseline logical pixels below the top of this box, then sizes this box to contain the child.

The constructor of Baseline Widget looks like below :

Baseline({
Key key, 
@required double baseline, 
@required TextBaseline baselineType, 
Widget child,
})

In the above constructor parameter marked with @required are must required. so here we have baseline and baselineType required parameters.

• baseline: The number of logical pixels from the top of this box at which to position the child’s baseline. If the baseline is less than the distance from the top of the child to the baseline of the child, then the child is top-aligned instead.
• baselineType: The type of baseline to use for positioning the child.

Consider an example of it will as below :

Center(
      child: Container(
        color: Colors.orangeAccent,
        height: 120.0,
        width: 120.0,
        child: Baseline(
          child: Container(
            color: Colors.purple,
            height: 60.0,
            width: 60.0,
          ),
          baseline: 20.0,
          baselineType: TextBaseline.alphabetic,
        ),
      ),
    );

As you can see in the above code snippet we have used Container widget. We will get output like below :

In the above code snippet, we are having a baseline value to 20. When we make changes in it we will get output like below :

Center(
      child: Container(
        color: Colors.orangeAccent,
        height: 120.0,
        width: 120.0,
        child: Baseline(
          child: Container(
            color: Colors.purple,
            height: 60.0,
            width: 60.0,
          ),
          baseline: 40.0,
          baselineType: TextBaseline.alphabetic,
        ),
      ),
    );

We will get output like below :

When we set baseline value to 100.0 we will get output like below :

Center(
     child: Container(
       color: Colors.orangeAccent,
       height: 120.0,
       width: 120.0,
       child: Baseline(
         child: Container(
           color: Colors.purple,
           height: 60.0,
           width: 60.0,
         ),
         baseline: 100.0,
         baselineType: TextBaseline.alphabetic,
       ),
     ),
   );

We will have an output like below :

Thanks for reading !!!
Do let us know your suggestion/feedback on the article.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.