Flutter center button with label to left and right (with Stack)

main.dart

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: const MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    double buttonWidth = 100;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("Center"),
      ),
      body: Column(
        children: [
          // FIRST SET ---------------
          Stack(
            children: [
              // 1. Row: button center
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                    width: buttonWidth,
                    height: buttonWidth,
                    child: Image.network(
                      'https://dummyimage.com/${buttonWidth}x${buttonWidth}/EEE/31343C', // Placeholder image URL
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              ),
              //alternative text
              /*
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[Container(width: buttonWidth, color: Colors.green, child: Text("Button Mitte", textAlign: TextAlign.center))],
          ),*/

              //2. Row: label left
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                    color: Colors.blue,
                    child: SizedBox(
                      width:
                          (MediaQuery.of(context).size.width - buttonWidth) / 2,
                      child: Text("\n\nLABEL", textAlign: TextAlign.right),
                    ),
                  ),
                ],
              ),
              //3. Row: label right
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Container(
                    color: Colors.yellow,
                    child: SizedBox(
                      width:
                          (MediaQuery.of(context).size.width - buttonWidth) / 2,
                      child: Text("\n\nLABEL", textAlign: TextAlign.left),
                    ),
                  ),
                ],
              ),
            ],
          ),

          // SECOND SET ---------------
          Stack(
            children: [
              // 1. Row: button center
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                    width: buttonWidth,
                    height: buttonWidth,
                    child: Image.network(
                      'https://dummyimage.com/${buttonWidth}x${buttonWidth}/EEE/31343C', // Placeholder image URL
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              ),

              //2. Row: label left
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                    color: Colors.blue,
                    child: SizedBox(
                      width:
                          (MediaQuery.of(context).size.width - buttonWidth) / 2,
                      child: Text(
                        "\n\nLABEL 2 LEFT",
                        textAlign: TextAlign.right,
                      ),
                    ),
                  ),
                ],
              ),
              //NOT REQUIRED: 3. Row: label right
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Container(
                    color: Colors.yellow,
                    child: SizedBox(
                      width:
                          (MediaQuery.of(context).size.width - buttonWidth) / 2,
                      child: Text("", textAlign: TextAlign.left),
                    ),
                  ),
                ],
              ),
            ],
          ),

          // THIRD SET ---------------
          Stack(
            children: [
              // 1. Row: button center
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                    width: buttonWidth,
                    height: buttonWidth,
                    child: Image.network(
                      'https://dummyimage.com/${buttonWidth}x${buttonWidth}/EEE/31343C', // Placeholder image URL
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              ),

              //NOT REQUIRED: 2. Row: label left
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                    color: Colors.blue,
                    child: SizedBox(
                      width:
                          (MediaQuery.of(context).size.width - buttonWidth) / 2,
                      child: Text("", textAlign: TextAlign.right),
                    ),
                  ),
                ],
              ),
              //3. Row: label right
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Container(
                    color: Colors.yellow,
                    child: SizedBox(
                      width:
                          (MediaQuery.of(context).size.width - buttonWidth) / 2,
                      child: Text("LABEL 3 RIGHT", textAlign: TextAlign.left),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}