Flutter Animation/Tween (replace Widget) 2

main.dart

// Flutter Animation/Tween (replace Widget) 2

import 'package:flutter/material.dart';

void main() => runApp(TimeSlideApp());

class TimeSlideApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SlideTimePage(),
    );
  }
}

class SlideTimePage extends StatefulWidget {
  @override
  State<SlideTimePage> createState() => _SlideTimePageState();
}

class _SlideTimePageState extends State<SlideTimePage> {
  final double widgetWidth = 200;
  TimeOfDay currentTime = TimeOfDay.now();

  void _nextTime() {
    setState(() {
      final hour = (currentTime.hour + 1) % 24;
      currentTime = currentTime.replacing(hour: hour);
    });
  }

  Widget _buildTimeWidget(TimeOfDay time) {
    return Container(
      width: widgetWidth,
      height: 80,
      key: ValueKey(time.hour.toString()),
      color: Colors.blue[100],
      alignment: Alignment.center,
      child: Text(
        'Time: ${time.format(context)}',
        style: TextStyle(fontSize: 16),
      ),
    );
  }

  Widget _transitionBuilder(Widget child, Animation<double> animation) {
    final screenWidth = MediaQuery.of(context).size.width;
    // Relativer Offset berechnen: Um das Widget komplett aus dem Bildschirm zu verschieben,
    // wird die Bildschirmbreite durch die Widgetbreite geteilt.
    // Der Faktor 1.2 sorgt für etwas mehr Abstand außerhalb des Bildschirms.
    final double relativeOffset = (screenWidth / widgetWidth) * 1.2;

    final animationReverse = Tween<Offset>(
      begin: Offset.zero,
      end: Offset(-relativeOffset, 0), // Nach links außerhalb
    ).animate(animation);

    final animationForward = Tween<Offset>(
      begin: Offset(relativeOffset, 0),   // Von rechts außerhalb kommend
      end: Offset.zero,
    ).animate(animation);

    // Erkennen, ob es das neue oder alte Widget ist, anhand des Keys
    if (child.key == ValueKey(currentTime.hour.toString())) {
      // Neues Widget kommt von rechts ins Bild
      return SlideTransition(position: animationForward, child: child);
    } else {
      // Altes Widget gleitet nach links aus dem Bild
      return SlideTransition(position: animationReverse, child: child);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Time Slide Widget')),
      body: Center(
        child: AnimatedSwitcher(
          duration: Duration(milliseconds: 500),
          transitionBuilder: _transitionBuilder,
          child: _buildTimeWidget(currentTime),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _nextTime,
        child: Icon(Icons.swap_horiz),
      ),
    );
  }
}