animated_sidebar 1.0.1 copy "animated_sidebar: ^1.0.1" to clipboard
animated_sidebar: ^1.0.1 copied to clipboard

A collapsable sidebar plugin for Flutter, optimized for web and desktop applications.

example/lib/main.dart

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});

  // This widget is the root of your application.
  @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,
              // use this to set the active tab if you want to control it from outside
              // combined with autoSelectedIndex set to false
              // if you don't set autoSelectedIndex to false, the widget will
              // automatically set the active tab and selected item is used only
              // to set the initial value
              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),
            ),
          ],
        ),
      ),
    );
  }

  //minimal version
  // @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,
  //           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,
  //           ),
  //         ),
  //       ],
  //     ),
  //   );
  // }

  Widget _buildPage(int idx) {
    // return a page full of skeleton cards
    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),
            ),
            // create a skeleton card
            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),
                    ),
                  ),
              ],
            ));
      }),
    );
  }
}
copied to clipboard
37
likes
150
points
333
downloads

Publisher

verified publisherksevs.de

Weekly Downloads

2024.07.06 - 2025.01.18

A collapsable sidebar plugin for Flutter, optimized for web and desktop applications.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on animated_sidebar