Skip to content

Instantly share code, notes, and snippets.

@ercantomac
Last active June 24, 2022 15:50
Show Gist options
  • Save ercantomac/5707c64f25ab185ef25173ae2bae214a to your computer and use it in GitHub Desktop.
Save ercantomac/5707c64f25ab185ef25173ae2bae214a to your computer and use it in GitHub Desktop.
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)),
],
),
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment