Flutter反射视觉效果插件reflective_visual的使用

简介

reflective_visual是一个用于Flutter应用中的反射视觉效果插件。它可以帮助开发者轻松实现具有反射效果的界面设计，从而提升用户体验。

Demo

安装步骤

添加依赖

首先，在您的pubspec.yaml文件中添加reflective_visual作为依赖项：

dependencies:
  reflective_visual: <latest-version>

然后运行以下命令获取包：

flutter pub get

iOS配置

在ios/Runner/Info.plist文件中添加以下两行：

• 一个键为Privacy - Camera Usage Description和使用描述。
• 另一个键为Privacy - Microphone Usage Description和使用描述。

如果以文本方式编辑Info.plist，添加如下内容：

<key>NSCameraUsageDescription</key>
<string>your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>your usage description here</string>

Android配置

更改android/app/build.gradle文件中的最小Android SDK版本至21或更高：

minSdkVersion 21

示例代码

下面是一个完整的示例demo，展示了如何使用reflective_visual插件创建一个带有反射效果的页面。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:reflective_visual/reflective_visual.dart';

Future<void> main() async {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
  runApp(
    const MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool loading = true;

  [@override](/user/override)
  void initState() {
    _toggleLoading(context);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) => ReflectivePage(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _header(context),
              const SizedBox(height: 32),
              _avatars(context),
              const SizedBox(height: 30),
              _list(context),
            ],
          ),
        ),
      );

  Widget _header(BuildContext context) => Padding(
        padding: const EdgeInsets.all(28),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text(
              'Hey Mehran!',
              style: TextStyle(fontSize: 38, fontWeight: FontWeight.w900),
            ),
            SizedBox(height: 4),
            Text(
              'Let\'s get start!',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      );

  Widget _avatars(BuildContext context) => SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: List.generate(9, (index) => _singleAvatar(context)),
        ),
      );

  Widget _singleAvatar(BuildContext context) => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 10),
            padding: const EdgeInsets.all(3),
            width: 64,
            height: 64,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(100),
              border: Border.all(),
            ),
          ),
          const SizedBox(height: 4),
          const Text('name')
        ],
      );

  Widget _list(BuildContext context) => Expanded(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Column(
              children: List.generate(14, (index) => _singleListItem(context)),
            ),
          ),
        ),
      );

  Widget _singleListItem(BuildContext context) => Padding(
        padding: const EdgeInsets.symmetric(vertical: 12),
        child: Row(
          children: [
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 10),
              width: 46,
              height: 46,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                border: Border.all(),
              ),
            ),
            const SizedBox(width: 5),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text(
                  'Mehran Shoghi',
                  style: TextStyle(fontSize: 15),
                ),
                SizedBox(height: 2),
                Text(
                  'Flutter Developer',
                  style: TextStyle(fontSize: 12),
                ),
              ],
            ),
          ],
        ),
      );

  void _toggleLoading(BuildContext context) async {
    await Future.delayed(const Duration(seconds: 14));
    setState(() => loading = false);
  }
}