main.dart

import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  final Color _accentColor = const Color(0xFF00FFA9);
  static final ValueNotifier<ThemeMode> _theme = ValueNotifier<ThemeMode>(ThemeMode.light);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
        valueListenable: _theme,
        builder: (BuildContext context, ThemeMode value, Widget? child) {
          return MaterialApp(
            title: 'Motion Blur Experiment',
            color: _accentColor,
            debugShowCheckedModeBanner: false,
            theme: ThemeData(
              //primarySwatch: Colors.blue,
              colorScheme: ColorScheme.light(
                primary: _accentColor,
                secondary: _accentColor,
              ),
            ),
            darkTheme: ThemeData(
              brightness: Brightness.dark,
              colorScheme: ColorScheme.dark(
                primary: _accentColor,
                secondary: _accentColor,
              ),
            ),
            themeMode: value,
            home: const MyHomePage(),
          );
        });
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  final PageController _pageController = PageController(viewportFraction: 1.15);
  late bool _motionBlur = true;
  final Color _accentColor = const Color(0xFF00FFA9);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Motion Blur Experiment'),
        actions: [
          IconButton(
            onPressed: () {
              MyApp._theme.value = (MyApp._theme.value == ThemeMode.dark) ? ThemeMode.light : ThemeMode.dark;
            },
            icon: Icon((MyApp._theme.value == ThemeMode.dark) ? Icons.dark_mode_outlined : Icons.light_mode_outlined),
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            SwitchListTile.adaptive(
                value: _motionBlur,
                title: const Text('Motion Blur'),
                activeColor: _accentColor,
                onChanged: (bool a) {
                  setState(() {
                    _motionBlur = !_motionBlur;
                  });
                }),
            SizedBox(
              width: MediaQuery.of(context).size.width / 1.375,
              height: (MediaQuery.of(context).size.width / 1.375) * 1.5,
              child: PageView(
                controller: _pageController,
                clipBehavior: Clip.none,
                children: <AnimatedBuilder>[
                  for (int index = 0; index < 20; index++)
                    AnimatedBuilder(
                      animation: _pageController,
                      builder: (BuildContext context, Widget? child) {
                        return Transform.scale(
                          /*scale: _pageController.position.haveDimensions
                              ? ((index > _pageController.page!)
                                  ? min(1, (1 + ((_pageController.page! - index) / 2)))
                                  : max(0, (1 - ((_pageController.page! - index) / 2))))
                              : 1.0,*/
                          scale: _pageController.position.haveDimensions ? max(0, (1 - ((_pageController.page! - index).abs() / 2))) : 1.0,
                          child: (_motionBlur)
                              ? ImageFiltered(
                                  imageFilter: ImageFilter.blur(
                                      sigmaX: _pageController.position.haveDimensions
                                          ? max(0.001, ((_pageController.page! - index).abs() * 40))
                                          : 0.001,
                                      sigmaY: _pageController.position.haveDimensions
                                          ? max(0.001, ((_pageController.page! - index).abs() * 2))
                                          : 0.001),
                                  child: child)
                              : child,
                        );
                      },
                      child: Card(
                        borderOnForeground: false,
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
                        elevation: 32.0,
                        child: Center(
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: <Text>[
                                Text(
                                  '$index',
                                  style: TextStyle(fontSize: 36.0, fontWeight: FontWeight.w600, color: _accentColor),
                                ),
                                Text(
                                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis placerat nibh. Aenean dapibus fermentum turpis in porta. In dictum purus vel risus convallis, ut malesuada metus lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean in nibh quis leo tristique consequat ac vel quam. Sed sit amet fringilla turpis. Nam eu eros nec odio sodales vehicula.',
                                  style: TextStyle(fontSize: 24.0, color: _accentColor, fontWeight: FontWeight.w500),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    )
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <IconButton>[
                IconButton(
                    onPressed: () {
                      _pageController.animateToPage(0, duration: Duration(milliseconds: ((_pageController.page!.toInt() - 1) * 70) + 700), curve: Curves.fastOutSlowIn);
                    },
                    icon: const Icon(Icons.arrow_back_rounded)),
                IconButton(
                    onPressed: () {
                      _pageController.previousPage(duration: const Duration(milliseconds: 700), curve: Curves.fastOutSlowIn);
                    },
                    icon: const Icon(Icons.arrow_back_rounded)),
                IconButton(
                    onPressed: () {
                      _pageController.nextPage(duration: const Duration(milliseconds: 700), curve: Curves.fastOutSlowIn);
                    },
                    icon: const Icon(Icons.arrow_forward_rounded)),
                IconButton(
                    onPressed: () {
                      _pageController.animateToPage(19, duration: Duration(milliseconds: ((18 - _pageController.page!.toInt()) * 70) + 700), curve: Curves.fastOutSlowIn);
                    },
                    icon: const Icon(Icons.arrow_forward_rounded)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}