Flutter动画侧边栏插件animated_sidebar的使用

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

Flutter动画侧边栏插件animated_sidebar的使用

Animated Sidebar

pub package Libraries.io for GitHub License

这是一个高度可定制和样式化的可折叠侧边栏插件，针对Flutter的Web和桌面应用程序进行了优化。

示例

安装

在pubspec.yaml中添加依赖

dependencies:  
 animated_sidebar: ^1.0.0

或者使用命令行

flutter pub add animated_sidebar

导入包

import 'package:animated_sidebar/animated_sidebar.dart';

使用方法

侧边栏项(Sidebar Items)

定义一个SidebarItem对象列表：

import 'package:animated_sidebar/animated_sidebar.dart';  
  
final List<SidebarItem> items = [  
  SidebarItem(icon: Icons.home, text: 'Home'),  
  SidebarItem(icon: Icons.notifications, text: 'Notifications'),  
  SidebarItem(icon: Icons.person, text: 'Management'),  
];

子项(Child Items)

每个SidebarItem还可以定义多个SidebarChildItem。

import 'package:animated_sidebar/animated_sidebar.dart';  
  
final List<SidebarItem> items = [  
  SidebarItem(icon: Icons.home, text: 'Home'),  
  SidebarItem(  
    icon: Icons.person,  
    text: 'Management',  
    children: [  
      SidebarChildItem(icon: Icons.person, text: 'Users'),  
      SidebarChildItem(icon: Icons.verified_user, text: 'Roles'),  
    ],  
  ),
];

包含子项的项默认是折叠的，只有在点击时才会展开。如果当前选中的项是一个SidebarChildItem，则其父项将保持展开状态。

默认使用AnimatedSidebar

import 'package:animated_sidebar/animated_sidebar.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    body: Row(
      children: [
        AnimatedSidebar(
          expanded: MediaQuery.of(context).size.width > 600,
          items: items,
          selectedIndex: 0,
          onItemSelected: (index) => print(index),
          headerIcon: Icons.ac_unit_sharp,
          headerIconColor: Colors.amberAccent,
          headerText: 'Example',
        ),
        Center(
          child: Text(
            'Page: $activeTab',
            style: Theme.of(context).textTheme.headline3,
          ),
        ),
      ],
    ),
  );
}

外部处理状态的AnimatedSidebar用法

import 'package:animated_sidebar/animated_sidebar.dart';

int activeTab = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    body: Row(
      children: [
        AnimatedSidebar(
          expanded: MediaQuery.of(context).size.width > 600,
          items: items,
          selectedIndex: activeTab,
          autoSelectedIndex: false, // 必须为false以实现外部状态管理
          onItemSelected: (index) =>
              setState(() => activeTab = index),
          headerIcon: Icons.ac_unit_sharp,
          headerIconColor: Colors.amberAccent,
          headerText: 'Example',
        ),
        Center(
          child: Text(
            'Page: $activeTab',
            style: Theme.of(context).textTheme.headline3,
          ),
        ),
      ],
    ),
  );
}

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用animated_sidebar插件：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:animated_sidebar/animated_sidebar.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int activeTab = 0;

  final List<SidebarItem> items = [
    SidebarItem(
      icon: Icons.home,
      text: 'Home',
    ),
    SidebarItem(
      icon: Icons.notifications,
      text: 'Notifications',
    ),
    SidebarItem(
      icon: Icons.person,
      text: 'Management',
      children: [
        SidebarChildItem(
          icon: Icons.person,
          text: 'Users',
        ),
        SidebarChildItem(
          icon: Icons.verified_user,
          text: 'Roles',
        ),
        SidebarChildItem(
          icon: Icons.key,
          text: 'Permissions',
        ),
      ],
    ),
    SidebarItem(
      icon: Icons.abc,
      text: 'Integrations',
    ),
    SidebarItem(
      icon: Icons.settings,
      text: 'Settings',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: SafeArea(
        child: Row(
          children: [
            AnimatedSidebar(
              margin: const EdgeInsets.fromLTRB(16, 24, 0, 24),
              expanded: MediaQuery.of(context).size.width > 600,
              items: items,
              selectedIndex: activeTab,
              autoSelectedIndex: false,
              onItemSelected: (index) => setState(() => activeTab = index),
              duration: const Duration(milliseconds: 1000),
              frameDecoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  tileMode: TileMode.repeated,
                  colors: [
                    Color.fromRGBO(66, 66, 74, 1),
                    Color.fromRGBO(25, 25, 25, 1),
                  ],
                ),
                borderRadius: BorderRadius.all(Radius.circular(10)),
                boxShadow: [
                  BoxShadow(
                    color: Color.fromRGBO(66, 66, 66, 0.75),
                    spreadRadius: 0,
                    blurRadius: 20,
                    offset: Offset(0, 10),
                  ),
                ],
              ),
              minSize: 90,
              maxSize: 250,
              itemIconSize: 26,
              itemIconColor: Colors.white,
              itemHoverColor: Colors.grey.withOpacity(0.3),
              itemSelectedColor: Colors.grey.withOpacity(0.3),
              itemTextStyle: const TextStyle(color: Colors.white, fontSize: 20),
              itemSelectedBorder: const BorderRadius.all(
                Radius.circular(5),
              ),
              itemMargin: 16,
              itemSpaceBetween: 10,
              headerIcon: Icons.ac_unit_sharp,
              headerIconSize: 30,
              headerIconColor: Colors.amberAccent,
              headerTextStyle: const TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.w600,
                  color: Colors.white),
              headerText: ' Example',
            ),
            Expanded(
              child: _buildPage(activeTab),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPage(int idx) {
    return Wrap(
      children: List.generate(8, (index) {
        double width = idx % 2 == 0 ? double.infinity : 500;
        int count = Random().nextInt(2) + 3;
        return Container(
          margin: const EdgeInsets.fromLTRB(24, 24, 24, 0),
          width: width,
          height: 250,
          decoration: BoxDecoration(
            color: Colors.grey.withOpacity(0.3),
            borderRadius: BorderRadius.circular(10),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              for (int i = 0; i < count; i++)
                Container(
                  width: Random().nextInt(100).toDouble() + 200,
                  height: i == 0 ? 30 : 20,
                  margin: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(0.3),
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
            ],
          ),
        );
      }),
    );
  }
}

这个例子展示了如何创建一个带有动画侧边栏的应用程序，并根据选择的不同页面显示不同的内容。希望这对你有所帮助！


更多关于Flutter动画侧边栏插件animated_sidebar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter动画侧边栏插件animated_sidebar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用animated_sidebar插件来创建动画侧边栏的示例代码。animated_sidebar是一个流行的Flutter插件，用于创建具有动画效果的侧边栏导航。

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

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

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

接下来，我们编写一个简单的Flutter应用，展示如何使用animated_sidebar插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Sidebar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimatedController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimatedController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    )..addListener(() {
        setState(() {});
      });
  }

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

  void _toggleSidebar() {
    _controller.isCompleted
        ? _controller.reverse()
        : _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Sidebar Demo'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: _toggleSidebar,
        ),
      ),
      body: Stack(
        children: [
          AnimatedSidebar(
            controller: _controller,
            position: AnimatedSidebarPosition.left,
            sidebar: Container(
              width: 250,
              color: Colors.grey[800],
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.home),
                    title: Text('Home'),
                    onTap: () {
                      _controller.reverse();
                      // Handle home tap
                    },
                  ),
                  ListTile(
                    leading: Icon(Icons.settings),
                    title: Text('Settings'),
                    onTap: () {
                      _controller.reverse();
                      // Handle settings tap
                    },
                  ),
                ],
              ),
            ),
            content: Container(
              color: Colors.grey[200],
              child: Center(
                child: Text('Main Content'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

解释

  1. 依赖项：在pubspec.yaml中添加animated_sidebar依赖项。
  2. 动画控制器：使用AnimatedController来控制侧边栏的动画。
  3. 侧边栏和内容的布局：使用Stack将侧边栏和主要内容叠加在一起。AnimatedSidebar组件接受controller、position、sidebar和content等参数。
  4. 切换侧边栏：点击AppBar上的菜单图标时，调用_toggleSidebar方法来切换侧边栏的显示状态。

这个示例代码展示了如何使用animated_sidebar插件在Flutter应用中创建一个具有动画效果的侧边栏。你可以根据需要进一步自定义侧边栏和内容区域的样式和功能。

回到顶部