Flutter插件glimpse的使用_Glimpse是一个受AirPods启发的极简模态表单，可以用来展示快速信息，例如引导页面、权限请求、通知、状态或公告

Glimpse #

Glimpse是一个受AirPods启发的极简模态表单，可以用来展示快速信息，例如引导页面、权限请求、通知、状态或公告。

import 'package:glimpse/glimpse.dart';

await showGlimpse(
    context: context,
    constraints: BoxConstraints(maxHeight: 300), // 可选参数
    dismissible: true, // 可选参数
    builder: (context) => Text('Hello, world!'),
);

Route #

当使用路由时，你应该在调用runApp()之前插入一个initializeGlimpse()来手动初始化Glimpse。这在iOS上计算模态表单的正确圆角半径时是必需的。

void main() async {
    await initializeGlimpse();
    // ...
    runApp(YourApp());
}

完成上述操作后，你可以使用GlimpseModalRoute来展示一个模态表单：

import 'package:glimpse/glimpse.dart';

await Navigator.of(context).push(
    GlimpseModalRoute(
        builder: (BuildContext context) {
            return Text('Bonjour!');
        },
    ),
);

完整示例Demo

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Glimpse Example',
      home: HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('Glimpse Example'),
      ),
      child: Center(
        child: CupertinoButton.filled(
          child: const Text('Show Glimpse'),
          onPressed: () async {
            await showGlimpse(
              context: context,
              builder: (context) => Navigator(
                onGenerateRoute: (settings) {
                  return CupertinoPageRoute(
                    builder: (context) {
                      return const AirPodsProChargingDummy();
                    },
                  );
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 30),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              'AirPods Pro',
              style:
                  CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle,
              textAlign: TextAlign.center,
            ),
            Expanded(child: Image.asset('assets/airpods_pro_placeholder.jpeg')),
            CupertinoButton(
              child: const Text('Continue'),
              onPressed: () {
                Navigator.of(context).push(
                  CupertinoPageRoute(
                    builder: (context) => const AllDoneDummy(),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              "That's it!",
              style:
                  CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 20),
            const CupertinoTextField(
              placeholder: 'Leave a review',
            ),
            const SizedBox(height: 20),
            CupertinoButton(
              onPressed: Navigator.of(context, rootNavigator: true).pop,
              child: const Text('Done'),
            ),
          ],
        ),
      ),
    );
  }
}