Question 421260 in Flutter Question posted in
The official Flutter documentation can be found here.

How to vertically center widgets in a Row and separate them with dots in Flutter?

How to make the middle text centered vertically?

enter image description here

my current approach is like this:

Row _text2Value(
  {required String title,
  required String value1,
  required String uom,
  required String value2}) {
return Row(children: [
  Text(title, style: TextStyle(fontSize: 8)),
  Expanded(
      child: Text('.' * 100, maxLines: 1, style: TextStyle(fontSize: 8))),
  Text("$value1 $uom", style: TextStyle(fontSize: 8)),
  Expanded(
      child: Text('.' * 100, maxLines: 1, style: TextStyle(fontSize: 8))),
  Text(value2, style: TextStyle(fontSize: 8))
]);
}
Tags:

4

Answers


  1. 0

    The below code should work for you.

      Row _text2Value({
    required String title,
    required String value1,
    required String uom,
    required String value2,
  }) {
    return Row(
      children: [
        Expanded(
          child: Row(
            children: [
              Text(
                title,
                style: const TextStyle(fontSize: 8),
              ),
              Expanded(
                child: Text(
                  '.' * 100,
                  maxLines: 1,
                  style: const TextStyle(fontSize: 8),
                ),
              ),
            ],
          ),
        ),
        Text(
          "$value1 $uom",
          style: const TextStyle(fontSize: 8),
        ),
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: Text(
                  '.' * 100,
                  maxLines: 1,
                  style: const TextStyle(fontSize: 8),
                ),
              ),
              Text(
                value2,
                style: const TextStyle(fontSize: 8),
              ),
            ],
          ),
        ),
      ],
    );
  }
    Login or Signup to reply.
  2. 0

    Just refer to your code I have try something using Expanded Widget. you can used Flexible Widget as well instead of Expanded.

    Custom Method:

    _text2Value({
    required String title,
    required String value1,
    required String uom,
    required String value2,
  }) {
    return Row(
      children: [
        Expanded(
          child: Row(
            children: [
              Text(
                title,
                style: const TextStyle(fontSize: 8),
              ),
              Expanded(
                child: Text(
                  '.' * 100, // change count as per your need
                  maxLines: 1,
                  style: const TextStyle(fontSize: 8),
                ),
              ),
            ],
          ),
        ),
        Text(
          "$value1 $uom",
          style: const TextStyle(fontSize: 8),
        ),
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: Text(
                  '.' * 100, // change count as per your need
                  maxLines: 1,
                  style: const TextStyle(fontSize: 8),
                ),
              ),
              Text(
                value2,
                style: const TextStyle(fontSize: 8),
              ),
            ],
          ),
        ),
      ],
    );
  }

    Implement Custom Method:

    Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return _text2Value(
            title: 'Title ${index + 1}',
            uom: '${index + 1}',
            value1: 'Kali ${index + 1}',
            value2: 'RP.${index + 1}',
          );
        },
      ),
    ),

    Mobile Screen, Web Screen

    Login or Signup to reply.
  3. 0

    To vertically center widgets in a Row in Flutter and separate them with dots, you can use the Row widget with mainAxisAlignment: MainAxisAlignment.center for alignment and CrossAxisAlignment.center for vertical centering. Use Text("•") as a separator. For example:

    Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text("Widget1"),
    Text("•", style: TextStyle(fontSize: 20)), // Dot separator
    Text("Widget2"),
  ],
);

    This approach ensures proper centering and dot separation between the widgets.

    Login or Signup to reply.
  4. 0 
    Row _text2Value(
      {required String title,
        required String value1,
        required String uom,
        required String value2}) {
    return Row(mainAxisAlignment: MainAxisAlignment.center,
        children: [
      Expanded(
        child: Row(
          children: [
            Text(title, style: TextStyle(fontSize: 13)),
            Expanded(
                child: Text('.' * 100, maxLines: 1, style: TextStyle(fontSize: 13))),
          ],
        ),
      ),
      Text("$value1 $uom", style: TextStyle(fontSize: 13)),
      Expanded(
        child: Row(
          children: [
            Expanded(
                child: Text('.' * 100, maxLines: 1, style: TextStyle(fontSize: 13))),
            Text(value2, style: TextStyle(fontSize: 13))
          ],
        ),
      )
    ]);
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search