对齐 Flutter 中数据表中的小数点

Question

Values are centered: -

I need them to be centered with respect to the decimal point: -

Hello, good afternoon. I am making a POS to practice Flutter and I need to know if it is possible to center a text with respect to a certain character.

Inside my DataTable I have my DataColumns and my Datacels, inside the latter I have an Align with a Text. But obviously that align does not center as I want.

return DataCell(
      Align(
        alignment: Alignment.center,
        child: Text(
          datos,
          style: const TextStyle(fontSize: 18, color: style.Colors.lightColor),
        ),
      ),
    );

Answer 1

This is workaround, Add textAlign Property of Text Widget then use a Container Widget and apply margin Property of it to add a padding to right side.

Sample Code: -

SizedBox(
width: 110,
child: Container(
  margin: const EdgeInsets.only(right: 25),
  child: const Text(
    '15201,36',
    style: TextStyle(fontSize: 18),
    textAlign: TextAlign.end,
  )),
),

Complete Code: -

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: DataTable(
        columns: const <DataColumn>[
          DataColumn(
            label: Expanded(
              child: Center(
                child: Text(
                  'Number',
                  style: TextStyle(fontStyle: FontStyle.italic),
                ),
              ),
            ),
          ),
        ],
        rows: <DataRow>[
          DataRow(
            cells: <DataCell>[
              DataCell(Center(
                child: SizedBox(
                  width: 110,
                  child: Container(
                      margin: const EdgeInsets.only(right: 25),
                      child: const Text(
                        '950,00',
                        style: TextStyle(fontSize: 18),
                        textAlign: TextAlign.end,
                      )),
                ),
              )),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Center(
                child: SizedBox(
                  width: 110,
                  child: Container(
                      margin: const EdgeInsets.only(right: 25),
                      child: const Text(
                        '1300,00',
                        style: TextStyle(fontSize: 18),
                        textAlign: TextAlign.end,
                      )),
                ),
              )),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Center(
                child: SizedBox(
                  width: 110,
                  child: Container(
                      margin: const EdgeInsets.only(right: 25),
                      child: const Text(
                        '6949,85',
                        style: TextStyle(fontSize: 18),
                        textAlign: TextAlign.end,
                      )),
                ),
              )),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Center(
                child: SizedBox(
                  width: 110,
                  child: Container(
                      margin: const EdgeInsets.only(right: 25),
                      child: const Text(
                        '15201,36',
                        style: TextStyle(fontSize: 18),
                        textAlign: TextAlign.end,
                      )),
                ),
              )),
            ],
          ),
        ],
      ),
    );
  }
}

Output: -