cupertino_navigation_bar.dart

// https://github.com/flutter/uxr/discussions/93

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;


class Item {
  const Item(this.title, this.backgroundColor, this.foregroundColor);

  final String title;
  final Color backgroundColor;
  final Color foregroundColor;
}

class ItemListView extends StatelessWidget {
  const ItemListView({ super.key });

  static const int itemCount = 50;
  static final List<Item> items = List<Item>.generate(itemCount, (int index) {
    final Color backgroundColor = Color.lerp(Colors.yellow, Colors.green, index / itemCount)!;
    return Item('Item $index', backgroundColor, Colors.white);
  }).toList();


  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: itemCount,
      itemBuilder: (BuildContext context, int index) {
        final Item item = items[index];
        return Card(
          color: item.backgroundColor,
          child: ListTile(
            textColor: item.foregroundColor,
            title: Text(item.title),
          ),
        );
      },
    );
  }
}

class CupertinoNavigationBarApp extends StatelessWidget {
  const CupertinoNavigationBarApp({ super.key });

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: Brightness.light),
      debugShowCheckedModeBanner: false,
      home: CupertinoNavigationBarDemo(),
    );
  }
}

class CupertinoNavigationBarDemo extends StatefulWidget {
  const CupertinoNavigationBarDemo({ super.key });

  @override
  State<CupertinoNavigationBarDemo> createState() => _CupertinoNavigationBarDemoState();
}

class _CupertinoNavigationBarDemoState extends State<CupertinoNavigationBarDemo> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        // Try removing opacity to observe the lack of a blur effect and of sliding content.
        backgroundColor: CupertinoColors.systemGrey.withOpacity(0.5),
        middle: const Text('CupertinoNavigationBar Sample'),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: const Icon(Icons.navigate_next),
          onPressed: () {
            Navigator.push(context, CupertinoPageRoute<void>(
              title: 'Next page',
              builder: (BuildContext context) {
                return const CupertinoPageScaffold(
                  navigationBar: CupertinoNavigationBar(),
                  child: Center(
                    child: Text(
                      'This is the next page',
                      style: TextStyle(fontSize: 24),
                    ),
                  ),
                );
              },
            ));
          },
        ),
      ),
      child: const ItemListView(),
    );
  }
}

void main() {
  timeDilation = 10;
  runApp(const CupertinoNavigationBarApp());
}