Material 3 Durations demo

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool spin = false;
  double durationIndex = 0;
  String? sliderLabel = 'Test';

  @override
  Widget build(BuildContext context) {
    const List<Duration> durations = [
      Durations.short1,
      Durations.short2,
      Durations.short3,
      Durations.short4,
      Durations.medium1,
      Durations.medium2,
      Durations.medium3,
      Durations.medium4,
      Durations.long1,
      Durations.long2,
      Durations.long3,
      Durations.long4,
      Durations.extralong1,
      Durations.extralong2,
      Durations.extralong3,
      Durations.extralong4,
    ];

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        sliderTheme: const SliderThemeData(trackHeight: 10),
      ),
      home: Scaffold(
        backgroundColor: const Color(0xff14161d),
        body: Center(
          child: AnimatedRotation(
            duration: durations[durationIndex.toInt()],
            turns: spin ? 1 : 0,
            child: Image.network(
              'https://i.imgur.com/ajxbLdw.png',
              fit: BoxFit.contain,
            ),
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          color: const Color(0xff1f1f1f),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Expanded(
                child: Slider(
                  divisions: durations.length - 1,
                  value: durationIndex,
                  max: durations.length.toDouble() - 1,
                  label: sliderLabel,
                  onChanged: (double value) {
                    setState(() {
                      durationIndex = value;
                      switch (durationIndex) {
                        case 1:
                          sliderLabel = 'Durations.short1';
                        case 2:
                          sliderLabel = 'Durations.short2';
                        case 3:
                          sliderLabel = 'Durations.short3';
                          break;
                        case 4:
                          sliderLabel = 'Durations.short4';
                        case 5:
                          sliderLabel = 'Durations.medium1';
                        case 6:
                          sliderLabel = 'Durations.medium2';
                        case 7:
                          sliderLabel = 'Durations.medium3';
                        case 8:
                          sliderLabel = 'Durations.medium4';
                        case 9:
                          sliderLabel = 'Durations.long1';
                        case 10:
                          sliderLabel = 'Durations.long2';
                        case 11:
                          sliderLabel = 'Durations.long3';
                        case 12:
                          sliderLabel = 'Durations.long4';
                        case 13:
                          sliderLabel = 'Durations.extralong1';
                        case 14:
                          sliderLabel = 'Durations.extralong2';
                        case 15:
                          sliderLabel = 'Durations.extralong3';
                          break;
                        case 16:
                          sliderLabel = 'Durations.extralong4';
                      }
                    });
                  },
                ),
              ),
              FilledButton(
                onPressed: () {
                  setState(() {
                    spin = !spin;
                  });
                },
                child: const Text('Spin!'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}