Page View with Animation, Delicious Turkish Meals

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
// for more delicious codes follow me
// https://twitter.com/demirdevv

void main() {
  runApp(MaterialApp(home:PageViewExample(), scrollBehavior: AppScrollBehavior(),));
}
 
class PageViewExample extends StatelessWidget {
  PageViewExample({Key? key}) : super(key: key);

  final foodInfo = [
    {'name': 'Turkish Kebab', 'photoBy': 'Engin Akyurt'},
    {'name': 'Turkish Pita', 'photoBy': 'Engin Akyurt'},
    {'name': 'Baklava', 'photoBy': 'Ömer Haktan Bulut'},
    {'name': 'Turkish Pita', 'photoBy': 'Engin Akyurt'},
    {'name': 'Baklava', 'photoBy': 'Engin Akyurt'},
  ];

  final imageUrls = [
    'https://images.unsplash.com/photo-1620167790054-de54f34308bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
    'https://images.unsplash.com/photo-1620374230614-0ba831289903?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
    'https://images.unsplash.com/photo-1620292760785-94e105bdaa8f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
    'https://images.unsplash.com/photo-1620374230612-265d5045c85b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80',
    'https://images.unsplash.com/photo-1617806501553-d3a6a3a7b227?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
  ];

  final PageController _pageController =
      PageController(viewportFraction: 0.65, initialPage: 0);

  bool isFirstBuild = true;
  final _heightFactor = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF121212),
      body: Center(
        child: FractionallySizedBox(
          heightFactor: _heightFactor,
          child: PageView.builder(
            controller: _pageController,
            
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return AnimatedBuilder(
                animation: _pageController,
                builder: (context, child) {
                  double _scaleFactor = 1.0;
                  if (isFirstBuild) {
                    WidgetsBinding.instance?.addPostFrameCallback((_) {
                      isFirstBuild = false;
                    });
                    if (index != _pageController.initialPage) {
                      _scaleFactor = _heightFactor;
                    }
                  } else {
                    final _pageAndIndexMinusAbs =
                        ((_pageController.page ?? 0) - index).abs();

                    if (_pageAndIndexMinusAbs != 0) {
                      _scaleFactor = _pageAndIndexMinusAbs * _heightFactor;
                    }
                  }
                  return FractionallySizedBox(
                    heightFactor: _scaleFactor == 1
                        ? _scaleFactor
                        : (1 - _scaleFactor).abs(),
                    child: child,
                  );
                },
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: InkWell(
                    onTap: () => _pageController.animateToPage(index,
                        curve: Curves.easeOut,
                        duration: const Duration(milliseconds: 450)),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Expanded(
                          child: Image.network(
                            imageUrls[index],
                            fit: BoxFit.cover,
                          ).roundedCircular(20.0),
                        ),
                        Row(
                          children: [
                            const SizedBox(width: 6),
                            Flexible(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  const SizedBox(height: 6),
                                  Text(foodInfo[index]['name']!,
                                      style: Theme.of(context)
                                          .textTheme
                                          .headline6
                                          ?.copyWith(color: Colors.white)),
                                  Text("photo by  ${foodInfo[index]['photoBy']!}",
                                      style: Theme.of(context)
                                          .textTheme
                                          .caption
                                          ?.copyWith(color: Colors.grey)),
                                ],
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              );
            },
            itemCount: imageUrls.length,
          ),
        ),
      ),
    );
  }
}

extension RoundedWidget on Widget {
  Widget roundedCircular([radius = 5.0]) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(radius),
      child: this,
    );
  }
}

class AppScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}