Flutter: Align text right and left with space within row-CodePudding

I want to align 2 different text widgets on opposite sides of a page (with space between the end of the page and the text). I tried the following:

       Column(
       children: [
          Row(
          children: [
            Align(
              alignment: const Alignment(-0.9, 0),
              child: Text(
                card.subCategory,
                style: const TextStyle(fontSize: 16),
              ),
            ),
            Align(
              alignment: const Alignment(0.9, 0),
              child: Text(
                DateFormat.yMMMMd().format(card.createdOn.toDate()),
                style: const TextStyle(fontSize: 16),
              ),
            ),
          ],
        ),

but it piles everything to the right as follows:

but what I want is something closer to the following:

which I got with the following code:

      Column(
      children: [
        Align(
          alignment: const Alignment(-0.9, 0),
          child: Text(
            card.subCategory,
            style: const TextStyle(fontSize: 16),
          ),
        ),
        Align(
          alignment: const Alignment(0.9, 0),
          child: Text(
            DateFormat.yMMMMd().format(card.createdOn.toDate()),
            style: const TextStyle(fontSize: 16),
          ),
        ),

The closest I got was by adding mainAxisAlignment: MainAxisAlignment.spaceBetween to the row widget as follows:

         Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          Align(
            alignment: const Alignment(-0.5, 0),
            child: Text(
              card.subCategory,
              style: const TextStyle(fontSize: 16),
            ),
          ),
          Align(
            alignment: const Alignment(0.5, 0),
            child: Text(
              DateFormat.yMMMMd().format(card.createdOn.toDate()),
              style: const TextStyle(fontSize: 16),
            ),
          )
        ])

but it doesn't add padding/space between the edges of the phone and the text:

CodePudding user response：

Instead of using Align, use mainAxisAlignment (without using Align). Using both is redundant since they both work to align your children along the main axis of the Row. If you want padding only on the text and not on the rounded chip (i.e. only the line of text with "1x30" and the date), just wrap that Row in Padding:

Column(
  children: [
    Padding(
      padding: const EdgeInsets.all(20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text("1x30", style: TextStyle(fontSize: 16)),
          Text(
            DateFormat.yMMMMd().format(DateTime.now()),
            style: const TextStyle(fontSize: 16),
          ),
        ],
      ),
    ),
    // This is the rounded chip you have below the line of text.
    const DetailsChip(),
  ],
)

This builds the following:

However, I would recommend adding an offset from the edge of the phone to the entire screen, which is more consistent with design conventions. In this case, just add Padding around the entire screen and add a SizedBox between the text row and the rounded chip:

// Move this padding to wrap the widget defining the entire screen.
Padding(
  padding: const EdgeInsets.symmetric(horizontal: 20),
  child: Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text("1x30", style: TextStyle(fontSize: 16)),
          Text(
            DateFormat.yMMMMd().format(DateTime.now()),
            style: const TextStyle(fontSize: 16),
          ),
        ],
      ),
      const SizedBox(height: 20),
      // This is the rounded chip you have below the line of text.
      const DetailsChip(),
    ],
  ),
)