Flutter全屏菜单插件full_screen_menu的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter全屏菜单插件full_screen_menu的使用

简介

full_screen_menu 是一个用于Flutter应用中的全屏菜单插件。它允许开发者创建一个覆盖整个屏幕的菜单，用户可以通过点击不同的选项来执行相应的操作。

Pub Version

Full Screen Menu Logo

安装

在你的 pubspec.yaml 文件中添加 full_screen_menu 依赖：

dependencies:
  full_screen_menu: ^1.0.0

然后导入该包：

import 'package:full_screen_menu/full_screen_menu.dart';

基本用法

以下是一个基本的使用示例，展示了如何显示一个全屏菜单，并在点击不同的菜单项时执行相应的操作：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final LinearGradient orangeGradient = LinearGradient(
    colors: [Colors.orange, Colors.deepOrange],
  );

  final LinearGradient blueGradient = LinearGradient(
    colors: [Colors.blue, Colors.lightBlue],
  );

  void _showFullScreenMenu(BuildContext context) {
    FullScreenMenu.show(
      context,
      items: [
        Image.asset('assets/image.png'),
        FSMenuItem(
          icon: Icon(Icons.ac_unit, color: Colors.white),
          text: Text('Make colder', style: TextStyle(color: Colors.white)),
          gradient: orangeGradient,
          onTap: () => print('Cool package check'),
        ),
        FSMenuItem(
          icon: Icon(Icons.wb_sunny, color: Colors.white),
          text: Text('Make hotter', style: TextStyle(color: Colors.white)),
          gradient: blueGradient,
          onTap: () => print('Hot package check'),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Full Screen Menu Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showFullScreenMenu(context),
          child: Text('Show Full Screen Menu'),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的应用程序，其中包含一个按钮，点击该按钮会显示一个全屏菜单。菜单中有两个选项：一个是“Make colder”，另一个是“Make hotter”。点击这些选项时，会在控制台输出相应的消息。

许可证

该项目基于Apache License 2.0许可证发布。详情请参见 LICENSE 文件。


更多关于Flutter全屏菜单插件full_screen_menu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter全屏菜单插件full_screen_menu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用full_screen_menu插件的示例代码。这个插件允许你创建一个全屏菜单，用户可以通过滑动或点击来触发菜单项。

首先，你需要在你的pubspec.yaml文件中添加full_screen_menu依赖：

dependencies:
  flutter:
    sdk: flutter
  full_screen_menu: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何在Flutter应用中使用full_screen_menu：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FullScreenMenu Demo'),
        ),
        body: FullScreenMenuDemo(),
      ),
    );
  }
}

class FullScreenMenuDemo extends StatefulWidget {
  @override
  _FullScreenMenuDemoState createState() => _FullScreenMenuDemoState();
}

class _FullScreenMenuDemoState extends State<FullScreenMenuDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        FullScreenMenu(
          menuButton: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              FullScreenMenu.of(context)?.openMenu();
            },
          ),
          menuItems: [
            FullScreenMenuItem(
              icon: Icon(Icons.home),
              label: 'Home',
              onTap: () {
                FullScreenMenu.of(context)?.closeMenu();
                // 执行 Home 相关的逻辑
                print('Home tapped');
              },
            ),
            FullScreenMenuItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
              onTap: () {
                FullScreenMenu.of(context)?.closeMenu();
                // 执行 Settings 相关的逻辑
                print('Settings tapped');
              },
            ),
            FullScreenMenuItem(
              icon: Icon(Icons.profile),
              label: 'Profile',
              onTap: () {
                FullScreenMenu.of(context)?.closeMenu();
                // 执行 Profile 相关的逻辑
                print('Profile tapped');
              },
            ),
          ],
          animation: _animation,
        ),
        // 其他内容
        Center(
          child: Text('Swipe from left edge to open the menu'),
        ),
      ],
    );
  }
}

在这个示例中：

  1. 我们首先添加了full_screen_menu依赖，并在pubspec.yaml中指定了版本号。
  2. 创建了一个MyApp和FullScreenMenuDemo类来构建我们的应用。
  3. 在FullScreenMenuDemo类中，我们使用了FullScreenMenu小部件，并定义了三个菜单项（Home, Settings, Profile）。
  4. 每个菜单项点击时会调用onTap回调，并关闭菜单。
  5. 使用了一个AnimationController来演示动画效果（虽然在这个例子中动画效果并不明显，但你可以根据需要调整动画）。

你可以根据需要调整菜单项的图标、标签和点击后的逻辑。希望这个示例能帮助你理解如何在Flutter中使用full_screen_menu插件。

回到顶部