Here's my code:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF282B32),
      body: Column(
        children: <Widget>[
          createRow(
            context,
            "https://i.stack.imgur.com/6Utrc.jpg?s=256&g=1",
            "GuildProtect is a powerful, baterries-included moderation bot for your *safe* server!"
          ),
          createDivider(),
          createRow(
            context, 
            "https://cdn.discordapp.com/avatars/967406876029501462/bd3c60dcf55c83fba41b15fba89f798a.webp?size=256", 
            "This is a very beatiful (because it's pink) avatar of this shitty website creator, enjoy!"
          )
        ]
      )
    );
  }

  Row createRow(BuildContext context, String imageUrl, String text) {
    const containerHeight = 256.0;

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          height: containerHeight,
          padding: const EdgeInsets.only(left: 50, top: 25),
          child: Image.network(imageUrl),
        ),
        Container(
          alignment: Alignment.centerRight,
          height: containerHeight,
          padding: const EdgeInsets.only(right: 50, top: 25),
          child: Text(
            text,
            style: TextStyle(
              color: const Color(0xFFFFFCF9),
              fontWeight: FontWeight.bold,
              fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
            ),
          ),
        ),
      ]
    );
  }

  Divider createDivider() {
    return const Divider(
      color: Color(0xFF131518),
      indent: 30,
      endIndent: 30,
      thickness: 1,
      height: 20,
    );
  }
}

Here's the result: Result It's becomes clear when looking at divider line near the images that space above divider and up to first image is not the same as space below divider and down to the second image.

I want to divider's height divide by 2 and take the same amount of space below and above divider. Any clue how to do it?

CodePudding user response：

The padding is only applied on top

return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Container(
        alignment: Alignment.centerLeft,
        height: containerHeight,
        padding: const EdgeInsets.only(left: 50, top: 25),

It would be better to include bottom as well.

padding: const EdgeInsets.only(left: 50, top: 25,bottom:25 ),

I will prefer wrapping the top row with padding widget in this case or using SizedBox/Padding around createDivider