Radial PageView Transitions With Flutter

Hi,

This is my first post here and just a quick share.

I have recently taken up flutter for a project. This Radial Transition, implemented for PageViews in Flutter, is a product of the work done on the prototype for that project (works with flutter web):

For the scope of this post, I used the PageView.builder method as below:

	import 'dart:math';
	import 'package:flutter/material.dart';
	import 'package:trial/styles.dart';
	class SwitcherApp extends StatelessWidget {
	Widget build(BuildContext context) {
	return MaterialApp(
	theme: ThemeData(
	brightness: Brightness.dark,
	scaffoldBackgroundColor: mainBlack,
	),
	home: Switcher(),
	);
	}
	}
	class Switcher extends StatefulWidget {
	@override
	SwitcherState createState() => SwitcherState();
	}
	class SwitcherState extends State<Switcher> {
	PageController controller;
	var _currentPage = 0.0;
	@override
	void initState() {
	super.initState();
	controller = PageController(viewportFraction: 1.2);
	controller.addListener(() {
	setState(() {
	this._currentPage = this.controller.page;
	});
	});
	}
	@override
	void dispose() {
	super.dispose();
	controller.dispose();
	}
	Widget build(BuildContext context) {
	return Scaffold(
	body: PageView.builder(
	controller: controller,
	itemBuilder: (context, position) {
	if (position == _currentPage.floor()) {
	return Transform(
	transform: Matrix4.identity()
	..rotateZ((-(_currentPage-position)/pi)*.5),
	alignment: FractionalOffset.bottomCenter,
	child: Container(
	color: position % 2 == 0 ? Colors.blue : Colors.pink,
	child: Center(
	child: Text(
	"Page $position",
	style: TextStyle(color: Colors.white, fontSize: 22.0),
	),
	),
	),
	);
	} else if (position == _currentPage.floor() + 1) {
	return Transform(
	transform: Matrix4.identity()
	..rotateZ((-(_currentPage-position)/pi)*.5),
	alignment: FractionalOffset.bottomCenter,
	child: Container(
	color: position % 2 == 0 ? Colors.blue : Colors.pink,
	child: Center(
	child: Text(
	"Page",
	style: TextStyle(color: Colors.white, fontSize: 22.0),
	),
	),
	),
	);
	} else {
	return Container(
	color: position % 2 == 0 ? Colors.blue : Colors.pink,
	child: Center(
	child: Text(
	"Page",
	style: TextStyle(color: Colors.white, fontSize: 22.0),
	),
	),
	);
	}
	},
	itemCount: 10,
	),
	);
	}
	}

view raw switcher.dart hosted with ❤ by GitHub

I hope it helps you guys!