Baseline Widget and Attributes

Flutter offers a diverse set of widgets to build intricate and pixel-perfect user interfaces. Among these, the Baseline widget stands out as a key player when it comes to aligning text and other widgets along a common baseline. Let's explore the Baseline widget and its attributes with a comprehensive example.

The Baseline widget in Flutter is a powerful tool for aligning widgets along a common baseline, ensuring consistent vertical alignment in your UI. It is particularly useful when dealing with text and other widgets that need to share a visual baseline, creating a harmonious and visually pleasing layout.

Attributes of Baseline:

1. baseline:

The baseline attribute specifies the baseline value to which the child should be aligned. This value is relative to the top of the widget.

2. baselineType:

The baselineType attribute defines the type of baseline to be used. It can be set to alphabetic or ideographic, depending on the visual requirements.

3. child:

The child attribute is where you define the widget that needs to be aligned along the baseline.

Example:

Let's consider a scenario where we want to align a text widget and an icon along a common baseline using the Baseline widget.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Baseline Widget Example'),
      ),
      body: const Center(
        child: Baseline(
          baseline: 50.0,
          baselineType: TextBaseline.alphabetic,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Baseline',
                style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(width: 10.0),
              Icon(
                Icons.star,
                size: 24.0,
                color: Colors.amber,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In this example:

The Baseline widget is used to align a Text widget and an Icon along a common baseline.
The baseline attribute is set to 50.0, indicating the vertical position relative to the top of the widget.
The baselineType is set to TextBaseline.alphabetic to align based on the alphabetic baseline.
The child attribute contains a Row with a text widget and an icon, creating a visually aligned layout.

By utilizing the Baseline widget, you can achieve precise and visually appealing alignments in your Flutter UI, especially when dealing with text and icons that share a common baseline.