Flutter center button with label to left and right 2

center_button_with_labels.dart

import 'package:flutter/material.dart';

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

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

  @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> {
  final double buttonWidth = 200; // Feste Breite für das zentrale Bild

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Center & Labels"),
      ),
      body: Center( // Zentriert die gesamte Row vertikal und horizontal
        child: SingleChildScrollView( // Ermöglicht horizontales Scrollen, falls die Breite nicht ausreicht
          scrollDirection: Axis.horizontal,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center, // Zentriert die Elemente in der Row
            mainAxisSize: MainAxisSize.min, // Stellt sicher, dass die Row nur so breit ist wie ihre Kinder
            children: [
              // Linkes Label
              Flexible(
                // Flexible erlaubt dem Child, den verfügbaren Platz auszufüllen,
                // aber nur wenn es kleiner als der zugewiesene Platz ist (FlexFit.loose ist Standard).
                // Hier wollen wir aber, dass es den Platz fest ausfüllt,
                // daher ist Expanded (oder Flexible mit FlexFit.tight) passender.
                // Mit Expanded wird es den verfügbaren Platz links vom Button ausfüllen.
                child: Container(
                  color: Colors.blue,
                  // Min Height for better visibility of the text
                  constraints: BoxConstraints(minWidth: 0, minHeight: 100),
                  child: const Align(
                    alignment: Alignment.centerRight, // Text rechtsbündig im Container
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 8.0),
                      child: Text("LABEL", textAlign: TextAlign.right),
                    ),
                  ),
                ),
              ),
              
              // Zentrales Bild
              SizedBox(
                width: buttonWidth,
                height: buttonWidth, // Die Höhe bleibt fest
                child: Image.network(
                  'https://dummyimage.com/${buttonWidth}x${buttonWidth}/EEE/31343C',
                  fit: BoxFit.cover,
                ),
              ),

              // Rechtes Label
              Flexible(
                child: Container(
                  color: Colors.yellow,
                  constraints: BoxConstraints(minWidth: 0, minHeight: 100),
                  child: const Align(
                    alignment: Alignment.centerLeft, // Text linksbündig im Container
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 8.0),
                      child: Text("LABEL", textAlign: TextAlign.left),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}