iOS 19 leaks inspired UI in Flutter

new_ios_ui.dart

import 'dart:ui';

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

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(debugShowCheckedModeBanner: false, home: NewiOSUI());
  }
}



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

  @override
  State<NewiOSUI> createState() => _NewiOSUIState();
}

class _NewiOSUIState extends State<NewiOSUI> {
  bool _airplaneMode = false;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Stack(
        children: [
          SizedBox.expand(child: Image.asset('assets/wallpaper.png', fit: BoxFit.cover)),
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 90, sigmaY: 90),
            child: Container(color: CupertinoColors.white.withAlpha(30)),
          ),

          CustomScrollView(
            slivers: [
              CupertinoSliverNavigationBar(
                enableBackgroundFilterBlur: false,
                automaticBackgroundVisibility: false,
                border: null,
                backgroundColor: CupertinoColors.transparent,
                stretch: true,
                trailing: SizedBox(
                  width: 37,
                  height: 37,
                  child: CupertinoButton.tinted(
                    color: const Color.fromARGB(0, 138, 138, 138),
                    borderRadius: BorderRadius.circular(99),
                    padding: EdgeInsets.zero,
                    child: Icon(CupertinoIcons.info, color: CupertinoColors.systemGrey4),
                    onPressed: () {},
                  ),
                ),
                largeTitle: Text('Settings', style: TextStyle(color: CupertinoColors.white)),
              ),
              SliverList.list(
                children: [
                  CupertinoListSection.insetGrouped(
                    separatorColor: CupertinoColors.white.withAlpha(80),
                    dividerMargin: 0,
                    additionalDividerMargin: 0,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: const Color.fromARGB(56, 0, 0, 0),
                    ),
                    backgroundColor: CupertinoColors.transparent,
                    children: [
                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemOrange.resolveFrom(context),
                          child: Icon(CupertinoIcons.airplane, size: 20),
                        ),
                        title: Text('Airplane mode'),
                        trailing: CupertinoSwitch(
                          value: _airplaneMode,
                          onChanged: (v) {
                            setState(() {
                              _airplaneMode = v;
                            });
                          },
                        ),
                      ),
                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemBlue.resolveFrom(context),
                          child: Icon(CupertinoIcons.wifi, size: 20),
                        ),
                        title: Text('Wifi'),
                        trailing: Row(
                          spacing: 10,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text('Home wifi', style: TextStyle(color: const Color.fromARGB(104, 255, 255, 255))),
                            Icon(
                              CupertinoIcons.right_chevron,
                              size: 20,
                              color: const Color.fromARGB(104, 255, 255, 255),
                            ),
                          ],
                        ),
                      ),
                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemGreen.resolveFrom(context),
                          child: Icon(CupertinoIcons.phone_fill, size: 20),
                        ),
                        title: Text('Cellular'),
                        trailing: Icon(
                          CupertinoIcons.right_chevron,
                          size: 20,
                          color: const Color.fromARGB(104, 255, 255, 255),
                        ),
                      ),
                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemGreen.resolveFrom(context),
                          child: Icon(CupertinoIcons.personalhotspot, size: 20),
                        ),
                        title: Text('Hotspot'),
                        trailing: Icon(
                          CupertinoIcons.right_chevron,
                          size: 20,
                          color: const Color.fromARGB(104, 255, 255, 255),
                        ),
                      ),
                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemGreen.resolveFrom(context),
                          child: Icon(CupertinoIcons.battery_100, size: 20),
                        ),
                        title: Text('Battery'),
                        trailing: Icon(
                          CupertinoIcons.right_chevron,
                          size: 20,
                          color: const Color.fromARGB(104, 255, 255, 255),
                        ),
                      ),
                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemBlue.resolveFrom(context),
                          child: Icon(CupertinoIcons.globe, size: 20),
                        ),
                        title: Text('VPN'),
                        trailing: Row(
                          spacing: 10,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text('Not connected', style: TextStyle(color: const Color.fromARGB(104, 255, 255, 255))),

                            Icon(
                              CupertinoIcons.right_chevron,
                              size: 20,
                              color: const Color.fromARGB(104, 255, 255, 255),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),

                  CupertinoListSection.insetGrouped(
                    separatorColor: CupertinoColors.white.withAlpha(80),
                    dividerMargin: 0,
                    additionalDividerMargin: 0,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: const Color.fromARGB(56, 0, 0, 0),
                    ),
                    backgroundColor: CupertinoColors.transparent,
                    children: [
                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemGrey.resolveFrom(context),
                          child: Icon(CupertinoIcons.settings, size: 20),
                        ),
                        title: Text('General'),
                        trailing: Icon(
                          CupertinoIcons.right_chevron,
                          size: 20,
                          color: const Color.fromARGB(104, 255, 255, 255),
                        ),
                      ),
                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemBlue.resolveFrom(context),
                          child: Icon(CupertinoIcons.person_circle, size: 20),
                        ),
                        title: Text('Accessibility'),
                        trailing: Icon(
                          CupertinoIcons.right_chevron,
                          size: 20,
                          color: const Color.fromARGB(104, 255, 255, 255),
                        ),
                      ),
                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemGrey.resolveFrom(context),
                          child: Icon(CupertinoIcons.camera_fill, size: 20),
                        ),
                        title: Text('Camera'),
                        trailing: Icon(
                          CupertinoIcons.right_chevron,
                          size: 20,
                          color: const Color.fromARGB(104, 255, 255, 255),
                        ),
                      ),

                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemBlue.resolveFrom(context),
                          child: Icon(CupertinoIcons.sun_max_fill, size: 20),
                        ),
                        title: Text('Display & Brightness'),
                        trailing: Icon(
                          CupertinoIcons.right_chevron,
                          size: 20,
                          color: const Color.fromARGB(104, 255, 255, 255),
                        ),
                      ),
                      CupertinoListTile.notched(
                        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                        leading: CircleAvatar(
                          foregroundColor: CupertinoColors.white,
                          backgroundColor: CupertinoColors.systemBlue.resolveFrom(context),
                          child: Icon(CupertinoIcons.globe, size: 20),
                        ),
                        title: Text('VPN'),
                        trailing: Row(
                          spacing: 10,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text('Not connected', style: TextStyle(color: const Color.fromARGB(104, 255, 255, 255))),

                            Icon(
                              CupertinoIcons.right_chevron,
                              size: 20,
                              color: const Color.fromARGB(104, 255, 255, 255),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}