import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final pager = PageController();
  int current = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      resizeToAvoidBottomInset: true,
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.filter_1),
            label: 'Red',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.filter_2),
            label: 'Green',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.filter_3),
            label: 'Blue',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.filter_4),
            label: 'Yellow',
          ),
        ],
        currentIndex: current,
        iconSize: 24.0,
        activeColor: CupertinoTheme.of(context).primaryColor,
        inactiveColor: CupertinoColors.inactiveGray,
        onTap: (page) {
          setState(() => current = page);
          if (pager.hasClients) pager.animateToPage(current, duration: kThemeAnimationDuration, curve: Curves.easeInOut);
        },
      ),
      tabBuilder: (context, index) {
        return CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: Text('Test'),
          ),
          resizeToAvoidBottomInset: true,
          child: PageView(
            controller: pager,
            onPageChanged: (page) {
              setState(() => current = page);
            },
            children: [
              Container(color: Colors.red),
              Container(color: Colors.green),
              Container(color: Colors.blue),
              Container(color: Colors.yellow),
            ],
          ),
        );
      },
    );
  }
}